D3 Notes

Lessons

1. Intro

   1. What is SVG?
   2. What Makes D3 So Special?
   3. My Approach to Learning

2. SVG

   1. Base tags
   2. Basic Elements
   3. Positioning
   4. Styling
   5. Important SVG elements

3. D3

   1. Basics
   2. AJAX
   3. Data Binding
   4. Linear Scale
   5. Time Scale
   6. Axes
   7. Events
   8. Behaviors

4. Scatter Plot

   1. Add link to d3 library
   2. Add an tag and size it with D3
   3. Create some fake data for our app
   4. Add SVG circles and style them
   5. Create a linear scale
   6. Attach data to visual elements
   7. Use data attached to a visual element to affect its appearance
   8. Create a time scale
   9. Parse and format times
   10. Set dynamic domains
   11. Dynamically generate svg elements
   12. Create axes
   13. Display data in a table
   14. Create click handler
   15. Remove data
   16. Drag an element
   17. Update data after a drag
   18. Create a zoom behavior that scales elements
   19. Update axes when zooming
   20. Update click points after a transform
   21. Avoid redrawing entire screen during render
   22. Hide elements beyond axis
   23. Use AJAX

5. Bar Graph

   1. Use AJAX to make an asynchronous call to an external data file
   2. Create a Bar graph

6. Pie Chart

   1. Create an ordinal scale
   2. Create a color scale
   3. Add paths for each pie segment
   4. Generate an arc creating function
   5. Format the data for the arc
   6. Adjust the position of the pie
   7. Make a donut graph
   8. Remove parts of the pie

7. Force Directed Graphs

   1. Creating a physics based force that will center nodes
   2. Creating a physics based force that make the nodes repel each other
   3. Creating a physics based force that will link the nodes to show their relationship

8. Mapping

   1. Creating a map
   2. Define GeoJSON
   3. Use a projection
   4. Generate a using a projection and the GeoJSON data

Labs

1. Lab

Completed Code

1. SVG
2. Scatter Plot
3. Bar Graph
4. Pie Chart
5. Force Directed Graphs
6. Mapping