author-cover

D3 Tips and Tricks: Interactive Data Visualization

Course Overview

In this course you will explore D3.js, a JavaScript library used for data visualization. You will start your journey into D3 with a simple line graph. You will learn to break the example down into its components and create variations of the graph by individually tinkering with each co...

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

1. Introduction

What Do We Need to Get Started?

2. Starting with a Simple Graph

Cascading Style Sheets (CSS)

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

3. Things We Can Do with the Simple Graph

4. Elements, Attributes, and Styles

The Framework for D3 Elements

Elements: Circle, Ellipse, and Rectangle

Elements: Line, Polyline, Polygon, and Path

Elements: Clipped Path

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

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

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

author-cover

Join more than 1.4 million learners from companies like

Recommended before you start this course

Recommended before you start this course

Recommended before you start this course

Recommended after you finish this course

Recommended after you finish this course

Recommended after you finish this course

What our learners are saying

What our learners are saying

COURSE BY:

Malcolm Maclean

Teams of every size choose

Educative for Business

to train, upskill & onboard their developers

Learn in-demand tech skills in half the time

SOLUTIONS

For Enterprise

For Individuals

For HR & Recruiting

For Bootcamps

PRODUCTS

Educative Learning

Educative Onboarding

Educative Skill Assessments

Educative Projects

Pricing

For Enterprise

For Individuals

Free Trial

LEGAL

Privacy Policy

Terms of Service

Business Terms of Service

CONTRIBUTE

Become an Author

Become an Affiliate

Become a Contributor

RESOURCES

Educative Blog

EM Hub

Educative Sessions

Educative Answers

ABOUT US

Our Team

Careers

Hiring

Frequently Asked Questions

Contact Us

Press

MORE

GitHub Students Scholarship

Course Catalog

Early Access Courses

Earn Referral Credits

CodingInterview.com

Copyright ©2023 Educative, Inc. All rights reserved.

soc2