D3 Tips and Tricks v3.x

Acknowledgements

1. Mike
2. Partners, Supporters and Contributors.
3. Proof Reading
4. The d3.js Community
5. Cover art
6. Leanpub
7. Make sure you get the most up to date copy of D3 Tips and Tricks

What is d3.js?

Introduction

What do you need to get started?

1. DON’T FREAK OUT!
2. HTML
3. JavaScript
4. Cascading Style Sheets (CSS)
5. Full disclosure
6. Web Servers
7. PHP
8. Other Useful Stuff
9. Text Editor
10. Getting D3
11. Where to get information on d3.js
12. d3js.org
13. Google Groups
14. Stack Overflow
15. Github
16. bl.ocks.org
17. Twitter
18. Books

Starting with a basic graph

1. HTML
2. CSS
3. D3 JavaScript
4. Setting up the margins and the graph area.
5. Getting the Data
6. Request Functions
7. Formatting the Date / Time.
8. Does Time Matter?
9. Setting Scales Domains and Ranges
10. Scales, Ranges and the Ah Ha!” moment.
11. Setting up the Axes
12. Adding data to the line function
13. Adding the SVG Canvas.
14. Actually Drawing Something!
15. Wrap Up

Things you can do with the basic graph

1. Adding Axis Labels
2. Why does that line look odd?
3. How to add a title to your graph
4. Smoothing out graph lines
5. Adding grid lines to a graph
6. The grid line CSS
7. Define the grid line functions
8. Draw the lines
9. Make a dashed line
10. Filling an area under the graph
11. CSS for an area fill
12. Define the area function
13. Draw the area
14. Filling an area above the line
15. Adding a drop shadow to allow text to stand out on graphics.
16. Is this evil?
17. CSS for white shadowy background
18. Drawing the white shadowy background.
19. Adding more than one line to a graph
20. Labelling multiple lines on a graph
21. Multiple axes for a graph
22. How to rotate the text labels for the x Axis.
23. There might be a better way
24. Format a date / time axis with specified values
25. Update data dynamically - On Click
26. Adding a Button
27. Updating the data
28. Temporary measure only
29. Changes to the d3.js code layout
30. What’s happening in the code?
31. Repeatability
32. Selection Study.
33. Transition Training
34. Revert the data
35. Update data dynamically – Automatically

Elements, Attributes and Styles

1. The Framework
2. Elements
3. Circle
4. Ellipse
5. Rectangle
6. Line
7. Polyline
8. Polygon
9. Path
10. Clipped Path (AKA clipPath)
11. Text
12. Anchor at the bottom, middle of the text:
13. Anchor at the bottom, right of the text:
14. Anchor at the middle, left of the text:
15. Anchor in the middle, centre of the text:
16. Anchor in the middle, right of the text:
17. Anchor at the top, left of the text:
18. Anchor at the top, middle of the text:
19. Anchor at the top, right of the text:
20. Attributes
21. x, y
22. x1, x2, y1, y2
23. points
24. cx, cy
25. r
26. rx, ry
27. transform (translate(x,y), scale(k), rotate(a))
28. transform (translate(x,y))
29. transform (scale(k))
30. transform (rotate(a))
31. width, height
32. text-anchor
33. dx, dy
34. textLength
35. lengthAdjust
36. Styles
37. fill
38. stroke
39. opacity
40. fill-opacity
41. stroke-opacity
42. stroke-width
43. stroke-dasharray
44. stroke-linecap
45. stroke-linejoin
46. writing-mode
47. glyph-orientation-vertical
48. Using styles in Cascading Style Sheets

Assorted Tips and Tricks

1. Change a line chart into a scatter plot
2. Adding tooltips.
3. Transitions
4. Events
5. Get tipping
6. There is only one!
7. on.mouseover
8. on.mouseout
9. Including an HTML link in a tool tip
10. Moar Links!
11. What are the predefined, named colours?
12. Selecting / filtering a subset of objects
13. Select items with an IF statement.
14. Applying a colour gradient to a line based on value.
15. Applying a colour gradient to an area fill.
16. Show / hide an element by clicking on another element
17. The code
18. Export an image from a d3.js page as a SVG or bitmap
19. Bitmaps
20. Vector Graphics (Specifically SVG)
21. Let’s get exporting!
22. Copying the image off the web page
23. Open the SVG Image and Edit
24. Saving as a bitmap
25. Using HTML inputs with d3.js
26. What is an HTML input?
27. Using a range input with d3.js
28. The code
29. The explanation
30. Using more than one input
31. The code
32. The explanation
33. Rotate text with an input
34. The explanation
35. Use a number input with d3.js
36. Change more than one element with an input
37. The code
38. The explanation
39. Add an HTML table to your graph
40. HTML Tables
41. First the CSS
42. Now the d3.js code
43. A small but cunning change…
44. Explaining the d3.js code (reloaded).
45. Wrap up
46. More table madness: sorting, prettifying and adding columns
47. Add another column of information:
48. Sorting on a column
49. Prettifying (actually just capitalising the header for each column)
50. Add borders
51. Adding web links to d3.js objects
52. It’s all about the ‘a’ and the ‘xlink’
53. Adding in the links
54. Making the mouse pointer ignore an object
55. Understanding JavaScript Object Notation (JSON)
56. Using the Yahoo Query Language (YQL) to get data.
57. YQL by example
58. Using Plunker for development and hosting your D3 creations.

