D3 Start to Finish
$35.00
Minimum price
$50.00
Suggested price

D3 Start to Finish

Learn how to make a custom data visualisation using D3.js.

About the Book

D3 Start to Finish teaches you how to build a custom, interactive and beautiful data visualisation using the JavaScript library D3.js (versions 6 and 7).

The book covers D3 concepts such as selections, joins, requests, scale functions, event handling and transitions. It also covers general web development techniques such as state management and modularisation. In other words, everything you need to know to build a real world, custom data visualisation.

You'll also learn how to put these concepts into practice by building an interactive data visualisation called Energy Explorer. This is a custom data visualisation that visualises the energy mix of 141 countries. There are 15 separate build steps and you're taken through each step in detail. There's also a code download link for all 15 steps so you can follow along.

Some of the topics covered are:

  • requesting CSV data using D3
  • D3 data joins (including joining nested data)
  • architecting a data visualisation using a layout function
  • detailed styling using CSS
  • adding a popup using Flourish's popup library
  • state management
  • animations using D3 transitions
  • data manipulation using Lodash
  • adding a menu, legend and footer

To get the most out of this book you need to be familiar with HTML, SVG, CSS and JavaScript. If you need to get up to speed with these languages I recommend my book Fundamentals of HTML, CSS, SVG & JavaScript for Data Visualisation. I've bundled both books together at a reduced cost (visit bundle).

You’ll also need a text editor (such as VS Code or Brackets), a local web server and a web browser. The book contains two appendices that help you get these set up.

To keep things simple build tools such as webpack aren't used. If you'd like to cover ES2015 modules, webpack and other advanced topics have a look at the Advanced Edition package. D3 version 7 is used in this book.

Advanced Edition

The Advanced edition contains additional material including:

  • how to transform the raw data from the World Bank into the required format
  • how to make Energy Explorer responsive to different device sizes
  • how to add dark mode to Energy Explorer
  • ES2015 modules and webpack
  • how to make Energy Explorer using ES2015 modules and webpack

The Advanced edition is for experienced developers and requires familiarity with Node.js and the command line.

About the Author

Peter Cook
Peter Cook

Peter Cook has built data visualisations for Carbon Tracker, London Datastore and McGraw Hill Education. He currently works as a senior visualisation developer at Flourish and also writes about the how-to of data visualisation for Create With Data.

He's run training courses for clients such as the BBC and The Economist and written data visualisation tutorials for Flowing Data and Creative Bloq. He created D3 in Depth and Create With Data.

He's the author of two books: Fundamentals of HTML, CSS, SVG & JavaScript for Data Visualisation and D3 Start to Finish.

Peter Cook

Episode 230

Packages

The Book
  • PDF

  • EPUB

  • WEB

  • English

$35.00
Minimum price
$50.00
Suggested price
Advanced Edition

The Advanced edition includes an additional 80 page PDF with chapters covering data transformation, responsiveness, dark mode, ES2015 modules and webpack. The chapters are: how tidy.js was used to transform World Bank data into a format suitable for Energy Explorer, how Energy Explorer can be made responsive to device width so that it works well on mobile, how to add a 'dark mode' switch to Energy Explorer, introduction to ES2015 modules and webpack, how to build Energy Explorer using ES2015 modules and webpack. Source code for all the above (data transformation script, responsive version of Energy Explorer, dark mode version of Energy Explorer and a webpack/ES2015 module build of Energy Explorer) is included in the code download.

Includes:

  • extras
    D3 Start to Finish Advanced Edition

    An additional 80 page PDF with chapters covering data transformation, responsiveness, dark mode, ES2015 modules and webpack. Includes source code for: data transformation, responsive version of Energy Explorer, dark mode version of Energy Explorer and webpack version of Energy Explorer using ES2015 modules.

  • PDF

  • EPUB

  • WEB

  • English

$55.00
Minimum price
$70.00
Suggested price
Discount Team Pack (5 copies)

