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 (http://bit.ly/2lGTtxw)

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. 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.

 

Timelines With D3

 

D3 allows you to create timelines by drawing X and Y axes, adding time markers (called ‘ticks’) 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/

 

Working with D3

 

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, sometimes you will need to have a server. I would recommend you put the copied files on your own hosted website online, or else use JSFiddle.net

1 comment

  1. Patrick Egan - June 1, 2017 10:44 am

    TimelineJS can be found at….

    Reply

Have your say