Bar Charts

1. The data
2. The code
3. The bar chart explained

Tree Diagrams

1. What is a Tree Diagram?
2. A simple Tree Diagram explained
3. Styling nodes in a tree diagram
4. Changing the nodes to different shapes
5. Using images as nodes
6. Making a vertical tree diagram
7. Generating a tree diagram from ‘flat’ data
8. Generating a tree diagram from external data
9. Generating a tree diagram from a CSV file.
10. An interactive tree diagram

Force Layout Diagrams

1. What is a Force Layout Diagram?
2. Force directed graph examples.
3. Basic force directed graph showing directionality
4. Directional Force Layout Diagram (Node Highlighting)
5. Directional Force Layout Diagram (varying link opacity)
6. Directional Force Layout Diagram (Unique Node Colour)

Bullet Charts

1. Introduction to bullet chart structure
2. D3.js code for bullet charts
3. Adapting and changing bullet chart components
4. Understand your data
5. Add as many individual charts as you want.
6. Add more ranges and measures
7. Updating a bullet chart automatically

Mapping with d3.js

1. Examples
2. GeoJSON and TopoJSON
3. Starting with a simple map
4. center
5. scale
6. rotate
7. Zooming and panning a map
8. Displaying points on a map
9. Making maps with d3.js and leaflet.js combined
10. leaflet.js Overview
11. Leaflet map with d3.js objects that scale with the map
12. Leaflet map with d3.js elements that are overlaid on a map

D3.js Examples Explained

1. Dynamically retrieve historical stock records via YQL
2. Purpose
3. The code
4. The description
5. Linux Processes via Interactive Tree diagram
6. Purpose
7. The Code
8. Description
9. Multi-line graph with automatic legend and toggling show / hide lines.
10. Purpose
11. The Code
12. Description
13. Nesting the data
14. Applying the colours
15. Adding the legend
16. Making it interactive
17. My Favourite tooltip method for a line graph.
18. Purpose
19. The Code
20. Description
21. Adding the circle to the graph
22. Set the area to capture the mouse movements
23. Determining which date will be highlighted
24. Move the circle to the appropriate position
25. Complex version
26. Code / Explanation
27. Exploring Event Data by Combination Scatter Plot and Interactive Line Graphs
28. Purpose
29. The Code
30. Wrangling the data
31. Sizing Everything Up
32. The Scatter Plot
33. Date and Time Graphs
34. Mouse Movement Information Display
35. Labelling
36. Difference Chart: Science vs Style.
37. Purpose
38. The Code
39. Description
40. Nesting the data
41. Wrangle the data
42. Cheating with the domain
43. data vs datum
44. Setting up the clipPaths
45. Clipping and adding the areas
46. Draw the lines and the axes
47. Adding a bit more to our difference chart.
48. Add a Y axis label
49. Add a title
50. Adding the legend
51. Link the areas
52. The final result

Crossfilter, dc.js and d3.js for Data Discovery

1. Introduction to Crossfilter
2. Map-reduce
3. What can crossfilter do?
4. Introduction to dc.js
5. Bar Chart
6. Pie Chart
7. Row Chart
8. Line Chart
9. Bubble Chart
10. Geo Choropleth Chart
11. Data Table
12. Bare bones structure for dc.js and crossfilter page
13. Add a Bar Chart.
14. Position the bar chart
15. Assign the bar chart type
16. Dimension and group the bar chart data
17. Configure the bar chart parameters
18. Just one more thing…
19. Just yet another thing…
20. Position the chart
21. Assign type
22. Dimension and Group
23. Configure chart parameters
24. Add a Line Chart.
25. Position the line chart
26. Assign the line chart type
27. Dimension and group the line chart data
28. Configure the line chart parameters
29. Adding tooltips to a line chart
30. Add a Row Chart.
31. Position the row chart
32. Assign the row chart type
33. Dimension and group the row chart data
34. Configure the row chart parameters
35. Add a Pie Chart.
36. Position the pie chart
37. Assign the pie chart type
38. Dimension and group the pie chart data
39. Configure the pie chart parameters
40. Resetting filters
41. Making the reset label a little bit better behaved.
42. Reset all the charts

Using Bootstrap with d3.js

1. What is Bootstrap?
2. Layout grid
3. Interface components
4. Incorporating Bootstrap into your html code.
5. Arranging more than one graph on a web page.
6. First make a page with two graphs
7. Arrange the graphs with the same anchor
8. Arrange the graphs with separate anchors
9. A couple of points to note:
10. How does Bootstrap’s grid layout work
11. Arrange more than one d3.js graph with Bootstrap
12. A more complicated Bootstrap layout example

Working with GitHub, Gist and bl.ocks.org

1. General stuff about bl.ocks.org
2. Installing the plug-in for bl.ocks.org for easy block viewing
3. Loading a thumbnail into Gist for bl.ocks.org d3 graphs
4. Setting the scene:
5. Enough of the scene setting. Let’s git going :-).
6. Wrap up.

Appendices

1. Simple Line Graph
2. Graph with Many Features
3. Graph with Area Gradient
4. Bar Chart
5. Linking Objects
6. PHP with MySQL Access
7. Simple Sankey Graph
8. Simple Tree Diagram
9. Interactive Tree Diagram
10. Force Layout Diagram
11. Bullet Chart
12. Map with zoom / pan and cities