hanss/d3-kickoff-galvanize

A course designed to introduce javascript developers to Data Driven Documents.

Introduction to Data Driven Documents

This course introduces the popular data visualization framework, Data Driven Documents, to JavaScript Developers. Data Driven Documents, more widely know as D3, is a powerful DOM framework that is designed to make associated DOM elements with data objects easy. This hands on course covers what D3 is, when to use it, and how to use it.

Goals

• Create Data Visualizations using the DOM
• Get introduced to SVG
• Create Data Visualizations using SVG
• Understand how to use Scales and Axis in D3
• Work with Interpolation and Transitions
• Visualize data with an interactive chart
• Use a D3 with topo JSON to build SVG data maps

Expectations

• Experience with the DOM, HTML, and CSS
• Proficiency with Javascript Object Literals, Arrays, and Functions
• Basic understanding of data formats

Agenda

Day 1

• What is D3?
• D3 Data and the DOM
• Building a Golf Scorecard
• Loading and Traversing Data
• Introducing SVG
• Creating Golf Scores Bar Graph

Day 2

• Interacting with Visualizations
• Quantitative Scales
• Ordinal Scales and Axis
• Timescales
• Transitions
• Improving the Golf Scores Graph
• Intro to topojson and data mapping

Download the Files

The files for this course are found on github at https://github.com/MoonTahoe/D3-intro.

$ git clone https://github.com/MoonHighway/D3-intro.git

Requirements

• Preferred IDE
• Google Chrome Browser
• Node js installed
• NPM installed
• Git installed