This article gives sample code that will explain the basics of D3 to someone who understands Javascript. It shows writing of text, drawing a simple shape and making that shape interact with a mouse.

Aimed at beginners in D3 with intermediate level of Javascript and HTML

The Javascript data visualisation library D3 allows data visualisations in a browser window. Data can be bound to a DOM and transformed in many ways: the same data can be used, for example to create a table, a word cloud or a bar chart. There is also provision for animation and other data transformations. The main advantage of D3 is that it lets things be done fairly easily that would be cumbersome and error prone if, not impossible, using the standard browser tools, though the user must still cope with the vagaries of Javascript

Here a simple application that writes text to a screen then draws a circle that changes colour when the mouse enters or leaves the shows the basic features of D3, which, for the beginner at least, are selections, databinding and chaining.

D3 uses a declarative approach: the developer says what is required and D3 provides it (This philosophy is somewhat like that of the Processing language and to a lesser extent Scratch). Under the hood D3 uses SVG and HTML. CSS may optionally be used to simplify development.

This may initially seem strange but the close link between data and visualisation removes problems associated with (for example) Java Swing. Security considerations however mandate use of a local or remote server.

D3 is best for “static” visualisations, where the type of visualisation is known and all that is needed is to present the data: for example bar charts and line graphs.

Basics

The D3 library must be referenced in the web page that calls it in the head section. If you do not need the source and have a reliable internet connection add the following

In the body you need at least one element with an id to hold the content generated. Here two are used.

Content is added to a div that is appended to the body. There is no layering but generated content overlays content generated earlier: The order of generation acts like a depth parameter.

A simple program

The code below shows how to write and style simple text, draw a circle and program simple interaction using D3.

• The D3 library is referenced in the script definition (line 5)

• The D3 code starts in line 10

• The code should be self documenting

• d3.select() is used to specify the div to be used and assign attributes such as height and width

• append() is used to add content to a selected

   

 

 

Deployment

The code above can be run from anywhere on your machine.

If there is a need to read from a file it should be placed on a local server.

This code was developed under OS X using Apache and the file was placed in a directory under the Apache root directory which for OS X is /Library/WebServer/Documents/ It could then be opened in Firefox as localhost:/ where localhost references /Library/WebServer/Documents.