Fullstack D3 and Data Visualization

Build beautiful data visualizations with D3

The Fullstack D3 book is the complete guide to D3. With dozens of code examples showing each step, you can gain new insights into your data by creating visualizations.

Learn how to quickly turn data into insights with D3

We have the data. But it needs to be understood by humans. The best way to convert this data into an understandable format is to mold it into a data visualization.

And D3 is the best tool for job if you need to create custom data visualizations.

With Fullstack D3 and Data Visualization you and your team will be able to share key insights, uncover problems before they start, and impress your boss by creating gorgeous visualizations.

What's Inside

Chapter 0: Introduction When would you want to use D3.js?

There is a spectrum of libraries to create charts on the web: on one end, you have easy-to-use, basic libraries that will create a standard chart type.

Chapter 1: Making your first chart

In this chapter we make a line chart. Line charts are a great starting place because of their popularity, but also because of their simplicity.

Chapter 2: Making a scatterplot

When looking at the relationship between two metrics, a scatterplot is a good choice. In this chapter we show how to create a scatterplot.

Chapter 3: Making a bar chart

In this chapter we cover how to create a histogram, which is a bar chart that shows the distribution of one metric, with the metric values on the x axis and the frequency of values on the y axis.

Chapter 4: Animations and Transitions

When we update our charts, we can animate elements from their old to their new positions. These animations can be visually exciting, but more importantly, they have functional benefits.

Chapter 5: Interactions

The biggest advantage of creating charts with JavaScript is the ability to respond to user input.

Chapter 6: Making a map

Maps are also uniquely good at answering geography-based questions. In this chapter, we'll build a map and learn how to plot values within a location.

Chapter 7: Data Visualization Basics

Now that we're comfortable with how to create a chart, we should zoom out a bit and talk about what chart to create.

Chapter 8: Common Charts

In this chapter, we talk about common chart types and when to use them.

Chapter 9: Dashboard Design

A dashboard is any web interface that makes sense out of dynamic data, and in this chapter we learn how to make one.

Chapter 10: Advanced Visualization: Marginal Histogram

First, we'll focus on enhancing a chart we've already made: our scatter plot. This chart will have multiple goals, all exploring the daily temperature ranges in our weather dataset.

Chapter 11: Advanced Visualization: Radial Weather Chart

We talked about radar charts in Chapter 10. For this project, we'll build a more complex radar chart.

Chapter 12: Advanced Visualization: Animated Sankey Diagram

In this project, we'll be simulating real data and creating an animated diagram to engage our viewers.

Chapter 13: D3 and React

What's the best way to draw a chart within React? It turns out that there is a fair bit of overlap in functionality between a React and D3 - we'll discuss how we can create blazing fast charts using the two together.

Chapter 14: D3 and Angular

In this chapter we show how to create optimized SVG charts using D3 and Angular.