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.
���� Hey! I'm Amelia, the author of this book. I'm a front-end developer and designer with a background in neuroscientific research. Over the past ten years that I've been visualizing data, I've been perfecting my method and collecting helpful tricks. I'm here to jump-start your own journey! In Fullstack D3 and Data Visualization, I distill my hard-earned knowledge into bite-sized lessons. We'll start making charts right away, and learn new concepts and design theory as we go.
