Writing Hello World using D3js.
D3js is now the #1 data visualization open-source project on Github. It is a low-level visualization framework written in Javascript which is difficult for non-programmers to grasp. This is a very short and basic introduction to creating visualizations using D3js.
We assume no knowledge of Javascript, HTML, CSS, servers or web components, so lay back.
There are 3 important files to make a D3 visualization which are:
- HTML file.
- CSS file.
- Javascript file.
We discuss the functions of these files one by one with an analogy.
Imagine you are building a house for yourself. What do you need? Very crudely, you will require the services of:
- A builder. For laying foundation, making the framework and laying the bricks.
- A painter/designer. For painting walls, installing wall coverings and furnishing.
- An electrician and a plumber. For making the house suitable for living. Installing essential things like lights, fans, drainage etc. which make a house live-able.
Now lets compare this with developing a web page.
- The builder is like an HTML file. It contains the basic elements and text of the web page.
- The painter is like the CSS file. It defines the font size, shape, color and design aspects of the page.
- The electrician and plumber are like Javascript files. These files make the dynamic/moving parts of the web page with which you interact.
Let's see each of these files one by one.
The Builder: HTML file
HTML is the basic frame of the web page. It contains the text for the web page and links to CSS and Javascript files. Our HTML file is named page.html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title> D3 Visulization </title>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<link href="page.css" rel="stylesheet">
</head>
<body>
<div id="chart"> </div>
<script type="text/javascript" src="page.js"></script>
</body>
</html>
A basic understanding of the above code:
The <head> ... <\head> tag defines the header of the page and <body> ... <\body> tag defines the body of the page. Every html file has these 2 tags.
Inside the header, the <title> tag specifies the title of the page as 'D3 Visualization'. We have also specified the location of the D3 javascript file on http://d3js.org/d3.v2.min.js using <script> tag and we have specified the path to our CSS file which is page.css.
Inside the body, we have specified the tag <div id='chart'>. This tag defines a block on the web page (like a room in the house). A CSS or Javascript file can then refer to this block by using its id = 'chart' property and write or draw anything inside this block. Then there is a reference to the path of our javascript file (which is page.js) again the <script> tag.
You can store CSS and Javascript files on a website or on local disk. According you can point HTML to that file by mentioning it's web link or it's local file path.
Right now this HTML file does not contain any text or drawings but just links and paths to CSS and Javascript files that we will be requiring. It's just a bare-bones framework of the house.
The Painter: CSS file
We name this file page.css. CSS as we discussed before is a language to describe the style of the page, that is, the color/size/font/location of the text or other objects. These objects are defined in the HTML file.
A CSS file contains a set of rules. Each rule selects a tag/element in the HTML code and declares the style (color/size etc.) of that tag/element. The tag/element can be selected using something called as selectors which is a defined standard for selecting the elements of an HTML file. A reference for these selectors and CSS syntax is here.
Our CSS file which we have named page.css is just one line code:
text:{font-size:36px;}
This means any html <text> element will have font size 36 px. Right now, there is no such element in page.html. But it will be added by our javascript file page.js which we discuss now.
The Electrician and the Plumber: Javascript (JS) files
Javascript is a programming language of the web. Without javascript a web page is not responsive. We can see the text but we can not interact with it. (Just like we can live in a bare-bones-house but having electricity and water and basic utilities is what makes it a home).
There are many javascript libraries that have been built for easily and quickly writing javascript code. When an electrician has to install lights, he just buys the light bulb and switches and wires them. There is no need to make the bulbs and switches by himself. Similarly, javascript coders directly use available pieces and wire them together.
D3 is one such collection of pieces which are used for creating visualizations.
These D3 pieces can be accessed by referring to the code on http://d3js.org/d3.v2.min.js which has been built by experts using basic javascript. Before using any of D3 pieces, we refer to this file using the line:
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
in page.html above. We can also download this file on our computer and then just mention the file path name inside the HTML code.
Now we use D3 framework to create a visualization and store in the file page.js.
The rules for writing D3 visualizations involves learning basic Javascript and then learning from examples on http://d3js.org. We show how to write a simple text using D3.
A 'Hello World' example is the following:
var w = 800, h=400,
svg = d3.select("#chart")
.append("svg")
.attr("width",w)
.attr("height",h);
var text = svg
.append("text")
.text("This is Hello World written Using D3 !")
.attr("y",50);
We now point the HTML file to this code using the line:
<script type="text/javascript" src="page.js"></script>
in page.html.
That is it. Note that all these files should be in the same folder on your computer because of the file paths we have mentioned in the HTML code.
Start Living in the House
Before starting to live in the house, we need to register the building, set up contracts so that electricity and water starts flowing. This is analogous to setting up a 'server' to launch the above files.
There are several options to do this:
- Create a local server using node.js engine.
- Use a free service online for launching.
- Use a web browser locally.
The 3rd option is simplest. Just open the file page.html using a web browser. You will see the result. But nobody on the internet can see it.
The 1st option is a difficult one. Using a javascript runtime called node.js we setup a server on our computer and serve our files to this server. We can then access the result in a web browser. Any other person with access to internet can also access our result if we allow him to do so.
The 2nd option is of intermediate difficulty. Using Github, we can upload our files in a gist (with some minor changes). Then use bl.ocks.org to view the result of our D3 visualization online. Any other person on the internet can also view it.
If we open page.html file using chrome the result looks like this:
That's just some text written using D3.
The Alternative
Hire an architect (read: web-architect) to build the house!