Back To Course Home

D3 Tips and Tricks: Interactive Data Visualization

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

Zooming and Panning a Map

Learn how to add zoom and pan functionality to the simple world map.

We'll cover the following

- The code
- Explanation

With our map displayed nicely, we need to be able to move it about to explore it fully.

To do this, we can provide the functionality to zoom and pan it using the mouse.

The code

Towards the end of the script, just before the close off of the </script> tag, we can add in the following code:

Get hands-on with 1400+ tech skills courses.