The following scatterplot represents a timeline of letters in the collection, where the x-axis is the year and the y-axis represents the month and date. The color of each point denotes the author of the letter; however, the number of authors means that many colors are shared between authors. Below the timeline is a textbox for an author’s name, which will filter the timeline to only include letters written by this author. Below this are two sliders to define a range of years for filtering. There are also textboxes for year. There is a minumum range of five years.
Hovering over a point will show the letter’s name in Special Collections, the author, and date it was sent. Clicking on a point will display this information in the gray box below the timeline. The name of the letter in this box is a link to the letter in Special Collections.
The timeline was built using Plotly.js, a JavaScript library that allows for the creation of interactive data visualizations. One particularly useful feature of Plotly.js is traces, which act like separate layers that can be viewed individually. Certainly the same effect could be achieved with another library, but Plotly.js makes the process very straightforward.
Preprocessing for this visualization was rather simple, as the only relevant variable was the date created. After separating into day, month, and year, as well as filtering to only include years from 1820 to 1920, preprocessing was complete.
Before plotting, it was necessary to create arrays for unique years, months, and authors. The years and months serve as the x- and y-axes respectively, while the author determines the trace of a data point. To create each trace, there is first a loop over the length of the list of unique authors. Then, variables for x, y, and text are initialized, all as arrays. x and y determine where each point is on the plot, and text determines the text that appears when clicking or hovering over a point. Within this loop, another loop iterates over each letter. If the author of the letter matches the current author, then this letter’s data gets added to the trace. Some calculations are made to put the point in between months corresponding to the date they were sent. It should be noted that when d3 parses a csv, all values will be read as string, meaning that numbers will need to be converted before being used in calculations. It was decided that the “name” attribute of each trace should be left blank. This is because it is shown when hovering over a point; however, specific text was already created for this purpose and the name is rendered obsolete. However, having the author’s name as an attribute was still useful, as it made the process of filtering data simpler. To work around this, each trace’s “hoverinfo” attribute was set to the current author. After setting appropriate values for the layout and making sure that the plot was responsive to screen size changes, the scatter plot is ready to plot.
The filtering works much like the map’s filtering, taking a string from an html text input. When the input matches a valid author name, the filter function is called. The function first hides all of the traces. It then checks the hoverinfo of each trace. If it matches the input, then that trace is made visible. Then a new plot is created, replacing the old one.