Visualizing your data on the web using D3
Open science should be visible science. And what better way to make your research visible and accessible than putting it on the Internet? But no one wants to read endless tables of data. We’d rather look at graphs, or, even better, have the possibility of interacting with the data. And we have probably all created some graphs. But in order to make them accessible to many people, we will have to move away from our specialized software to a more universal platform - the Web.
We want to:
- Display our data on a website to increase visibility and accessibility of our research.
Our goal is to create a dynamic bubble plot (a prettier version of a scatter plot) and publish it on the Internet.
Along the way, we will learn:
- how to create our first own web page
- how to change the appearance of certain elements on the page
- how to integrate graphical elements into our page
- how to publish our page
- how to allow interaction with elements
- how to store data for the use in webpages
- how to create a graph in D3
Prerequisites
- Familiarity with at least one programming language: concept of loops, functions, and conditionals.
- Familiarity with your favorite text editor (we'll be using Sublime Text, but any text editor will do!).
- A modern web browser with developer tools (we'll be using Chrome, but Firefox is also a good choice)
Setup
- Create a Github account (if you don't already have one) and make sure you have git installed on your computer (here's a good option for Windows). A graphical interface for git is nice to have if you don't want to do everything from the command line, but not necessary (Mac and Windows, Linux).
Topics
- HTML
- CSS
- Images and SVG
- JavaScript
- D3 Setup
- D3 Into the data
- D3 Add and remove
- D3 Transitions
- Lines (and other SVG paths)
- Maps
- Publishing with Github
- What now?
Here are the final versions of the files that we made in the workshop:
index.html styles.css main.js
Here's what they'd look like after going through all of the lessons above:
index.html styles.css main.js
We are using gapminder data reformatted by Jennifer Bryan and the later lessons are based on an example by Mike Bostock. In order to make this example slightly easier, we interpolated the data. The data files can be found here. Lessons created by Isabell Kiral-Kornek and Robert Kerr and modified for this workshop by Emily Dolson.