Building D3 Charts: A Step-by-Step Beginner's Guide

Background:

D3 (Data-Driven Documents, also known as D3.js) is a JavaScript library originally developed in 2011. The purpose of D3 is to produce dynamic, interactive data visualizations in web browsers. D3 builds upon the standards Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS). D3 enables programmers to use a CSS-style selector to select a given set of Document Object Model (DOM) nodes, then use operators to manipulate them. For example, D3 lets you select all elements of a certain HTML type, and then change their text color. D3 has become increasingly important in HTML programming.

Technology Overview:

This tutorial developed by University at Albany researchers is aimed at beginners who want to learn the essential steps in using D3 to build web-based data visualizations. The tutorial places special focus on visualizing government-published open data, a skill useful in a number of different applications. No special expertise in HTML, CSS, JavaScript, or other web technologies is required to follow along and understand the lessons. The tutorial guides you through the process for creating simple visualizations, which you can then build upon to create even more sophisticated and informative visualizations.

Advantages:

• Simple to follow: This tutorial does not require extensive previous experience with web technologies.
• Goes beyond simple “getting started” tasks: The tutorial allows you to build visualizations which can easily be scaled to even more sophisticated applications.
• Focus on visualizing government-provided open data, a key skill for a number of different applications.

Applications:

The primary application for this tutorial is to teach web programmers how to create visualizations using D3. This skill is valuable in a broad spectrum of different data-driven applications.

Intellectual Property Summary:

Copyright

Stage of Development:

TRL 9 - Actual system proven in operational environment.

Licensing Status:

This technology is available for licensing and/or co-development. This technology could be licensed to educational institutions, software development companies, or individual web developers.

Licensing Potential:

Licensing, Development partner