Previous Lecture Complete and continue  

  Introduction

Welcome to How to Visualize Data with D3. In this project, join Elisabeth Robson to learn how to incorporate data visualization into your web skills using HTML, JavaScript and the D3 data visualization library. Elisabeth will take you through building a visualization using data downloaded from NASA. You'll learn how to use D3 to read data into a web page, select and create new elements, and position and style elements to generate a striking color visualization. Along the way you'll learn from the ground up how to use D3: how data binding works, how to use methods to add attributes and style on D3 elements, and how to use scale functions to process data points as you build the visualization.

At the end of the course you'll have completed a data visualization of the NASA data, and have some new skills you can apply to your own data too.

The inspiration for this course is the "Warming Stripes" visualization by climate scientist Ed Hawkins. You can follow him on twitter, or visit his blog to learn more about Ed and his work.

Pre-requisites

To successfully complete this project, we recommend that you have some background in HTML and JavaScript. You don't need to be an expert by any means, but you should have experience building web pages and you should have basic programming skills with JavaScript.

No experience with D3 is required.

Learning Path

Resources

You can download the completed code from GitHub here: https://github.com/bethrobson/CCC/tree/master/Stripes. We recommend, however, that you follow along starting from scratch to help with the learning process.