This course will teach you everything you need to know to start building Data Visualizations in D3.js and communicating brilliantly in the world of 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.

D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Course Overview

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.

About the Instructor

Victor Mejia is a Senior UI Engineer who specializes in building great user experiences and data visualizations. His expertise is in building web applications with JavaScript. He is also very active in the developer community and is a regular speaker at meetups and code camps. His skills include Angular, D3, Ionic, Node.js and MongoDB.