Table of Contents for

D3.js in Action, Second Edition: Data visualization with JavaScript

List of Listings

Chapter 1. An introduction to D3.js

Listing 1.1. A simple web page demonstrating the DOM

Listing 1.2. A sample web page with SVG elements

Listing 1.3. Grouping SVG elements

Listing 1.4. SVG path fill and closing

Listing 1.5. A sample web page with a style sheet

Listing 1.6. A simple webpage

Listing 1.7. Using d3.select to set style and HTML content

Listing 1.8. Using d3.select to set attributes and event listeners

Listing 1.9. A simple web page with an SVG canvas

Listing 1.10. Creating lines and circles with select and append

Listing 1.11. SVG elements with IDs and transparency

Chapter 2. Information visualization data flow

Listing 2.1. File contents of cities.csv

Listing 2.2. File contents of tweets.json

Listing 2.3. Loading data, casting it, measuring it, and displaying it as a bar chart

Listing 2.4. Loading, nesting, measuring, and representing data

Listing 2.5. Creating a scatterplot

Listing 2.6. Creating labels on <g> elements

Listing 2.7. Setting the key value in data-binding

Chapter 3. Data-driven design and interaction

Listing 3.1. d3ia.css

Listing 3.2. d3ia_2.html

Listing 3.3. soccerviz.js

Listing 3.4. infobox.html

Listing 3.5. Update to d3ia.css

Chapter 4. Chart components

Listing 4.1. boxplots.csv

Listing 4.2. Scatterplot of average age

Listing 4.3. Initial boxplot drawing code

Listing 4.4. The .each() function of the boxplot drawing five child elements

Listing 4.5. Adding an axis using tickValues

Listing 4.6. tweetdata.csv

Listing 4.7. Callback function to draw a scatterplot from tweetdata

Listing 4.8. New line generator code inside the callback function

Listing 4.9. Line generators for each tweetdata

Listing 4.10. movies.csv

Listing 4.11. The callback function to draw movies.csv as a line chart

Listing 4.12. Area accessors

Listing 4.13. Callback function for drawing stacked areas

Listing 4.14. Adding a color legen

Listing 4.15. Adjusted legend settings

Chapter 5. Layouts

Listing 5.1. Histogram code

Listing 5.2. Histogram interactivity

Listing 5.3. Generating violin plots with d3.histogram

Listing 5.4. Updated binding and transitioning for pie layout

Listing 5.5. Stack layout example

Listing 5.6. sitestats.json

Listing 5.7. Sankey drawing code

Listing 5.8. Visual layout function for the Sankey diagram

Listing 5.9. worddata.csv

Listing 5.10. Creating a word cloud with d3.cloud

Listing 5.11. Word cloud layout with key word highlighting

Chapter 6. Hierarchical visualization

Listing 6.1. Some common hierarchical data in tabular format

Listing 6.2. Circle packing of nested tweets data

Listing 6.3. Callback function to draw a dendrogram

Listing 6.4. Drawing a simple partition layout

Listing 6.5. Using the partition layout to create a sunburst

Listing 6.6. Drawing a treemap

Listing 6.7. Filter zoom example

Chapter 7. Network visualization

Listing 7.1. edgelist.csv

Listing 7.2. nodelist.csv

Listing 7.3. networks.css

Listing 7.4. The adjacency matrix function

Listing 7.5. Arc diagram code

Listing 7.6. Arc diagram interactivity

Listing 7.7. An initial force simulation with no links or collision detection

Listing 7.8. Code modifications for a beeswarm plot

Listing 7.9. Force layout function

Listing 7.10. Marker definition and application

Listing 7.11. Setting up drag for networks

Listing 7.12. Filtering a network

Listing 7.13. A function for adding edges

Listing 7.14. Function for adding nodes and edges

Listing 7.15. Moving our nodes manually

Chapter 8. Geospatial information visualization

Listing 8.1. ch8.css

Listing 8.2. cities.csv

Listing 8.3. GeoJSON example of Luxembourg

Listing 8.4. Initial mapping function

Listing 8.5. Simple map with scale and translate settings

Listing 8.6. Loading point and polygon geodata

Listing 8.7. Mollweide projected world

Listing 8.8. Rendering bounding boxes with geodata

Listing 8.9. Adding a graticule

Listing 8.10. Zoom and pan with maps

Listing 8.11. Manual zoom controls for maps

Listing 8.12. Creating a simple globe

Listing 8.13. A draggable globe in D3

Listing 8.14. Satellite projection settings

Listing 8.15. Loading TopoJSON

Listing 8.16. Rendering and merging TopoJSON

Listing 8.17. Calculating neighbors and interactive highlighting

Chapter 9. Interactive applications with React and D3

Listing 9.1. Dashboard CSS

Listing 9.2. BarChart.js

Listing 9.3. Referencing BarChart.js in App.js

Listing 9.4. WorldMap.js and associated world.js

Listing 9.5. world.js

Listing 9.6. Updated App.js with sample data

Listing 9.7. Updated WorldMap.js getting data and color scale from parent

Listing 9.8. App.js updates for adding the bar chart

Listing 9.9. Updated BarChart.js

Listing 9.10. A React streamgraph

Listing 9.11. App.js state and resize listener

Listing 9.12. Adding a legend

Listing 9.13. App.js updates

Listing 9.14. BarChart.js updates

Listing 9.15. WorldMap.js Updates

Listing 9.16. StreamGraph.js Updates

Listing 9.17. App.js updates for a brush

Listing 9.18. Brush.js component

Listing 9.19. The brushed function in Brush.js

Listing 9.20. App.js changes to listen for a brush

Listing 9.21. Pure Render StatLine.js

Chapter 10. Writing layouts and components

Listing 10.1. d3.gridLayout.js

Listing 10.2. Updated processGrid function

Listing 10.3. Using our grid layout

Listing 10.4. Update the grid with more elements

Listing 10.5. d3.gridLayout with size functionality

Listing 10.6. Calling the new grid layout

Listing 10.7. The resizeGrid1() func

Listing 10.8. Layout code for calculating height and width of grid cells

Listing 10.9. Appending rectangles with our layout

Listing 10.10. Loading the countries of the world into a grid

Listing 10.11. Changing the color of our grid

Listing 10.12. A simple component

Listing 10.13. Updated legend function

Listing 10.14. Legend interactivity

Listing 10.15. Text labels for legend

Listing 10.16. Title and unit attributes of a legend

Listing 10.17. Updated legend drawing code

Listing 10.18. Calling the legend with title and unit setting

Chapter 11. Mixed mode rendering

Listing 11.1. bigdata.html

Listing 11.2. bigdata.css

Listing 11.3. Drawing violin plots on canvas

Listing 11.4. Creating sample data

Listing 11.5. Drawing a map with our sample data on it

Listing 11.6. Adding zoom controls to a map

Listing 11.7. Drawing the map with canvas

Listing 11.8. Rendering SVG and canvas simultaneously

Listing 11.9. Mixed rendering based on zoom interaction

Listing 11.10. Zoom functions for mixed rendering

Listing 11.11. Generating random network data

Listing 11.12. Force-directed layout

Listing 11.13. Mixed rendering network drawing

Listing 11.14. xy data generator

Listing 11.15. xy brushing

Listing 11.16. Creating a quadtree from xy data

Listing 11.17. Quadtree-optimized xy brush selection