D3 Canvas Setup with 0 Coding Skills. Data Visualisation from Scratch P.1

Summary: Intro | About D3.js | Initial Setup & Python Server | Canvas Setup

In the following series I will cover the basics of data visualisation. There are many data visualisation tools available (free & paid versions) on the market, so for an everyday analyst the knowledge of how to build graphs from scratch is not essential. However, most (if not all) of these pre-built tools fall short as soon as any customisation is required: it could be a graph type that is not supported, or the design that cannot be adjusted to follow the company branding guidelines. Therefore, there are cases when the knowledge of how to build something yourself is essential.

Data visualisation has become an inseparable part of a journalist toolkit in the internet boom era. Journalism has evolved from traditional articles using text and images to forms more suited for computer devices and internet users’ expectations: podcasts, animations, videos, ebooks, interactive graphics, even articles that embed elements from video games. Some notable examples of this approach include the (relatively) recent Bloomberg Business “playful” redesign and The New York Times Interactives library.

While media outlets such as The Guardian, The New York Times, Bloomberg News, and The Economist already experiment with these new methods of readers engagement, surprisingly many web journals are still reserved in their adoption of digital content of that kind. Yet, these modern tools are not merely ways of increasing user retention on a web page. It is in our interest as a society to stay best informed and expect from the news sources content that is well-edited, informative, easy to follow, and data-driven. 2016 has been summed up as the year of “post-truth”, in 2017 we’ve heard politicians hinting there is such thing as “alternative facts”. Facebook has  been repeatedly called out on its problem of concealing fake news as real news. We need commitment on both the readers and the media sides to increase the news quality, and to improve users’ news literacy. Using modern visualisation tools such as D3.js is, in my opinion, critical in that quest.

About D3.js

D3.js is a data visualisation library built in JavaScript. A visualisation can be a static or an interactive graph of any kind: a bar chart, a network, a map. You can read about D3.js on its official website, and the best way to see it’s capabilities is by having a look at an incredible library of D3 building blocks developed by D3’s creator, Mike Bostock (now employed by The New York Times).

About Data Visualisation from Scratch series

This guide covers, step by step, how to build visualisations with D3 that can be used to power web articles. I’ll look into the styling options available, test which visualisation types are most universal, and which should be used only sparely, I also plan to investigate ways of storing & securing data for D3 graphs. The outcome of this guide will be a library of easily reusable interactive graphics that anyone can build.

Initial Setup & Python Server

D3 is very easy to setup. All visualisations are embedded within an HTML document that can be opened up in a browser. Some browsers block loading data files from local system for security reasons. Hence, to use D3 locally you need to setup a server on your computer. For this task you can use a Python web server. If you’re on Mac or Linux (e.g. CentOS VM from this post), Python is already installed. In Windows environments, you need to install Python. As a side note: look into Anaconda data science platform, that includes Python, R and Scala, and in the case of Python it comes with the majority of most popular Python libraries already pre-installed.

Once ready, create a folder on your local disk that will host your visualisation project. I’ve called mine ‘blog’. Open up a terminal and navigate to that folder. From there, start the python mini-server with the following command:

python -m SimpleHTTPServer 8000

(For environments behind a proxy, read about proxy configuration in this post)

screenshot231

When the server starts, we’re ready to go.

Canvas Setup

All of the files referenced in the guide are included in dviz.zip package.

First of all, let’s check if the server can be accessed from the browser. Put a sample HTML file on your project folder. You use my sample file from the dviz.zip package or copy the below and save as sample.html.

<!DOCTYPE html>
<html>
  <head>
    <title>Blank Template</title>
    <meta charset="utf-8" />
    <link href="style.css" rel="stylesheet">
    <script src="//d3js.org/d3.v3.min.js"></script>
  </head>
 
  <body>
     <header>
         <h1>Lorem ipsum</h2>
         <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consequat erat mauris, sed placerat sapien imperdiet tristique. Suspendisse id neque scelerisque, varius lacus sed, feugiat est. Morbi ornare molestie neque, sagittis ullamcorper diam pretium vel. Vivamus elementum condimentum arcu, sed rutrum est. Praesent lobortis velit at justo efficitur tempus. Quisque eget libero eget mi egestas sollicitudin. Vivamus finibus tellus ante, non hendrerit urna malesuada sit amet. Donec in ante erat. Fusce sit amet finibus enim, vitae semper orci. Donec hendrerit felis ut justo aliquet, in elementum elit posuere. Phasellus placerat elit neque, id dignissim elit laoreet ut.
        </div>
     </header>
   
  </body>
