Learn D3.js Bundle

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.

This book covers the fundamentals of HTML, SVG, CSS and JavaScript for visualising data.

If you're wanting to learn D3.js (or other JavaScript visualisation libraries) and need to get up to speed with HTML, SVG, CSS and JavaScript, this book is ideal. It goes through the basics of these languages, and gives a good foundation for learning libraries such as D3.js.

It's also useful if you're coming from a language such as Python or R and use tools such as Dash and Shiny. If you're wanting to customise your web applications and CSS and JavaScript are a stumbling block then this book should help.

This book doesn’t assume prior knowledge of HTML, SVG, CSS and JavaScript but it’ll be helpful if you’ve some coding experience. Being familiar with a text editor (or IDE) will also be helpful.

It’s by no means a comprehensive tutorial on HTML, SVG, CSS and JavaScript. You’d need a much bigger book for that. Think of this book as presenting the minimum of what you ought to know if you’re wanting to work with web based data visualisations.

The book covers topics such as:

• HTML elements such as headings, lists, images and dropdown menus
• SVG elements such as lines, rectangles, circles, groups and paths
• SVG transforms (including how to combine them)
• CSS rules
• CSS properties for HTML and SVG
• CSS id and class attributes
• CSS layout (including Flexbox)
• CSS media queries
• JavaScript variables and data types
• JavaScript arrays and objects
• JavaScript functions
• JavaScript iteration
• JavaScript promises
• JavaScript in the browser (Document Object Model or DOM)
• JavaScript data requests
• Node.js
• ES Modules
• Creating a web application using Vite

This book is an ideal foundation for D3 Start to Finish.