Data by Design: Automating the Chapter Timeline

Each chapter of Data by Design┬áhas a chapter timeline, which places images and visualizations on a vertical minimap, allowing the user to get a sense of the chapter and their progress within it at a glance. Additionally, all user highlights…

Stacked Bar and Coxcomb charts

Besides the “Export and Import to and from all North-America” scrollytelling visualization, I also created several static visualizations using d3 to showcase Playfair’s method with modern technologies. The first two visualizations use the same data of Playfair’s import-export chart. The…

Data by Design: Code Reuse and Visualizations

When I joined, the team had done a considerable amount of research, design, and requirements exploration in addition to our small prototype. One of the ideas continually emphasized was that the book would be heavily data-driven. This can be a…

Data by Design: Playfair Visualization, Step by Step

In Playfair’s chapter, we remade his original “Imports and Exports to and from North-America” graph with d3. We also breakdown his process of making visualizations with engraving and compared it to the modern way of using software tools. The recreation…

Data by Design: Front Page Timeline

On the front page, we decided to implement a timeline below the main title to give our readers an overview of all the visualizations we will be covering in the book. The timeline consists of three main parts, the gray…

The Data by Design Notebook: Drag and Drop

In my last post, I introduced Data by Design’s notebook feature, and spoke a bit about the design and implementation of the chapter highlighting capability. Highlighting, though, is only the first step in this user story, and we wanted a…

The Data by Design Notebook: Highlighting

From the start, we knew that Data by Design was going to have a powerful dynamic notebook feature that would not only allow the reader to take notes on a chapter, but to add any part of that chapter into…

I’ve been working on the implementation of the chapter navigation line. 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…

Floor Chart Topper

Before we forget to post, some photos of the floor chart topper! (Designed and sewn by Sarah Schoemann).

The code that runs behind FloorChart

Floor Chart Code The Floor Chart is a 30×30 grid of buttons and matching 30×30 grid of LEDs. Each button is underneath an LED. The floor chart code can be thought of at a high level as taking input from…