Interactive Web Visualizations with D3

Research Data & Digital Scholarship Explore Our Work

Interactive Web Visualizations with D3
Cassandra Hradil

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”  is how we declare variables 
  let myVariable = “hello!”
//dot  notation can mean calling a method (special kind of function) 
  container.append('svg');
//dot notation can also mean accessing data from an object/JSON 
  console.log(info.title);

 

D3-specific syntax

//D3 likes JQuery-style chain syntax, which means you call multiple methods on a single object in one statement 
  let svgChart = container.append('svg').attr('width', 600).attr('height', 600)
//unlike JQuery, D3 often breaks that statement up with tabs so that we can better see what’s happening 
  let svgChart = container.append('svg’)
    .attr('width', 600)
    .attr('height', 600)

Pros and Cons of d3

//PROS

  • D3 gets easier the more you work with it

  • D3 is great for visual thinkers!

    • Once you’re used to it, it’s like painting with data

  • D3 gives you fine grained control over the look + functionality of visualizations 

  • D3  supports many different kinds of visualizations

    • Because it starts with basic shapes, you can build almost anything you can imagine

//CONS

  • D3 syntax is a bit different from regular Javascript

    • JQuery chain syntax

  • D3 doesn’t always scale well

    • In SVG mode, works well with hundreds of nodes/elements

    • In Canvas mode, can work well with thousands of nodes

    • For truly big visualizations, you need WebGL - which d3 can do, but it’s a very different process

  • D3 may be overkill for some use cases

 

To view the full workshop recording + see the exercise walkthrough, visit here.

About the Author

Cassandra Hadril
Cassandra Hradil
Digital Humanities Specialist
Cassandra serves as a liaison between the Libraries’ Center for Research Data & Digital and the Price Lab. She specializes in managing and supporting digital projects across a range of media. Her interests include archival information systems, decolonial mapping, queer interfaces, e-textiles, and feminist data visualization.

Cassandra serves as a liaison between the Center for Research Data & Digital Scholarship in the library and the Price Lab for Digital Humanities. She specializes in managing and supporting digital projects across a wide range of media.

In her own practice, Cassandra is an artist, designer, programmer, and scholar who balances the critical with the creative. Her research and design interests include archival information systems, decolonial mapping, queer interfaces, e-textiles, and feminist data visualization. She is a designer and developer at the Immersive Realities Lab for the Humanities, and she teaches part-time at Parsons School of Design.

She has a bachelor’s degree in American Studies and Classics from Amherst College, where she also received the Five College Certificate in Native American and Indigenous Studies. She holds an MFA in Design and Technology from Parsons School of Design.

Articles by