Sequence: Introduction to Data Visualization with D3.js
Sequence Summary
This sequence introduces methods in visualizing data using the javascript library D3.js
Why?
Exploratory and explanatory visualization are key tools in interpreting and communicating data.
The visual communication of data often allows us to bring attention to patterns that may otherwise be hidden and also communicate expert information to broader audiences.
Where there is data, there is politics. The highly subjective manner in which data is collected, processed, and interpreted is further complicated here by its visual representation. As we progress through the features of d3.js, we will build increasingly robust and flexible visualizations. It is especially important in this context to keep in mind that our design choices are powerful in determining our readers’ interpretations of our data, and therefore shaping the perception of real world phenomena which our data aims to describe.
A note on D3.js
D3.js is one of the most popular and widely used libraries for data visualization today. It is entirely open source and freely available. As the .js might hint at, D3 is written in JavaScript. D3.js is not software with a graphical interface, and with it comes some complexities in learning it. D3 is not so much a chart builder although we will build many charts with it. Instead it allows users to load data into a browser’s memory and connects that data to visual or interactive elements on your page.
Prerequisites
This sequence assumes that you have a fundamental understanding of HTML from a different module, specifically you understand elements, attributes, classes, Ids, and how they are referred to and styled in CSS. These topics are covered in the web fundamentals sequence.
Modules
1. Setting up your workspace and workflow
2. Your first SVG drawing in D3.js, exploring Anscombe's quartet
3. Visual mapping with 3 basic chart types - 3 parts
-
Part 1 Bar
-
Part 2 Line
-
Part 3 Pie
4. Working with external data
5. Introduction to interactivity with selections
Outside references
One of the reasons d3.js is so popular is that there is a lot of support and documentation being generated by its community of users. There are so many examples online, and while most tend to look beautiful, not all examples you find are conducive to learning d3. Here are 2 places I have often looked to in my learning process, and I trust these as references for anyone to get a better understanding of d3.
