Introduction To D3

Simple Graphics And Text Using D3

Image Source - http://digitalsteampunk.blogspot.com
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

<script src="http://d3js.org/d3.v2.js"></script>

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

<div id="TextDiv"></div>

<div id="graphicsDiv"></div>

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

 

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  5. <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>

  6. </head>

  7. <body>

  8. <div id="TextDiv"></div>

  9. <div id="graphicsDiv"></div>

  10. <script type="text/javascript">

  11.  

  12. /**

  13. This script writes code to a <div> reserved for text then draws a circle in an SVG <div>

  14. The circle changes colour when the mouse enters or leaves the circle

  15. */

  16.  

  17. var codecolour = "blue";

  18.  

  19. // code to be executed

  20. var selectTextDiv = ' var TextHTML= d3.select("#TextDiv")';

  21. var addNewParagraph = 'TextHTML.append("p").style("color", "red").text(" This is a New paragraph!");';

  22. // select the text div

  23. eval(selectTextDiv)

  24. // write code using chosen colour

  25. TextHTML.append("p").style("color", codecolour).text(selectTextDiv);

  26. TextHTML.append("p").style("color", codecolour).text(addNewParagraph);

  27. // execute the code

  28. eval(addNewParagraph)

  29.  

  30. TextHTML.append("p").style("color", codecolour)

  31. .text("Now drawing a blue circle that changes color when the mouse is over it and changes back if the mouse leaves");

  32.  

  33. // Now to draw the circle

  34.  

  35. // select the graphicsDiv and give it height and width

  36. var graphicsSVG = d3.select("#graphicsDiv") .append("svg").attr("width", 100).attr("height", 100);

  37.  

  38. // add a circle to the graphicsDiv: attr mans “atribute, r is radius & (cx,cy) the centre

  39. graphicsSVG.append("circle").style("stroke", "gray").style("fill", "blue").attr("r", 40).attr("cx", 50).attr("cy", 50)

  40. // define mouseover and mouseout behaviour

  41. .on("mouseover", function(){d3.select(this).style("fill", "green");})

  42. .on("mouseout", function(){d3.select(this).style("fill", "blue");});

  43. </script>

  44. </body>

  45. </html>

 

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:/<path to file> where localhost references /Library/WebServer/Documents

You can see more about D3 on http://digitalsteampunk.blogspot.co.uk/ : http://digitalsteampunk.blogspot.com/2013/08/simple-particle-motion-simulation-using_24.html and http://digitalsteampunk.blogspot.com/2013/07/drawing-linegraph-with-d3.html

Further Reading

[1] http://christopheviau.com/d3_tutorial/

[2] http://d3js.org/ The home of D3

 


26 0
0

Related Articles

Kindly login to comment on this post.
There are no comments yet.