Learn Data Visualization with D3.js

Learn how to present data in a way that can easily be interpreted!

This course will teach you everything you need to know to start building beautiful and interactive Data Visualizations.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.

Data Visualation

Build Your Own Powerful Data Visualizations

This course brings together the worlds of web development and data visualization. You will be taken through instructor-led, hands-on coding exercises and will learn how to build powerful data visualizations. At the end of the course you will have built your own D3 visualizations from scratch using example datasets.

In addition, you will become familiar with the foundational concepts and methods of D3, such as data binding, scales, axes, transitions and motion, and advanced concepts such as layouts and geo-mapping. You will learn a repertoire of visualization techniques for making your data come to life.

Takeaways

  • Start programming in D3.js
  • Create powerful data visualizations
  • Learn how to manipulate data
  • Learn how to work with transitions and animations in D3
  • Create modular, mobile-friendly visualizations

 

Course Syllabus

Day 1

D3 Building Blocks

  • D3 intro
  • SVG Basics
  • Selections (select(), append(), selectAl())
  • Data Binding (enter())
  • Drawing with Data
  • Enter, Update, and Exit Pattern
  • Basic transitions
  • Working with JSON and CSV files

Visualization Basics

  • D3 utility functions (min, max, extent, sum, array functions)
  • Quantitative Scales
  • Categorical Scales
  • Axis Generator
  • Updates, transitions, and motion
  • Line Generator
  • Brush Generator

Common D3 Visualizations

  • Bar Chart
  • Scatterplot

D3 Layouts

  • Pie
  • Force

Day 2

D3 Layouts (cont.)

  • Tree
  • Histogram

Mapping in D3

  • GeoJSON
  • Paths
  • Projections
  • Building a Map
  • Interactivity

Reusable Charts

  • Design Patterns
  • Creating Reusable Visualizations

Advanced Topics

  • Creating responsive, mobile-friendly visualizations
  • Event Dispatching
  • Using Crossfilter
  • Integrations with Frameworks (Angular, React, Ionic)

 

Who is This Course For?

This course is for anyone who wants to be proficient in the use of D3 and seeks expertise visualizing quantitative information.

Course Prerequisites

Students should have a basic understanding of web fundamentals (HTML, CSS, DOM, SVG, HTML5 Canvas, etc.) and JavaScript knowledge (functions, control statements, basic data types and structures), as well as an awareness of data visualization and its benefits.

System Requirements and Development Environment

Participates should bring a laptop/notebook computer. Mac or PC with any modern web browser installed and working wireless capabilities.