- 1. Introduction
- 1.1. Prerequisites
- 1.2. What you’ll learn
- 1.3. Energy Explorer
- 1.4. Code download
- 1.5. Deployment
- 1.6. Bonus material
- 1.7. Where to get help
- 1.8. Stay in touch
- 1.9. Translators
- 1.10. Acknowledgements
- 2. Energy Explorer
- 2.1. Technical overview
- 2.2. File structure
- 2.3. Build tool
- 2.4. The build steps
- 3. Getting started
- 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. csv
- 5.2. tsv
- 5.3. dsv
- 5.4. json
- 5.5. CSV, TSV or JSON?
- 5.6. Static resources and APIs
- 6. Build: Load the Data
- 6.1. Overview
- 6.2. Inspect the data
- 6.3. Install d3-fetch
- 6.4. Load the 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
- 8.4. Summary
- 9. Build: Draw the Data
- 9.1. Overview
- 9.2. Add a container for the circles
- 9.3. Join the data array to circle elements
- 10. Scale Functions
- 10.1. scaleLinear
- 10.2. scaleSqrt
- 10.3. Putting scale functions to use
- 11. Build: Size the Circles
- 11.1. Overview
- 11.2. The changes
- 12. Architecture for Web-based Data Visualisation
- 12.1. Layout functions
- 12.2. Modules
- 13. Build: Add Modules and layout function
- 13.1. Overview
- 13.2. The changes
- 14. Arranging Items in a Grid
- 15. Build: Arrange the Data
- 15.1. Overview
- 15.2. The changes
- 16. The Build So Far
- 16.1. main.js
- 16.2. data.js
- 16.3. update.js
- 16.4. layout.js
- 17. More on D3 Selections
- 17.1. Additional 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. Build: Add Labels
- 19.1. Overview
- 19.2. The changes
- 19.3. layout.js
- 19.4. update.js
- 19.5. src/css/main.css
- 20. Build: Add More Circles
- 20.1. Overview
- 20.2. The changes
- 20.3. layout.js
- 20.4. update.js
- 20.5. src/css/main.css
- 21. Build: Style the Circles
- 21.1. Overview
- 21.2. The changes
- 21.3. Design a colour scheme
- 21.4. Modularise the CSS
- 21.5. Style the circles
- 21.6. Center the visualisation
- 21.7. Change the background colour
- 21.8. Summary
- 22. D3 Event Handling
- 22.1. Event types
- 22.2. 'this' keyword in the event handler
- 23. Tippy.js Tooltip Library
- 23.1. Installing Tippy.js
- 23.2. Adding a tooltip
- 23.3. Example
- 24. Build: Add a tooltip
- 24.1. Overview
- 24.2. The changes
- 24.3. Install Tippy.js
- 24.4. tooltip.js
- 24.5. update.js
- 24.6. chart.css
- 24.7. Summary
- 25. State Management
- 25.1. State management example
- 25.2. Summary
- 26. Build: Add a Menu
- 26.1. Overview
- 26.2. The changes
- 26.3. Add state management
- 26.4. Add a container for the menu
- 26.5. Add a module to manage the menu
- 26.6. Styling
- 27. Data Manipulation
- 27.1. Using Lodash
- 27.2. Experimenting with Lodash
- 27.3. Lodash syntax
- 27.4. uniq
- 27.5. includes
- 27.6. without
- 27.7. filter
- 27.8. sortBy
- 27.9. orderBy
- 27.10. Summary
- 28. Build: Sort the Countries
- 28.1. Overview
- 28.2. The changes
- 28.3. Install Lodash
- 28.4. Sort the data
- 28.5. Hide countries with a zero or missing value
- 28.6. Summary
- 29. D3 Transitions
- 29.1. Installation
- 29.2. Creating D3 transitions
- 29.3. Transition duration
- 29.4. Transition delay
- 29.5. Key functions
- 29.6. Summary
- 30. Build: Add Transitions
- 30.1. Overview
- 30.2. The changes
- 30.3. Add a key function to the data join
- 30.4. Add transition to the country groups
- 30.5. Initialise the country group positions
- 30.6. Add a transition to the circle radii
- 30.7. Summary
- 31. Build: Add a Legend
- 31.1. Overview
- 31.2. The changes
- 31.3. Add the legend
- 31.4. Add a function to update the radius of the legend circle
- 31.5. Style the legend
- 31.6. Summary
- 32. Build: Finishing Touches
- 32.1. Overview
- 32.2. The changes
- 32.3. Use Google’s Open Sans font
- 32.4. Style the menu
- 32.5. Style the tooltip
- 32.6. Add a header and footer
- 32.7. Other CSS tweaks
- 32.8. Summary
- 33. Wrapping Up
- 33.1. Where next?
- 33.2. Wrapping up
- Appendix A: Tools and Set-up
- A.1. Code editor
- A.2. Web browser
- A.3. Command line interface
- A.4. Node.js
- Appendix B: Deploying Energy Explorer
- Appendix C: ES2015 Modules
- Appendix D: Data transformation
- D.1. Background knowledge
- D.2. Get the code
- D.3. Node project
- D.4. The data
- D.5. The output
- D.6. Transforming the data
- D.7. Summary
- Appendix E: Responsiveness
- E.1. The project
- E.2. The changes
- E.3. css/global.css
- E.4. config.js
- E.5. store.js
- E.6. layout.js
- E.7. update.js
- E.8. resize.js
- E.9. data.js
- E.10. main.js
- E.11. css/header.css
- E.12. css/controls.css
- E.13. css/menu.css
- E.14. css/footer.css
- E.15. Summary
- Appendix F: Dark Mode
- F.1. The project
- F.2. The changes
- F.3. index.html
- F.4. store.js
- F.5. update.js
- F.6. Overview of dark mode styling
- F.7. header.css
- F.8. global.css
- F.9. legend.css
- F.10. menu.css
- F.11. chart.css
- F.12. tooltip.js
- F.13. Summary
D3 Start to Finish (2nd Edition)
Learn how to make a custom data visualisation using D3.js.
This book is 100% completeLast updated on 2025-02-21
D3 Start to Finish shows you how to build a custom, interactive and beautiful data visualisation using the JavaScript library D3.js (versions 6 & 7).
The book covers D3.js concepts such as selections, joins, requests, scale functions, events & transitions. You'll put these concepts into practice by building a custom, interactive data visualisation.
Minimum price
$35.00
$40.00
You pay
Author earns
Buying multiple copies for your team? See below for a discount!
PDF
EPUB
346
Readers
313
Pages
About
About the Book
D3 Start to Finish (2nd edition) 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 these concepts are put into practice by seeing how an interactive data visualisation called Energy Explorer is built. 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.
The 2nd edition supports ES modules. It's generally revised and updated from the original edition. It also includes appendices on data transformation and adding responsivity and dark mode to Energy Explorer.
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 tooltip using the Tippy.js library
- state management
- animations using D3 transitions
- data manipulation using Lodash
- adding a menu, legend and footer
- ES modules
- how to transform the raw data from the World Bank into the required format
- how to make Energy Explorer responsive to different device widths
- how to add a dark mode to Energy Explorer
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 also need a text editor (such as VS Code), a web browser and Node.js installed on your computer. The book contains appendices that help you get these set up.
Team Discounts
Team Discounts
Get a team discount on this book!
Up to 3 members
- Minimum price
- $87.00
- Suggested price
- $100
Up to 5 members
- Minimum price
- $140
- Suggested price
- $160
Up to 10 members
- Minimum price
- $245
- Suggested price
- $280
Up to 15 members
- Minimum price
- $350
- Suggested price
- $400
Up to 25 members
- Minimum price
- $525
- Suggested price
- $600
Bundle
Bundles that include this book
Learn D3.js Bundle
2 Books
- Pricing
$45.00
Minimum priceBought separately$65.00Suggested price$45.00
Author
About the Author
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 four books: Visualising Data with JavaScript, Data Dashboards with JavaScript, D3 Start to Finish and Fundamentals of HTML, CSS, SVG & JavaScript for Data Visualisation.
The Leanpub Podcast
Podcast
Podcast Episode
Contents
Table of Contents
Get the free sample chapters
Click the buttons to get the free sample in PDF or EPUB, or read the sample online here
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...
Earn $8 on a $10 Purchase, and $16 on a $20 Purchase
We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that 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
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.