D3 Start to Finish
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
Packages
The Book
PDF
EPUB
WEB
English
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:
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
Discount Team Pack (5 copies)
A discount pack of 5 copies of D3 Start to Finish for your team.
PDF
EPUB
WEB
English
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:
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
Bundles that include this book
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
- 1.8 Acknowledgements
-
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 the ‘this’ keyword in the event handler
-
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.
Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.
You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!
So, there's no reason not to click the Add to Cart button, is there?
See full terms...
80% Royalties. Earn $16 on a $20 book.
We pay 80% royalties. That's not a typo: you earn $16 on a $20 sale. If we sell 5000 non-refunded copies of your book or course for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earnedover $13 millionwriting, publishing and selling on Leanpub.
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
