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.