Just released!

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.

loading...

Learn how to quickly turn data into insights with D3

Most companies have access to data that can grow profits
and no one is looking at it.

This data could show us:

  • where do our customers drop off?
  • how do I know that everything is working properly?
  • where should we spend our marketing budget to have the biggest effect?
  • what are we missing that is costing us money?

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.

Our customers work at

Does this sound like your team?

I've tried learning D3 before, but it never really stuck

We need good advice on how to sell ideas and share results through simple and beautiful figures.

I don't need another coffee table book that shows pretty pictures that have no applicability to my work.

Dataviz isn't my only job and I need a quick guide that will show me how to use D3 to visualize our data as fast as possible.

I don't want to build another expensive dashboard that focuses too much on sparkly animations but leaves relevance by the wayside.

We need to build a dashboard that can be easily updated and present a snapshot of the business to management (as quickly as possible.)

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.

👋 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.

When used appropriately, creating charts communicate ideas with simplicity, clarity, and the appropriate level of detail.

[{"time": 1514782800, "summary": "Clear throughout the day.", "icon": "clear-day", "sunriseTime": 1514809280, "sunsetTime": 1514842810, "moonPhase": 0.48, "precipIntensity": 0, "precipIntensityMax": 0, "precipProbability": 0, "temperatureHigh": 18.39, "temperatureHighTime": 1514836800, "temperatureLow": 12.23, "temperatureLowTime": 1514894400, "apparentTemperatureHigh": 17.29, "apparentTemperatureHighTime": 1514844000, "apparentTemperatureLow": 4.51, "apparentTemperatureLowTime": 1514887200, "dewPoint": -1.67, "humidity": 0.54, "pressure": 1028.26, "windSpeed": 4.16, "windGust": 13.98, "windGustTime": 1514829600, "windBearing": 309, "cloudCover": 0.02, "uvIndex": 2, "uvIndexTime": 1514822400, "visibility": 10, "temperatureMin": 6.17, "temperatureMinTime": 1514808000, "temperatureMax": 18.39, "temperatureMaxTime": 1514836800, "apparentTemperatureMin": -2.19, "apparentTemperatureMinTime": 1514808000, "apparentTemperatureMax": 17.29, "apparentTemperatureMaxTime": 1514844000, "date": "2018-01-01"}, {"time": 1514869200, "summary": "Clear throughout the day.", "icon": "clear-day", "sunriseTime": 1514895684, "sunsetTime": 1514929260, "moonPhase": 0.52, "precipIntensity": 0, "precipIntensityMax": 0, "precipProbability": 0, "temperatureHigh": 25.79, "temperatureHighTime": 1514923200, "temperatureLow": 12.65, "temperatureLowTime": 1514980800, "apparentTemperatureHigh": 20.13, "apparentTemperatureHighTime": 1514923200, "apparentTemperatureLow": 12.1, "apparentTemperatureLowTime": 1514944800, "dewPoint": 5.51, "humidity": 0.57, "pressure": 1028.58, "windSpeed": 4.71, "windGust": 12.25, "windGustTime": 1514912400, "windBearing": 266, "cloudCover": 0.05, "uvIndex": 2, "uvIndexTime": 1514908800, "visibility": 10, "temperatureMin": 12.23, "temperatureMinTime": 1514894400, "temperatureMax": 25.79, "temperatureMaxTime": 1514923200, "apparentTemperatureMin": 4.51, "apparentTemperatureMinTime": 1514887200, "apparentTemperatureMax": 20.13, "apparentTemperatureMaxTime": 1514923200, "date": "2018-01-02"}, {"time": 1514955600, "summary": "Mostly cloudy starting in the evening.", "icon": "partly-cloudy-night", "sunriseTime": 1514982086, "sunsetTime": 1515015712, "moonPhase": 0.56, "precipIntensity": 0, "precipIntensityMax": 0, "precipProbability": 0, "temperatureHigh": 28.32, "temperatureHighTime": 1515009600, "temperatureLow": 23.46, "temperatureLowTime": 1515070800, "apparentTemperatureHigh": 28.32, "apparentTemperatureHighTime": 1515009600, "apparentTemperatureLow": 14.28, "apparentTemperatureLowTime": 1515070800, "dewPoint": 6.03, "humidity": 0.52, "pressure": 1024.79, "windSpeed": 0.64, "windGust": 5, "windGustTime": 1514955600, "windBearing": 254, "cloudCover": 0.13, "uvIndex": 2, "uvIndexTime": 1514995200, "visibility": 10, "temperatureMin": 12.65, "temperatureMinTime": 1514980800, "temperatureMax": 28.32, "temperatureMaxTime": 1515009600, "apparentTemperatureMin": 12.65, "apparentTemperatureMinTime": 1514980800, "apparentTemperatureMax": 28.32, "apparentTemperatureMaxTime": 1515009600, "date": "2018-01-03"}, {"time": 1515042000, "summary": "Foggy until afternoon.", "icon": "fog", "sunriseTime": 1515068486, "sunsetTime": 1515102166, "moonPhase": 0.6, "precipIntensity": 0.0001, "precipIntensityMax": 0.0005, "precipIntensityMaxTime": 1515088800, "precipProbability": 0.06, "precipAccumulation": 0.032, "precipType": "snow", "temperatureHigh": 24.09, "temperatureHighTime": 1515110400, "temperatureLow": 8.86, "temperatureLowTime": 1515157200, "apparentTemperatureHigh": 15.76, "apparentTemperatureHighTime": 1515067200, "apparentTemperatureLow": -2.83, "apparentTemperatureLowTime": 1515157200, "dewPoint": 16.64, "humidity": 0.75, "pressure": 999.78, "windSpeed": 7.31, "windGust": 24.33, "windGustTime": 1515099600, "windBearing": 334, "cloudCover": 0.98, "uvIndex": 1, "uvIndexTime": 1515078000, "visibility": 5.01, "temperatureMin": 19.8, "temperatureMinTime": 1515124800, "temperatureMax": 26.62, "temperatureMaxTime": 1515052800, "apparentTemperatureMin": 9.16, "apparentTemperatureMinTime": 1515124800, "apparentTemperatureMax": 25.83, "apparentTemperatureMaxTime": 1515042000, "date": "2018-01-04"}, {"time": 1515128400, "summary": "Clear throughout the day.", "icon": "clear-day", "sunriseTime": 1515154884, "sunsetTime": 1515188621, "moonPhase": 0.63, "precipIntensity": 0, "precipIntensityMax": 0, "precipProbability": 0, "temperatureHigh": 15.36, "temperatureHighTime": 1515182400, "temperatureLow": 7.4, "temperatureLowTime": 1515240000, "apparentTemperatureHigh": 4.56, "apparentTemperatureHighTime": 1515189600, "apparentTemperatureLow": -3.15, "apparentTemperatureLowTime": 1515243600, "dewPoint": -1.71, "humidity": 0.52, "pressure": 1009.75, "windSpeed": 8.06, "windGust": 21.82, "windGustTime": 1515182400, "windBearing": 290, "cloudCover": 0.13, "uvIndex": 2, "uvIndexTime": 1515168000, "visibility": 9.87, "temperatureMin": 8.86, "temperatureMinTime": 1515157200, "temperatureMax": 18.65, "temperatureMaxTime": 1515128400, "apparentTemperatureMin": -2.83, "apparentTemperatureMinTime": 1515157200, "apparentTemperatureMax": 8.19, "apparentTemperatureMaxTime": 1515128400, "date": "2018-01-05"}, {"time": 1515214800, "summary": "Clear throughout the day.", "icon": "clear-day", "sunriseTime": 1515241279, "sunsetTime": 1515275077, "moonPhase": 0.67, "precipIntensity": 0, "precipIntensityMax": 0, "precipProbability": 0, "temperatureHigh": 13.02, "temperatureHighTime": 1515268800, "temperatureLow": 3.68, "temperatureLowTime": 1515330000, "apparentTemperatureHigh": 2.1, "apparentTemperatureHighTime": 1515272400, "apparentTemperatureLow": -4.08, "apparentTemperatureLowTime": 1515304800, "dewPoint": -7.22, "humidity": 0.46, "pressure": 1023.97, "windSpeed": 6.44, "windGust": 18.09, "windGustTime": 1515218400, "windBearing": 294, "cloudCover": 0.03, "uvIndex": 2, "uvIndexTime": 1515254400, "visibility": 10, "temperatureMin": 6.62, "temperatureMinTime": 1515297600, "temperatureMax": 13.02, "temperatureMaxTime": 15

Once you have enough data, you can't make sense of it by looking at the individual records, instead you have to understand trends and patterns in your data as a whole.

Using charts is like an x-ray for your data - you can see things you couldn't see before.

And once you're comfortable with D3 you can quickly:

  • understand key metrics at a glance
  • catch anomalies (before they turn into problems)
  • give key insights to our customers
  • and impress our boss and peers

Today, I want to show you the exact methods I use to create beautiful, understandable data visualizations using D3.

D3 is an open-source library for creating custom, interactive charts. It's the de-facto JavaScript charting library — and once you master it, you can build any chart you can imagine.

Sergio Sánchez

Founder at Tacosdedatos

I always wondered how I would even start to build something in D3 and now I finally know - this is an awesome book!

Personalizing the data so my charts are my charts.

As a D3 newbie, I couldn't appreciate just how useful this would be. Amazing.

Discover the magic of visualizing your data.

LowMiddleHighSocioeconomicStatus<High SchoolHigh SchoolSome Post-secondaryPost-secondaryAssociate’sBachelor’s and upFemaleMale

Imagine:

  • Creating beautiful charts that communicate ideas with simplicity, clarity, and detail
  • Feeling more confident about your design choices
  • Using your D3 visualizations for insightful communication
  • Illustrating complex topics with clarity
  • Helping your boss catch anomalies -- before they turn into problems
  • Creating a dashboard the execs proudly hang in the lobby

Today, I want to show you the exact methods I use to create beautiful, understandable data visualizations with D3.

I'll teach you:

  • how to effectively present quantitive information, paired with..
  • pragmatic tutorials that show you exactly how to create charts and dashboards

Visualize anything you can imagine

Fullstack D3 and Data Visualization is a 12-lesson course that shows you step-by-step how to create Data Visualizations with D3, create custom dashboards, and design principles along the way.

iconRunnable Code

Starting with the very first chapter, every section of the book has runnable code examples to get your hands dirty and your muscle memory primed

iconData visualization principles

Understand the fundamentals to visualizing data. You'll know what charts to use and why, as well as how to pick colors, manipulate data dimensions, and even make new charts that haven't been seen before!

loading...

Steven Williams

Senior Frontend Engineer at Tallgrass Freight Company

This is a great read and has tons of useful examples and explanations.

I know there are resources out there that show combo graphs, but they leave out the thought process; what data makes a good combo, color schemes, how does one tell a story using graphs combined?, etc.

I loved the chapter on dashboards. Having built many dashboards over the years, this is what brought it all together for me.

Dig in and power up!

We're inundated with data that we can't make sense of unless people wrestle it into a digestable format.

With Fullstack D3 and Data Visualization, we'll build a solid foundation, then we'll give you the tools to de-tangle data into stunning data visualizations and actionable dashboards.

Super-speed your learning

Get your feet wet by creating a timeline, scatter plot, and histogram from scratch in under 2 hours.

Build a solid foundation

We'll talk about each step in depth so that you come away with a solid understanding of the foundations. Then we'll build on that foundation to create amazing, complex data visualizations.

Create data visualizations that people want to play with

Make charts that people want to explore! Learn the basics of how to create interactive charts, then build on those basics to let your users dive deep into the data.

Learn data visualization design

Do you have a data set that you want to understand, but don't know where to start? Not only will we help, we'll give you the tools to decide for yourself. Learn about color spaces, types of data, ways to represent data, and more.

Learn how to design an effective dashboard

Sure, you can throw a dataset into a table and call it a day. Instead, learn how to make data truly actionable, while also learning the nuances of dealing with dynamic data sources.

Get access to a massive asset library

Along with the charts you build yourself, we'll go through common charts and when to use them. For each of these charts, dive into the code, which is laid out in a familiar framework.

What's Inside

Taken from Russia’s watersSvalbard and Jan MayenNorwayJapanRussiaWestern SaharaMoroccoSenegalGuinea-BissauUnited States of AmericaThe United KingdomFaroe IslandsGreenlandFijiNamibiaMauritaniaDenmarkAntarcticaSpainIcelandSouth KoreaGuineaChinaGabonUkraineTurkeySri LankaIndiaThe NetherlandsMozambiqueLithuaniaAngolaIrelandEstoniaGuernseyCanadaPortugalKorea (Democratic People's Republic of)GambiaPolandMaltaNew ZealandFalkland Islands (Malvinas)ArgentinaUruguayGibraltarDominican RepublicFinlandFranceLibyaSudanEgyptMaldivesGermanySwedenMicronesia (Federated States of)SingaporeGreeceTaiwanLatviaDecJanFebMarAprMayJunJulAugSepOctNov

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. Need a bar chart? Write 5 lines of code and here you go!

There are several simple, higher-level charting APIs that are fine if you need a simple line chart and don't want to spend any time learning anything.

On the other end of the spectrum is yours truly: d3.js. It takes longer to learn, but only because it is so much more powerful. You'll be able to create any data visualization you can think of — plus, this book will also give you a framework to help you design effective, complex visualizations.

20304050607080902018FebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

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.

In this chapter, we'll create a line chart that plots the daily temperature. Here's what our line chart will look like when we're finished

We get our hands dirty and write the code to build this line chart. This will gives us a good foundation to dive deeper into each concept in Chapters 2 and 3, in which we create more complex charts.

-1001020304050607080Dew point (°F)0.40.60.81.0Relative humidity

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.

In this chapter we uncover the pattern that there are 7 steps in every D3 chart. They are:

  1. Access data: Look at the data structure and declare how to access the values we'll need
  2. Create chart dimensions: Declare the physical (i.e. pixels) chart parameters
  3. Create canvas: Render the chart area and bounds element
  4. Create scales: Create scales for every data-to-physical attribute in our chart
  5. Draw data: Render your data elements
  6. Draw peripherals: Render your axes, labels, and legends
  7. Set up interactions: Initialize event listeners for interaction - we'll get to this step in Chapter 5
Histogram looking at the distribution of humidity over 2016

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.

For extra credit, we'll generalize our histogram function and loop through eight metrics in our dataset - creating many histograms to compare.

Histogram looking at the distribution of humidity over 2016

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.

When a bar animates from one height to another, the viewer has a better idea of whether it's getting larger or smaller. If we're animating several bars at once, we're drawing the viewer's eye to the bar making the biggest change because of its fast speed.

Chapter 5: Interactions

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

Browsers have native event listeners -- using addEventListener(), we can listen for events from a user's:

  • mouse
  • keyboard
  • scroll wheel
  • touch
  • resize
  • ... and more.

Now we know how to implement hover states in two ways: CSS hover states and event listeners. Why would we use one over the other?

CSS hover states are good to use for more stylistic updates that don't require DOM changes. For example, changing colors or opacity. If we're using a CSS preprocessor like SASS, we can use any color variables instead of duplicating them in our JavaScript file.

JavaScript event listeners are what we need to turn to when we need a more complicated hover state. For example, if we want to update the text of a tooltip or move an element, we'll want to do that in JavaScript.

Chapter 6: Making a map

Maps are also uniquely good at answering several questions, such as:

  • Do neighboring countries tend to have the same amount of population growth?
  • Are there patterns across continents?
  • Do geographically larger countries tend to have more or less population growth?

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. So far, we've created a line, scatter, and bar chart, but there are many more basic types to choose from, as well as charts that don't fall into a simple category.

There are many different values here, but two basic types: strings and numbers. These two types can roughly be split (respectively) into two basic types of data: qualitative and quantitative.

In this chapter we discuss the dos and don'ts of datavis and how to improve our charts to be more readable.

We close the chapter with a discussion of different color spaces, and explore the role of color in different scenarios.

Chapter 8: Common Charts

In this chapter, we talk about common chart types. This chapter will help you in a few ways:

Communication

When discussing part of your interface, it's important to have commonly understood names for things. Imaging trying to talk about a button without knowing the word "button".

Having a common language for charts makes it easier to talk about existing and potential charts.

Quick readability

Every time a user sees a chart, they need to orient themselves to figure out how to read it. There are ways to help speed up that process, such as adding labels and legends. But the biggest help is using a familiar chart type. Now that we're comfortable with how to create a chart, we should zoom out a bit and talk about what chart to create. So far, we've created a line, scatter, and bar chart, but there are many more basic types to choose from, as well as charts that don't fall into a simple category.

Chapter 9: Dashboard Design

What is a dashboard?

Good question! There are many definitions of "dashboard" - in this chapter, I'll be using the word to refer to any web interface that makes sense out of dynamic data. This is by no means the official definition of dashboard, but it is a handy definition for our use here.

We'll talk about ways to display a simple metric effectively, how to deal with different data states when loading data, how to design tables, and then we'll run through a design exercise. You'll come away with tangible strategies for displaying data in an actionable manner. Let's dig in!

Chapter 10: Advanced Visualization: Marginal HistogramAdvanced

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:

  • do most days have a similar range in temperatures? Or do colder days vary less than warmer days?
  • did we have any anomalous days? Were both the minimum and maximum temperatures anomalous, or just one?
  • how do the temperatures change throughout the year?

As you can see, more complicated charts have the ability to answer multiple questions -- we just need to make sure that they're focused enough to answer them well.

Chapter 11: Advanced Visualization: Radial Weather ChartAdvanced

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

This chart will give the viewer a sense of overall weather for the whole year, and will highlight trends such as:

  • What time of the year is cloudiest, and does that correlate with the coldest days?
  • Do cloudy days have lower UV indices, or are they rainier?
  • How does weather vary per season?

The complexity of this chart will increase the amount of time the viewer needs to wrap their head around it. But once the viewer understands it, they can answer more nuanced questions than a simpler chart.

In this chapter we'll reinforce concepts we've already learned as well as new concepts, such as angular math, as we build this visualization.

Chapter 12: Advanced Visualization: Animated Sankey DiagramAdvanced

In this project, we'll be simulating real data and creating an animated diagram to engage our viewers. We won't be using our beloved weather data for this! We'll be using outcomes of a study of 10-year educational achievement for high schoolers in the United States, based on sex and socioeconomic status. For example, 55.3% of the males who grew up with a high socioeconomic status completed at least a Bachelor's degree.

We could make a static data visualization that shows these different probabilities, but our goal here is to engage the viewer. By simulating data and animating it, the viewer gets to "play along" and guess at the outcome before seeing it play out before their eyes.

Chapter 13: D3 and ReactAdvanced

We know how to make individual charts, but you might ask: 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 -- let's talk about the best way to handle that overlap -- and how we can create blazing fast charts using the two together.

Chapter 14: D3 and AngularAdvanced

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

First, we decide which concerns we want D3 to be in control of. There are roughly two groups D3 can take care of:

  1. DOM manipulation (like Angular)
  2. Data manipulation (manipulation, interpolation, basic stats)

We're going to use Angular for #1, but D3 for #2.

What People Are Saying...

This book reads really well. Generalizing code is not commonly addressed in D3 books geared towards beginners. Thank you for doing that Amelia! Great work!

Leandro Collares
Software Developer

Just did my first scrollytelling experiment using d3.js + javascript for scroll events! Can't believe it!!

Guillermina Sutter Schneider
Research & Project Manager at Cato Institute

This book helped create my fundamentals in D3. The explanations with examples and code made everything clearer. I will use the code for my first visualizations.

Lorenzo Amabili
PhD Student in Computer Science at University of Groningen

The course has been amazing so far! It has a great balance between educating about dataviz, explaining methodologies, and letting us know which bits are syntactic sugar. Loving the course!

Marguerite Roth
Design Lead at Parse.ly

I really like that this book gets you creating a MVP chart within 1 chapter

Cameron Yick
Software Engineer, Data Visualization at Datadog

I was a D3 newbie, but couldn't wait to learn it. Now I understand why people in general say that D3 is quite difficult to learn. Lots of new concepts, but I made it through and I am still having fun! Amelia is a great teacher.

Ralph Spandl
Information Architect at r42 communication

loading...

Purchase the book today

Basic

The basic book and code.
Create charts with D3

  • 📕 350+ page PDF
  • 👩‍💻 Completed code
  • EPub
  • Mobi (Kindle)
  • In-depth walk-through of many charts
  • Deep dive into animations & interactions
  • Data visualization basics and theory
  • Common charts and code library
  • Learn how to design effective dashboards
  • Deep dives into 3 advanced visualizations
  • Learn the right way to combine D3 and React.js
  • Learn the right way to combine D3 and Angular
  • 3 PDF Cheat Sheets
  • One-time price of $49

Advanced

The advanced book, code, and cheatsheets
Create sophisticated, custom visualizations

  • 📗 601+ page PDF
  • 👩‍💻 Completed code
  • EPub
  • Mobi (Kindle)
  • In-depth walk-through of many charts
  • Deep dive into animations & interactions
  • Data visualization basics and theory
  • Common charts and code library
  • Learn how to design effective dashboards
  • Deep dives into 3 advanced visualizations
  • Learn the right way to combine D3 and React.js
  • Learn the right way to combine D3 and Angular
  • 3 PDF Cheat Sheets
  • One-time price of $89
Most popular!

You might be asking:

Is this just another "pretty coffee table book"? I don't need another book that's filled with beautiful but useless information.

Nope! This is a practical book that teaches you both the tooling and when to use it.

The world of data visualization books is often split into two groups:

  • Pretty "coffee table" books with gorgeous pictures of impractical charts that you'll never use OR
  • exhaustive software library "explanations" that aren't much better than reading the API documentation

What you need is something that is both full of beautiful, clear (and practically useful) charts, but also walks through every step necessary for creating real D3 charts - from empty folder to the browser.

“But I'm a programmer not a designer - What if my charts turn out ugly?”

In this book we cover design principles, do's-and-don'ts of design, and when to use certain kinds of charts. The result is that your charts will look great even if you have no formal training in creating visual information design. But more importantly: you'll understand how to communicate ideas with visualizations.

Isn't D3 complicated? I need to get a dashboard up quickly! I don't have time to learn every corner of some confusing library.”

Fullstack D3 is not a reprint of the API docs - it's a practical guide to everything you need to create charts as quickly as possible. Within the first 10 minutes you'll be creating your own custom D3 charts. After reading the first few chapters you'll feel comfortable creating your own visualizations.

Can I use D3 with my existing React / Angular / web app?

Absolutely. The premium package of the book comes with lessons and sample code on how to integrate D3 easily — and efficiently — into your existing application.

Corey Thompson

Senior Software Engineer at Enovation Controls

I really like the way Amelia outlines the steps in Making a Scatterplot. The steps frame it nicely when presented as a checklist.

Also, seeing free formed shapes being created was eye opening and really drew my attention.

Great job

I'm wondering...

What happens after I buy the book?

You'll be able to download the book and source code after checkout. You'll also receive an email from Gumroad giving you instructions on how to download it at any time.

How long is the book?

When you buy the Advanced Package, the book has 14 chapters totaling about 601+ pages. The Basic Package contains 9 totaling about 350+ pages.

Is the book complete?

Yes

Do I have to know JavaScript?

Yes, we assume you know the basics of programming in JavaScript. However, you don't have to be a JavaScript expert - we walk through every line of code on how to build the first few charts.

Are there free updates?

Yes! Buying now entitles you to free updates for at least one year after purchase

How do I download the book and updates?

If you've purchased the book, you can download it from your Gumroad library.

How up to date is the book?

The book is up to date with the latest version of D3

What format is the book?

The book is in PDF, epub, and mobi format. It also comes with a large folder of example code

What if I don't like it?

If you're unhappy with the book for any reason, just reach out to us and we'll give you a full refund. There's no risk.

Learn how to turn numbers into insights with D3

Dig in and create your first D3 visualization within 10 minutes.
Click the button below to get started.