Overview
-
Build interactive data visualizations. Learn to create tree diagrams, stack charts, spatial maps, and more all with a web browser, a few lines of code, and the D3.js library.
Syllabus
-
Introduction
- Welcome
- Explaining D3
- What you need to know
- Using the exercise files
- Introduction
- Recalling HTML basics
- Understanding HTML5
- Introducing SVG
- Recalling CSS
- Combining Javascript and D3
- Understanding the DOM and the console
- Introduction
- Adding an SVG
- Adding rectangles
- Setting attributes for shapes
- Seeing the code how the browser sees it
- Introducing SVG shapes
- Drawing circles
- Drawing ellipses
- Drawing lines
- Rejecting polygons and polylines
- Adding text
- Introducing path
- Explaining generators
- Drawing an area chart
- Finding other generators
- Introducing groups
- Introducing scales
- Creating a linear scale
- Creating a linear axis
- Positioning and formatting our axis
- Creating a time scale
- Creating a time series axis
- Creating an ordinal scale and axis
- Using colour scales
- Introducing other scales
- Introducing external data
- Parsing a CSV file
- Drawing a line chart from CSV data
- Using TSV and DSV
- Parsing JSON
- Parsing and mapping XML
- Parsing a TXT file
- Parsing HTML
- Introducing other data methods
- Introducing layout
- Making a tree from JSON
- Making a Voronoi tessellation
- Introducing other layouts
- Data manipulation
- Prepare stack data using map
- Drawing a stack area chart
- Advancing selections
- Make flat data multidimensional
- Filtering data
- Introducing interaction
- Making your graphic responsive
- Adding interactivity with CSS
- Adding interactivity with JavaScript
- Introducing dispatch
- Transitions
- Dragging and zooming
- Picking the right graphic for your data
- Time series
- Text
- Hierarchy
- Geography
- Distribution
- Other
- Further resources
- Finding plugins
- Using the API reference
- Using D3 with other libraries
- Summary
