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.
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.