</html>

The doctype declaration specifies that this is a html document. Then I’m pointing to the d3 library source code (that you can also download onto your project folder to work offline). I’ve created a CSS style sheet (style.css) for my canvas that you can follow and modify per your preference – my inital settings adjust the content to be centered on the page and pick Georgia as the main font. The file above can serve as an empty html canvas for any visualisation you create in this guide.

My style.css:

body {
font-family: Georgia, Verdana;
line-height: 200%;
text-align: center;
margin: auto;
max-width: 850px;
}
h1 {
font-size: 200%;
}
div {
font-size: 100%;
}

In your browser, navigate to http://localhost:8000. It will return a list of files hosted on your server. For now, this should be sample.html and style.css.

screenshot233

Open sample.html to verify the document can be read and that the styling is applied.

screenshot234

Sample visualisation: Snowden’s Route from bl.ocks.org

You can use sample.html and style.css to embed any D3 visualisation found on the web on your private canvas. You only need to know which section of the code goes where. To illustrate this idea, I’ve picked the Snowden’s Route building block from Mike Bostock’s library. I really like this particular D3 example because it is a clear display of the explanatory power of visualisation: everybody finds it easier to comprehend geographical data and movement across physical locations by looking at a map; very few people have developed a spacial imagination good enough to visualise the same idea by merely looking at text.

There are 4 main steps to reuse D3 visualisations found on the web:

  1. As a general rule, everything within the <style> tags goes to your style sheet. To use the graph’s original styling on your website, append that piece of code to style.css and give it a title, e.g. Snowden’s Route. You can see how it’s done in my style-extended.css file.
  2. Everything within <script> tags goes to a separate javascript file – in my case it resides in sample_graph.js. It’s a good practice to separate javascript code from the html document for the ease of read. If done so, the javascript document needs to reference the part of html where the visualisation will appear. You will notice that in my example the file sample_graph.js (line 37) points to a <div> element of id “chart” (line 18 in sample_graph.html), and that’s where it plugs the map.
  3. Sometimes, data points are called from the main file (e.g. this Les Miserables graph visualisation). The file storing data (it’s normally a txt, csv, tsv, or json) should then be saved separately.
  4. Finally, there might be calls to some external libraries: here, the code references a geographical dataset to render a world map. To use it, fix the code’s URL, or to be sure it can always be accessed, download it to your local drive and point to its location there.

In my case, I’ve created the main document sample_graph.html, that uses styling included in sample_style.css, calls the D3 visualisation from sample_graph.js, and uses the world map coordinates stored in world-50m.json. To try it out yourself, move all these files to a single folder (e.g. Snowden), and open up sample_graph.html from the browser.

screenshot235

It will return the Snowden’s Route visualisation, along with some dummy text.

screenshot236

With 4 simple steps we’ve created a very powerful visualisation (and a – could be – web article). In the part 2 of the series, I will look at building actual graphs from scratch and introduce some good practices for creating interactive D3 visualisations.

————————————————————————–

Post Scriptum

A great start to Data Journalism is the Data Journalism Handbook (O’Reilly, 2012), that is a free of cost resource developed by the European Journalism Centre and the Open Knowledge Foundation, in collaboration with a number of leading news outlets. It covers a handful of data-driven projects, the latest trends in digital journalism, and recommended techniques for new starters, including pointers to some open data initiatives and advice on how to tackle them.

An excellent introduction to D3 by Scott Murray is available from O’Reilly & Safari Books as a book or a video course. The best £40 I’ve ever spent.

-Eve-

One thought on “D3 Canvas Setup with 0 Coding Skills. Data Visualisation from Scratch P.1

Leave a Reply

Your email address will not be published. Required fields are marked *