Log In
0% completed
Introduction
What Do We Need to Get Started?
What is D3.js?
Starting with a Simple Graph
A Simple Graph
HTML
Cascading Style Sheets (CSS)
D3 JavaScript
Setting Up the Margins and the Graph Area
Getting the Data
Formatting the Date and Time
Setting Scales, Domains, and Ranges
Adding Data to the Line Function
Adding the SVG Element
Actually Drawing Something!
Challenge: Change X-Axis Display
Challenge Solution: Change X-Axis Display
Challenge: Line Properties
Challenge Solution: Line Properties
Quiz on Simple Graph Concepts
Author's Note
Things We Can Do with the Simple Graph
Setting Up and Configuring the Axes
Changing the Number of Ticks on an Axis
Rotating Text Labels for a Graph Axis
Formatting a Date and Time Axis with Specified Values
Adding the X-Axis Label
Adding the Y-Axis Label
How to Add a Title to Your Graph
Change a Line Chart Into a Scatter Plot
Smoothing out Graph Lines
Make a Dashed Line
Filling an Area Under the Graph
Adding a Drop Shadow
Adding Grid Lines to a Graph
Adding More Than One Line to a Graph
Labelling Multiple Lines on a Graph
Multiple Axes for a Graph
Challenge: Formatters
Challenge Solution: Formatters
Challenge: Rotate Title
Challenge Solution: Rotate Title
Quiz on More Simple Graph Concepts
Elements, Attributes, and Styles
The Framework for D3 Elements
Elements: Circle, Ellipse, and Rectangle
Elements: Line, Polyline, Polygon, and Path
Elements: Clipped Path
Elements: Text
Attributes: Points
Attributes: Transform
Attributes: Width, Height, Length, and Text
Styles: Fill, Stroke, Opacity, and Fill-Opacity
Styles: Stroke-Opacity, Width, Dasharray, and Linecap
Styles: Writing-Mode and Glyph-Orientation-Vertical
Using Styles in Cascading Style Sheets
Challenge: Draw an Ellipse
Challenge Solution: Draw an Ellipse
Challenge: Overlapping Circles
Challenge Solution: Overlapping Circles
Quiz on Elements, Attributes, and Styles
Bar Charts and Histograms
Bar Charts and Histograms
Bar Charts
Histograms
Challenge: Bar Charts
Challenge Solution: Bar Charts
Challenge: Histogram
Challenge Solution: Histogram
Quiz on Bar Charts and Histograms
Tree Diagrams
What is a Tree Diagram?
A Simple Tree Diagram Explained
A Horizontal Tree Diagram Explained
Styling: Changing Node and Link Colors
Styling: Changing the Nodes to Different Shapes
Using Images as Nodes
Generating a Tree Diagram From External Data
Generating a Tree Diagram from 'Flat' Data
Generating a Tree Diagram from a CSV File
An Interactive Tree Diagram
Challenge: Data Formats
Challenge Solution: Data Formats
Challenge: Nodes and Links
Challenge Solution: Nodes and Links
Quiz on Tree Diagrams
Sankey Diagrams
Introduction to Sankey Diagrams
Sankey Diagram Code
Formatting Data From a JSON
Formatting Data From a CSV
Challenge: Display JSON
Challenge Solution: Display JSON
Challenge: Change Link Color
Challenge Solution: Change Link Color
Quiz on Sankey Diagrams
Bullet Charts
Introduction to Bullet Chart Structure
D3.js Code for Bullet Charts
Adapting and Changing Bullet Chart Components
Add More Ranges and Measures
Challenge: Move Subtitle
Challenge Solution: Move Subtitle
Challenge: Invert Chart
Challenge Solution: Invert Chart
Quiz on Bullet Charts
Mapping with D3.js
GeoJSON and TopoJSON
Starting with a Simple Map
Zooming and Panning a Map
Displaying Points on a Map
Challenge: Display Country
Challenges Solution: Display Country
Challenge: Display Hometown
Challenge Solution: Display your Hometown
Quiz on Mapping
Assorted Tips and Tricks
Tooltips
Get Tipping
Including an HTML Link in a Tooltip
Colors
Filtering
Select Items with an 'IF' Statement
Color Gradient on Line
Color Gradient on Area
Transitions
Show/Hide Elements
Using HTML Inputs
Using a 'Range' Input
Using More Than One Input
Rotate Text with an Input
Use a 'Number' Input with D3.js
Add an HTML Table to Your Graph
More Table Madness
Adding Web Links to D3 Objects
Export an Image
Understanding JavaScript Object Notation (JSON)
Challenge: Rotating Square
Challenge Solution: Rotating Square
Challenge: Scatter Plot
Challenge Solution: Scatter Plot
Quiz on Tooltips
D3.js Examples Explained
Multi-Line Graph: Purpose, Code, and Description
Multi-Line Graph: Applying Colors and Legend
Multi-Line Graph: Making it Interactive
Difference Chart: Purpose, Code, and Description
Difference Chart: Nesting and Wrangling the Data
Difference Chart: Cheating with the Domain
Difference Chart: Clipping and Adding the Areas
Adding a Bit More to Our Difference Chart
My Favorite Tooltip Method for a Line Graph
My Favorite Tooltip: The Final Block
My Favorite Tooltip: Complex Version
Conclusion
Wrap Up
D3 Tips and Tricks: Interactive Data Visualization
/
...
/
Challenge: Bar Charts
Challenge: Bar Charts
Test your understanding of bar charts by working through this challenge.
We'll cover the following...
Problem statement
Final output
Problem
...