D3 Library

D3js.org

What is D3?

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

To me, D3 is a tool that gives you the opportunity to create beautiful visualizations using data. D3 itself doesn't create the visualizations, it just makes it a lot easier to create your own SVGs or drawings on a canvas by interpreting the data you receive from an API or gathered from research. Below are some examples of visualizations from ObservableHQ. This site has a large collection of visualizations made by people all over the world.

Our implementation of D3

Because we are working simultaneously with the UX-minor, we are waiting for the final visualizations to use in the final prototype. So we started off with getting familiar with D3. I started with a scatter plot, just displaying the items and persons. Joeri also wanted to learn D3 and started experimenting with a force directed graph. He also explored more visualizations of the scatter plot to see how far he could take the SVGs, making interesting visualizations instead of just some dots.