The first two visualizations use the same data of Playfair’s import-export chart.

The stacked bar graph on the left uses a similar axis and labels as the import-export chart. I have each bar with constant width representing each year we have in the CSV and positioned chronologically. For year 1770 to year 1782, where we have detailed data points, the bars are overlapping each other.

The Coxcomb graph on the right uses a circular axis, where each sector represents a decade. The width (inner angle of the sector) depends on the duration of time each data point represents, so from year 1770 to year 1782, the sectors are thinner than the others. I also made the choice to have the sectors outflow the circular axis instead of using a larger scale because I believe this dramatic visualization will attract readers’ attention to the later decades of the chart and emphasize its visual effect.

Covid-19 Death Comparison

Women Representatives Comparison

Average Income Comparison

These three charts use the same format as Playfair’s import-export chart. The d3 code is also similar. I only need to use a different dataset and modify its axis scale and title positions. The visualizations showcase an interesting comparison between U.S. and U.K. for some relevant topics.

Playfair’s original visualization

D3 recreation of Playfair’s visualization

The recreation integrated the scrolly-telling feature we had for this project, breaking down the process of Playfair’s engraving and transformed it into today’s data plotting method with d3. As the reader scroll through the web page, components of the visualization appears in the order of creation along with text explanation.

The visualization starts with borders, axis, and labels. The first version of the impart and export line corresponding to Playfair’s first draft.

Playfair’s First Draft

Next, the lines transformed into Playfair’s final version and then today’s recreation. The lines of Playfair’s versions were crafted by tracing the original visualizations in Adobe Illustrator and exporting them into SVG format. After carefully position the SVG lines into the d3 visualization, I then have to manually match the line with data points in the CSV used for the recreation in order to implement the transforming part.

Line Transformation GIF

The visualization then displays the title and also the datapoint used to form the curves in the version of creation. We can see that the curve of the reaction was generated by those data points so that there is a perfect match between them, whereas Playfair’s original versions would resulting in some error.

The image information is stored in the points array in the data function of the Vue component. The structure of each data point is shown in the screenshot below.

Each data point has a unique id, the year it belongs to, the order of that year, the link to the location of the image stored, and the image’s width and height. These information is used to calculate the position and size of the image frame. The structure should also be optimized and stored as a JSON or CSV in the future.

The timeline is implemented in the Picline Vue component, takes in the points array from the home page. The timeline is made purely through SVG. We first have a function to group the data points by year and determine the height of the blue bar, then draw the blue bars and the corresponding text, the position of text alternates by odd and even. We then iterate through all the data points to draw image frames. The position of the frame is determined by the position of the year plus the offset of the order of the point in the year.

We added @mouseon and @mouseleave to the function to observe users’ interaction. When hovering over each frame, the frame size and the picture size will be enlarged by two, displaying on the top layer with a blue arrow pointing the position on in gray line.

The entire timeline would work as the gif showed below.

Here are some features listed:

• Blocks/Nodes with different colors represent different types of visualization, where their position in the navline is determined by their position in the chapter.
• The user is able to scroll through the chapter and having their reading progress represented by the colored part of the navline.
• The user’s current location is indicated by a separate block/node on the navline.
• The user’s highlight(linked to the notebook) is represented by a separate column of blocks/nodes (peabody and dubois) or its background (playfair). The transparency of the blocks/nodes/background color is determined by the number of highlights attached to the subsection.
• Able to hover over the block/node and able to jump to the visualization location in the chapter by clicking.

Peabody Chapter

Dubois Chapter

Playfair Chapter