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