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 interact with the data. And we have probably all created some graphs. But in order to make them accessible by many people, we will have to move away from our specialized software to some a more universal platform - the internet.

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

Github account and Github client for your operating system (Windows, Linux, iOS)
Participation in at least one SWC workshop
Familiarity with at least one programming language: concept of loops, functions, and conditionals
Familiarity with your favorite text editor (Sublime 2 is a good option)

Topics

What now?

We are using gapminder data and the later lessons are based on an example by Mike Bostock. Lessons created by Isabell Kiral-Kornek and Robert Kerr.