You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.3 KiB
97 lines
2.3 KiB
# D3 Notes
|
|
|
|
## Lessons
|
|
|
|
1. [Intro](/INTRO.md)
|
|
|
|
1. What is SVG?
|
|
1. What Makes D3 So Special?
|
|
1. My Approach to Learning
|
|
|
|
1. [SVG](/SVG.md)
|
|
|
|
1. Base tags
|
|
1. Basic Elements
|
|
1. Positioning
|
|
1. Styling
|
|
1. Important SVG elements
|
|
|
|
1. [D3](/D3.md)
|
|
|
|
1. Basics
|
|
1. AJAX
|
|
1. Data Binding
|
|
1. Linear Scale
|
|
1. Time Scale
|
|
1. Axes
|
|
1. Events
|
|
1. Behaviors
|
|
|
|
1. [Scatter Plot](/SCATTER_PLOT.md)
|
|
|
|
1. Add link to d3 library
|
|
1. Add an <svg> tag and size it with D3
|
|
1. Create some fake data for our app
|
|
1. Add SVG circles and style them
|
|
1. Create a linear scale
|
|
1. Attach data to visual elements
|
|
1. Use data attached to a visual element to affect its appearance
|
|
1. Create a time scale
|
|
1. Parse and format times
|
|
1. Set dynamic domains
|
|
1. Dynamically generate svg elements
|
|
1. Create axes
|
|
1. Display data in a table
|
|
1. Create click handler
|
|
1. Remove data
|
|
1. Drag an element
|
|
1. Update data after a drag
|
|
1. Create a zoom behavior that scales elements
|
|
1. Update axes when zooming
|
|
1. Update click points after a transform
|
|
1. Avoid redrawing entire screen during render
|
|
1. Hide elements beyond axis
|
|
1. Use AJAX
|
|
|
|
1. [Bar Graph](/BAR.md)
|
|
|
|
1. Use AJAX to make an asynchronous call to an external data file
|
|
1. Create a Bar graph
|
|
|
|
1. [Pie Chart](/PIE.md)
|
|
|
|
1. Create an ordinal scale
|
|
1. Create a color scale
|
|
1. Add paths for each pie segment
|
|
1. Generate an arc creating function
|
|
1. Format the data for the arc
|
|
1. Adjust the position of the pie
|
|
1. Make a donut graph
|
|
1. Remove parts of the pie
|
|
|
|
1. [Force Directed Graphs](/FORCE_DIRECTED_GRAPH.md)
|
|
|
|
1. Creating a physics based force that will center nodes
|
|
1. Creating a physics based force that make the nodes repel each other
|
|
1. Creating a physics based force that will link the nodes to show their relationship
|
|
|
|
1. [Mapping](/MAPS.md)
|
|
|
|
1. Creating a map
|
|
1. Define GeoJSON
|
|
1. Use a projection
|
|
1. Generate a <path> using a projection and the GeoJSON data
|
|
|
|
## Labs
|
|
|
|
1. [Lab](/Lab.md)
|
|
|
|
## Completed Code
|
|
|
|
1. [SVG](/examples/svg)
|
|
1. [Scatter Plot](/examples/scatter_plot)
|
|
1. [Bar Graph](/examples/bar)
|
|
1. [Pie Chart](/examples/pie)
|
|
1. [Force Directed Graphs](/examples/force_directed_graph)
|
|
1. [Mapping](/examples/mapping)
|