Introduction to D3 Visualisations

Example Timelines: There are a host of tools available to visualise your data using timelines. Some of these examples afford different levels of flexibility depending on your needs. Some of the more sophisticated ones include:

TimelineJS (http://timeline.knightlab.com)

TimeLineCurator ()

TimeMapper: (http://timemapper.okfnlabs.org)

Chronos Timeline: http://hyperstudio.mit.edu/software/chronos-timeline/

 

Introduction To D3

D3, created by former New York Times developer Mike Bostock, is an abbreviation for Data Driven Documents. Here is a good example of it in use: https://www.nytimes.com/elections/results/president

It began in 2011 as a library of code written in Javascript that enables you to create interactive visualizations in web browsers. Currently in version 4.5, it works by using HTML5 and CSS alongside Scalable Vector Graphics (SVG). D3 allows you to control the result of the representation of your data by giving you the freedom to grab selections of your data and control how it outputs on the browser.

Examples of D3

In order to get going with D3, most developers recommend that you ‘dive in’ and use some of the examples that appear on the http://bl.ocks.org/ website. There are thousands of examples of D3 in use. On this website, developers have displayed their projects, added a description of what they do, and provided code with some sample data. You can re-use this code and add your own data to see how the code works. If you change some of the values in the code, you will be able to see the possibilities you will have for your own visualisations.

Here is a quick example of how to get D3 working. First the HTML code:

D3 Hello World

 

Then we add script tags inside the code goes here... tags like so:

<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
  d3.select("body").style("background", "#efefef").append("p").text("Hello World");
</script>

Save this as example.html and upload to your hosting space if you haven’t got a server installed on your machine. The result should look like this:

Play around with the values defined above to see how D3 changes the output. Next, we’ll plot some arbitrary data in the browser.Take for example three countries with income, life expectancy and population. We are going to plot these values to get an interactive graph.

<script src="http://d3js.org/d3.v3.min.js"></script>

See how the code above constructs the graph. Some of it is self explanatory, but make sure you know what it does before moving on. Save this file as d3-example.html and it should produce a visualisation like this: http://patrickegan.org/d3-example.html

Timelines With D3

In some projects, D3 allows you to create timelines by drawing X and Y axes, adding time markers and then it allows you to feed your data into this timeline using HTML elements. A good example of this would be Timeline For D3 – Proof of Concept by user “Reinhard Rengel” http://bl.ocks.org/rengel-de/5603464. This particular timeline is based on the popular open-source visualisation Simile Timeline from 2005 that was created’ by ‘David François Huynh’ available here: http://www.simile-widgets.org/timeline/

 

Visit the url http://bl.ocks.org/rengel-de/5603464 and follow the instructions for “Create your own timelines”.

To create your own timeline, you need:

A data file (see ‘The file structure’ above).

The file ‘timeline.js’; download and put into your working directory or on your path.

The file ‘timeline.css’; download and put into your working directory or on your path; change settings according to your preferences.

Use ‘index.html’ (without comments) as a template and put in your filenames and paths.

*Hint: When copying these files to your own computer, you will need to have a server. If you haven’t got WAMP or XAMPP installed, you can still try out this code online. I would recommend you put the copied files on your own hosted website (such as Reclaim Hosting), or else use JSFiddle.net

This is just one example of many hundreds of different ways that you can use D3 for interactivity. As you can see from the same website (https://bl.ocks.org/) there are many ways to visualise your data.