A discount pack of 5 copies of D3 Start to Finish for your team.

  • PDF

  • EPUB

  • WEB

  • English

$120.00
Minimum price
$175.00
Suggested price
Discount Team Pack (5 copies of Advanced Edition)

A discount pack of 5 copies of D3 Start to Finish (Advanced Edition) for your team.

Includes:

  • extras
    D3 Start to Finish Advanced Edition

    An additional 80 page PDF with chapters covering data transformation, responsiveness, dark mode, ES2015 modules and webpack. Includes source code for: data transformation, responsive version of Energy Explorer, dark mode version of Energy Explorer and webpack version of Energy Explorer using ES2015 modules.

  • PDF

  • EPUB

  • WEB

  • English

$200.00
Minimum price
$250.00
Suggested price

Bundles that include this book

$75.00
Bought separately
$45.00
Bundle Price

Table of Contents

  • 1 Introduction
    • 1.1 Prerequisites
    • 1.2 What you’ll learn
    • 1.3 What you’ll build
    • 1.4 Code download
    • 1.5 Where to get help
    • 1.6 Stay in touch
    • 1.7 Translators
  • 2 Energy Explorer
    • 2.1 Technical overview
    • 2.2 Overview of the Energy Explorer build
  • 3 Practical: Setting Up
    • 3.1 What you need
    • 3.2 Get set up
    • 3.3 Summary
  • 4 Introduction to D3
    • 4.1 Joining data with D3
    • 4.2 D3 modules
    • 4.3 D3 versions
  • 5 Requesting Data with D3
    • 5.1 d3.csv
    • 5.2 d3.tsv
    • 5.3 d3.dsv
    • 5.4 d3.json
    • 5.5 CSV, TSV or JSON?
    • 5.6 Static resources and APIs
  • 6 Practical: Load the Data
    • 6.1 Overview
    • 6.2 Inspect the data
    • 6.3 Include JavaScript files in index.html
    • 6.4 Request data
    • 6.5 Summary
  • 7 D3 Selections
    • 7.1 Creating a selection
    • 7.2 Updating a selection’s elements
    • 7.3 Multiple updates
    • 7.4 Chained selections
  • 8 Data Joins
    • 8.1 Creating a data join
    • 8.2 Updating the joined elements
    • 8.3 Joining arrays of objects
  • 9 Practical: Draw the Data
    • 9.1 Overview
    • 9.2 Add a container for the circles
    • 9.3 Join the data array to circle elements
    • 9.4 Save and refresh
  • 10 Scale Functions
    • 10.1 scaleLinear
    • 10.2 scaleSqrt
    • 10.3 Putting scale functions to use
  • 11 Practical: Size the Circles
    • 11.1 Overview
    • 11.2 Convert indicator values from strings into numbers
    • 11.3 Create a sqrtScale function and set the circle radii
  • 12 Architecture for Web-based Data Visualisation
    • 12.1 Layout functions
    • 12.2 Modules
  • 13 Practical: Add Modules
    • 13.1 Overview
    • 13.2 Add new modules
    • 13.3 Add a layout function
    • 13.4 Move update code
    • 13.5 Use layout function
    • 13.6 Save and refresh
  • 14 Arranging Items in a Grid
  • 15 Practical: Arrange the Data
    • 15.1 Overview
    • 15.2 Add configuration object
    • 15.3 Modify layout function
    • 15.4 Save and refresh
    • 15.5 Summary
  • 16 The Build So Far
  • 17 More on D3 Selections
    • 17.1 More selection methods
    • 17.2 Update functions
    • 17.3 Summary
  • 18 More on D3 Joins
    • 18.1 Joining an array to groups of elements
    • 18.2 Nested joins
  • 19 Practical: Add Labels
    • 19.1 Overview
    • 19.2 Add label information to layout.js
    • 19.3 Modify update function to join data to <g> elements
    • 19.4 Center the labels using CSS
    • 19.5 Summary
  • 20 Practical: Add More Circles
    • 20.1 Overview
    • 20.2 Add properties for each energy type in the layout function
    • 20.3 Add four circles in the update function
    • 20.4 Style the circles
    • 20.5 Save and refresh
    • 20.6 Summary
  • 21 Practical: Style the Circles
    • 21.1 Overview
    • 21.2 Design a colour scheme
    • 21.3 Style the circles
    • 21.4 Center the visualisation
    • 21.5 Change the background colour
    • 21.6 Save and refresh
    • 21.7 Summary
  • 22 D3 Event Handling
    • 22.1 Event types
    • 22.2 index and this
  • 23 Flourish Popup Library
    • 23.1 Installing the popup
    • 23.2 Initialising the popup
    • 23.3 Popup methods
    • 23.4 Popup styling
    • 23.5 Example
  • 24 Practical: Add a Popup
    • 24.1 Overview
    • 24.2 Link to the popup library
    • 24.3 Add new module for popup
    • 24.4 Add event handlers
    • 24.5 Populate popup with energy data
    • 24.6 Offset the popup
    • 24.7 Summary
  • 25 State Management
    • 25.1 State management example
    • 25.2 Summary
  • 26 Practical: Add State Management
    • 26.1 Overview
    • 26.2 Add a new module
    • 26.3 Add an empty state object and action function
  • 27 Practical: Add a Menu
    • 27.1 Overview
    • 27.2 Add a container for the menu
    • 27.3 Add selectedIndicator state property
    • 27.4 Add a new module for the menu
    • 27.5 Add code to construct and manage the menu
    • 27.6 Basic styling of the menu
    • 27.7 Call updateMenu from update function
    • 27.8 Summary
  • 28 Data Manipulation
    • 28.1 Installing Lodash
    • 28.2 Lodash syntax
    • 28.3 _.uniq
    • 28.4 _.includes
    • 28.5 _.without
    • 28.6 _.filter
    • 28.7 _.sortBy
    • 28.8 _.orderBy
    • 28.9 Summary
  • 29 Practical: Sort the Countries
    • 29.1 Overview
    • 29.2 Link to Lodash
    • 29.3 Sort the data
    • 29.4 Hide countries with a zero or missing value
    • 29.5 Summary
  • 30 D3 Transitions
    • 30.1 Creating D3 transitions
    • 30.2 Transition duration
    • 30.3 Transition delay
    • 30.4 Key functions
    • 30.5 Summary
  • 31 Practical: Add Transitions
    • 31.1 Overview
    • 31.2 Add a key function to the data join
    • 31.3 Add transition to the country groups
    • 31.4 Add transition duration and delay
    • 31.5 Initialise the country group positions
    • 31.6 Add a transition to the circle radii
    • 31.7 Summary
  • 32 Practical: Add a Legend
    • 32.1 Overview
    • 32.2 Add the legend to index.html
    • 32.3 Add a function to update the radius of the legend circle
    • 32.4 Style the legend
    • 32.5 Summary
  • 33 Practical: Finishing Touches
    • 33.1 Overview
    • 33.2 Add and apply Open Sans font
    • 33.3 Style the menu
    • 33.4 Add header and footer
    • 33.5 Other CSS tweaks
    • 33.6 Summary
  • 34 Wrapping Up
    • 34.1 Where next?
    • 34.2 Wrapping up
  • Appendix A: Tools and Set-up
    • Web development tools
  • Appendix B: Example Set-Up
    • Create a project directory
    • Install a code editor
    • Create a minimal HTML file
    • Install Live Server extension
    • Start Server
    • Add CSS and JavaScript files
    • Summary

The Leanpub 60-day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

See full terms

Do Well. Do Good.

Authors have earned$12,147,777writing, publishing and selling on Leanpub, earning 80% royalties while saving up to 25 million pounds of CO2 and up to 46,000 trees.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub