Share Description
In this course, you will :
- Learn how to make a basic bar chart as well as basic shapes and text.
- introduces the path function and the ability of generators to draw more complex shapes
- Learn how to use JSON, XML, and CSV files to create more complex graphics like tree and Voronoi diagrams, as well as how to manipulate your data for advanced graphics using map, stack, and nest functions.
- The course concludes with suggestions for incorporating interactivity and selecting the best graphic for your data.
Syllabus :
1. Refresher
- Recalling HTML basics
- Understanding HTML5
- Introducing SVG
- Recalling CSS
- Combining Javascript and D3
- Understanding the DOM and the console
2. Making a Simple Bar Chart with D3
- Adding an SVG
- Adding rectangles
- Setting attributes for shapes
- Seeing the code how the browser sees it
3. Basic Shapes, Courtesy of SVG
- Introducing SVG shapes
- Drawing circles
- Drawing ellipses
- Drawing lines
- Rejecting polygons and polylines
- Adding text
4. Advanced Shapes, with D3 and Path
- Explaining generators
- Drawing an area chart
- Finding other generators
- Introducing groups
5. Scales and Axes
- 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
6. Importing Data into D3
- 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
7. Additional Graphics with D3 Layout
- Making a tree from JSON
- Making a Voronoi tessellation
- Introducing other layouts
8. Preparing Your Data for Advanced Graphics
- Data manipulation
- Prepare stack data using map
- Drawing a stack area chart
- Advancing selections
- Make flat data multidimensional
- Filtering data
9. Interactivity
- Introducing interaction
- Making your graphic responsive
- Adding interactivity with CSS
- Adding interactivity with JavaScript
- Introducing dispatch
- Transitions
- Dragging and zooming
10. Picking the Right Graphic
- Picking the right graphic for your data
- Time series
- Text
- Hierarchy
- Geography
- Distribution
