3 Working with data

The common denominator of any data visualization is, obviously, the underlying presence of data. As data visualization developers, we meet different types of data and datasets that we need to understand and manipulate to generate visualizations. In this chapter, we will discuss a data workflow that applies to most D3 projects. This strategy, illustrated in figure 3.1, starts with finding data for our project. This data can contain different data types, like nominal or ordinal data, and can come in different dataset formats, like CSV or JSON files. There’s usually a lot of work implied at this stage to prepare and clean the data, that we won’t cover.

Once a dataset is assembled, we use D3 to load it into a project, to format and measure the data. Then, we are ready to generate visual elements, usually SVG shapes, based on the data. This powerful process is called data-binding and we will use it to generate all the rectangles for the bar chart we’ve started in chapter 2.

3.1 Understanding data

3.1.1 Data types

3.1.2 Dataset formats

3.2 Preparing data

3.2.1 Loading a dataset into a D3 project

3.2.2 Formatting a dataset

3.2.3 Measuring a dataset

3.3 Binding data to DOM elements

3.3.1 Setting DOM attributes dynamically with data

3.4 Adapting data for the screen

3.4.1 Scales

3.4.2 Linear scales

3.4.3 Band scales

3.5 Adding labels to a chart

3.6 Summary