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

Description

Reviews "One of the best D3 books I've read. The contents are very clear, it is easy to follow and the concepts are very solid." - Javier García Fernández (Journalist & developer) "Teaching D3 is hard and it's been very useful to have a resource like Peter's D3 in Depth website to send students to. With this book Peter delivers something rather more substantial - a non-trivial D3 visualisation built from the ground up. You get the hard earned pro-tips and perspectives delivered in a realistic context - pretty much the gold standard for learning." - Kyran Dale (author of Data Visualization with Python and JavaScript (O'Reilly)) "I’d very much recommend this book to anyone who needs to rapidly get up to speed with D3, whether they are an experienced developer or a relative novice. It will give you all the tools and knowledge to create professional grade visualisations." - Mike Hadlow (Developer & blogger) "Being able to master the programmatic building of data visualisations is a treasured capability. Being able to elegantly explain and educate others to help develop their capability is of exceptional value. Peter is a one of those rare talents who flourishes at both: if you want to learn from one of the best, I can’t recommend Peter’s books enough." - Andy Kirk (Visualisation consultant, author, speaker & trainer) Description 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 D3D3 data joins (including joining nested data)architecting a data visualisation using a layout functiondetailed styling using CSSadding a popup using Flourish's popup librarystate managementanimations using D3 transitionsdata manipulation using Lodashadding 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. Table of Contents Introduction Prerequisites What you’ll learn What you’ll build Code download Where to get help Stay in touch Translators Energy Explorer Technical overview Overview of the Energy Explorer build Practical: Setting Up What you need Get set up Summary Introduction to D3 Joining data with D3 D3 modules D3 versions Requesting Data with D3 d3.csv d3.tsv d3.dsv d3.json CSV, TSV or JSON? Static resources and APIs Practical: Load the Data Overview Inspect the data Include JavaScript files in index.html Request data Summary D3 Selections Creating a selection Updating a selection’s elements Multiple updates Chained selections Data Joins Creating a data join Updating the joined elements Joining arrays of objects Practical: Draw the Data Overview Add a container for the circles Join the data array to circle elements Save and refresh Scale Functions scaleLinear scaleSqrt Putting scale functions to use Practical: Size the Circles Overview Convert indicator values from strings into numbers Create a sqrtScale function and set the circle radii Architecture for Web-based Data Visualisation Layout functions Modules Practical: Add Modules Overview Add new modules Add a layout function Move update code Use layout function Save and refresh Arranging Items in a Grid Practical: Arrange the Data Overview Add configuration object Modify layout function Save and refresh Summary The Build So Far More on D3 Selections More selection methods Update functions Summary More on D3 Joins Joining an array to groups of elements Nested joins Practical: Add Labels Overview Add label information to layout.js Modify update function to join data to elements Center the labels using CSS Summary Practical: Add More Circles Overview Add properties for each energy type in the layout function Add four circles in the update function Style the circles Save and refresh Summary Practical: Style the Circles Overview Design a colour scheme Style the circles Center the visualisation Change the background colour Save and refresh Summary D3 Event Handling Event types index and this Flourish Popup Library Installing the popup Initialising the popup Popup methods Popup styling Example Practical: Add a Popup Overview Link to the popup library Add new module for popup Add event handlers Populate popup with energy data Offset the popup Summary State Management State management example Summary Practical: Add State Management Overview Add a new module Add an empty state object and action function Practical: Add a Menu Overview Add a container for the menu Add selectedIndicator state property Add a new module for the menu Add code to construct and manage the menu Basic styling of the menu Call updateMenu from update function Summary Data Manipulation Installing Lodash Lodash syntax _.uniq _.includes _.without _.filter _.sortBy _.orderBy Summary Practical: Sort the Countries Overview Link to Lodash Sort the data Hide countries with a zero or missing value Summary D3 Transitions Creating D3 transitions Transition duration Transition delay Key functions Summary Practical: Add Transitions Overview Add a key function to the data join Add transition to the country groups Add transition duration and delay Initialise the country group positions Add a transition to the circle radii Summary Practical: Add a Legend Overview Add the legend to index.html Add a function to update the radius of the legend circle Style the legend Summary Practical: Finishing Touches Overview Add and apply Open Sans font Style the menu Add header and footer Other CSS tweaks Summary Wrapping Up Where next? 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