D3 Start to Finish (2nd Edition)

1Introduction

1. 1.1Prerequisites
2. 1.2What you’ll learn
3. 1.3What you’ll build
4. 1.4Code download
5. 1.5Where to get help
6. 1.6Stay in touch
7. 1.7Translators
8. 1.8Acknowledgements

2Energy Explorer

1. 2.1Technical overview
2. 2.2Overview of the Energy Explorer build

3Practical: Setting Up

1. 3.1What you need
2. 3.2Get set up
3. 3.3Summary

4Introduction to D3

1. 4.1Joining data with D3
2. 4.2D3 modules
3. 4.3D3 versions

5Requesting Data with D3

1. 5.1d3.csv
2. 5.2d3.tsv
3. 5.3d3.dsv
4. 5.4d3.json
5. 5.5CSV, TSV or JSON?
6. 5.6Static resources and APIs

6Practical: Load the Data

1. 6.1Overview
2. 6.2Inspect the data
3. 6.3Include JavaScript files in index.html
4. 6.4Request data
5. 6.5Summary

7D3 Selections

1. 7.1Creating a selection
2. 7.2Updating a selection’s elements
3. 7.3Multiple updates
4. 7.4Chained selections

8Data Joins

1. 8.1Creating a data join
2. 8.2Updating the joined elements
3. 8.3Joining arrays of objects

9Practical: Draw the Data

1. 9.1Overview
2. 9.2Add a container for the circles
3. 9.3Join the data array to circle elements
4. 9.4Save and refresh

10Scale Functions

1. 10.1scaleLinear
2. 10.2scaleSqrt
3. 10.3Putting scale functions to use

11Practical: Size the Circles

1. 11.1Overview
2. 11.2Convert indicator values from strings into numbers
3. 11.3Create a sqrtScale function and set the circle radii

12Architecture for Web-based Data Visualisation

1. 12.1Layout functions
2. 12.2Modules

13Practical: Add Modules

1. 13.1Overview
2. 13.2Add new modules
3. 13.3Add a layout function
4. 13.4Move update code
5. 13.5Use layout function
6. 13.6Save and refresh

14Arranging Items in a Grid

15Practical: Arrange the Data

1. 15.1Overview
2. 15.2Add configuration object
3. 15.3Modify layout function
4. 15.4Save and refresh
5. 15.5Summary

16The Build So Far

17More on D3 Selections

1. 17.1More selection methods
2. 17.2Update functions
3. 17.3Summary

18More on D3 Joins

1. 18.1Joining an array to groups of elements
2. 18.2Nested joins

19Practical: Add Labels

1. 19.1Overview
2. 19.2Add label information to layout.js
3. 19.3Modify update function to join data to <g> elements
4. 19.4Center the labels using CSS
5. 19.5Summary

20Practical: Add More Circles

1. 20.1Overview
2. 20.2Add properties for each energy type in the layout function
3. 20.3Add four circles in the update function
4. 20.4Style the circles
5. 20.5Save and refresh
6. 20.6Summary

21Practical: Style the Circles

1. 21.1Overview
2. 21.2Design a colour scheme
3. 21.3Style the circles
4. 21.4Center the visualisation
5. 21.5Change the background colour
6. 21.6Save and refresh
7. 21.7Summary

22D3 Event Handling

1. 22.1Event types
2. 22.2the ‘this’ keyword in the event handler

23Flourish Popup Library

1. 23.1Installing the popup
2. 23.2Initialising the popup
3. 23.3Popup methods
4. 23.4Popup styling
5. 23.5Example

24Practical: Add a Popup

1. 24.1Overview
2. 24.2Link to the popup library
3. 24.3Add new module for popup
4. 24.4Add event handlers
5. 24.5Populate popup with energy data
6. 24.6Offset the popup
7. 24.7Summary

25State Management

1. 25.1State management example
2. 25.2Summary

26Practical: Add State Management

1. 26.1Overview
2. 26.2Add a new module
3. 26.3Add an empty state object and action function

27Practical: Add a Menu

1. 27.1Overview
2. 27.2Add a container for the menu
3. 27.3Add selectedIndicator state property
4. 27.4Add a new module for the menu
5. 27.5Add code to construct and manage the menu
6. 27.6Basic styling of the menu
7. 27.7Call updateMenu from update function
8. 27.8Summary

28Data Manipulation

1. 28.1Installing Lodash
2. 28.2Lodash syntax
3. 28.3_.uniq
4. 28.4_.includes
5. 28.5_.without
6. 28.6_.filter
7. 28.7_.sortBy
8. 28.8_.orderBy
9. 28.9Summary

29Practical: Sort the Countries

1. 29.1Overview
2. 29.2Link to Lodash
3. 29.3Sort the data
4. 29.4Hide countries with a zero or missing value
5. 29.5Summary

30D3 Transitions

1. 30.1Creating D3 transitions
2. 30.2Transition duration
3. 30.3Transition delay
4. 30.4Key functions
5. 30.5Summary

31Practical: Add Transitions

1. 31.1Overview
2. 31.2Add a key function to the data join
3. 31.3Add transition to the country groups
4. 31.4Add transition duration and delay
5. 31.5Initialise the country group positions
6. 31.6Add a transition to the circle radii
7. 31.7Summary

32Practical: Add a Legend

1. 32.1Overview
2. 32.2Add the legend to index.html
3. 32.3Add a function to update the radius of the legend circle
4. 32.4Style the legend
5. 32.5Summary

33Practical: Finishing Touches

1. 33.1Overview
2. 33.2Add and apply Open Sans font
3. 33.3Style the menu
4. 33.4Add header and footer
5. 33.5Other CSS tweaks
6. 33.6Summary

34Wrapping Up

1. 34.1Where next?
2. 34.2Wrapping up

Appendix A: Tools and Set-up

1. Web development tools

Appendix B: Example Set-Up

1. Create a project directory
2. Install a code editor
3. Create a minimal HTML file
4. Install Live Server extension
5. Start Server
6. Add CSS and JavaScript files
7. Summary