Mini Map
Search
⌘ K
Log In
D3 Tips and Tricks: Interactive Data Visualization
0%
1.
Introduction
What Do We Need to Get Started?
What is D3.js?
2.
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
3.
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
4.
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
5.
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
6.
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
7.
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
8.
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
9.
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
10.
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
11.
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
12.
Conclusion
Wrap Up
Home
Courses
D3 Tips and Tricks: Interactive Data Visualization
Challenge: Draw an Ellipse
Test your understanding of D3 elements by working through this challenge.
We'll cover the following...
Problem statement
Final output
Problem statement
...