Interactive Web Visualizations with D3

D3 (Data Driven Documents) is an open source Javascript library that is widely used by data experts, creative technologists, and scholars to create and share many different kinds of data visualizations on the web. D3 is a “web-first” visualization library, making it a great tool for creating an interactive visualization that can be embedded in a larger digital project. This workshop introduced the basics of setting up a project and displaying a simple visualization with a small dataset, and included syntax and conventions that are useful to know for all visualizations in D3. Because this involves writing some Javascript, D3 is suitable for folks who have a bit of programming experience or are feeling adventurous about beginning to learn to code.

Sample starter file: https://glitch.com/edit/#!/d3-basics-starter?path=script.js%3A1%3A0

Completed sample file: https://glitch.com/edit/#!/d3-basics?path=script.js%3A1%3A0

Dataset: https://github.com/lynnandtonic/nestflix.fun

• Front end is at https://nestflix.fun/. Dataset + site built by Lynn Fisher (go check out her stuff!)
• Already pretty clean and well-structured; I’ve done a little bit of pruning to suit our exercise better

Notes on working in Javascript

 let myVariable = “hello!”

 container.append('svg');

 console.log(info.title);

 let svgChart = container.append('svg').attr('width', 600).attr('height', 600)

 let svgChart = container.append('svg’)
 .attr('width', 600)
 .attr('height', 600)