Home D3 D3 Data-Driven Documents

D3 Data-Driven Documents

By
LiamWho
-
1865
0

Contents

What is D3?

What can D3 do? [click]
D3 makes graphics within a web page from data
It does data visualisations

  • D3 is an abbreviation of Data-Driven Documents
  • It’s another JavaScript library file
  • See and get latest version 4 [here]
  • Link to D3 using <script> element like this:
<script src="https://d3js.org/d3.v4.min.js"></script>
  • There are no predefined charts in D3
  • Just shapes, lines and text
  • For example, to create a bar chart you must create the bars, axes, and text yourself
  • This allows you to devise/create new types of custom charts
  • But you build from the ground up
  • D3 uses SVG to do the drawing

SVG

  • SVG is Scalable Vector Graphics
  • There are two kinds of digital graphic – raster and vector
  • Raster images like photographs use many colored pixels to form an image, e.g. JPEGs,
  • GIFs and PNGs
  • They can’t be resized much without loss of resolution
  • A vector graphic appears like any image, but it is a mathematical definition
  • Vector images never loses definition
  • SVG is ideal for data visualisations
  • HTML has a <svg> tag
  • It can be placed anywhere inside the <body> tag
  • D3 uses the <svg> tag as a container to put charts into
  • The <svg> tag can only contain specific graphical elements like lines, rectangles, etc.
  • D3 adds graphical elements to the SVG and binds data to them
  • For example, D3 could read 50 data values from an array and add 50 circles to the SVG. Have a look at this SVG Tutorial

SVG Example

<html>
<body>
<svg width="300" height="200">
  <rect x="0" y="0" width="300" height="200" fill="red" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle">SVG</text>
</svg>
</body>
</html>

SVG has some basic shapes:

Rectangles
Circle
Ellipse
Line
Polyline
Polygon
Path (alternative to Polyline and Polygon)

See and learn them here

SVG Bar Chart

And the code…

<html>
<body>

<svg width="300" height="200">

  <rect x="0" y="0" width="100" height="50" fill="steelblue" />
  <rect x="0" y="60" width="200" height="50" fill="steelblue" />
  <rect x="0" y="120" width="300" height="50" fill="steelblue" />

  <text x="10" y="35" font-size="20" fill="white">100</text>
  <text x="10" y="95" font-size="20" fill="white">200</text>
  <text x="10" y="155" font-size="20" fill="white">300</text>

</svg>

</body>
</html>
  • The values (in blue) are very specific and static
  • JavaScript and D3 could create this dynamically using a dataset
  • Previously, the values in our bar chart were static
  • JavaScript could be used to draw it dynamically like this…

SVG Bar Chart Version 2

svgBarChart2.html

<html>
<head>
<script type="text/javascript" src="svgBarChart2.js"></script>
</head>
<body>

<svg id="chart">
</svg>

</body>
</html>

svgBarChart2.js

var data = [100,200,300]; // can add new values

window.onload = function() {
  document.getElementById('chart').setAttribute('width',300);
  document.getElementById('chart').setAttribute('height',data.length*60);

  for(var i=0;i<data.length;i++) {
    var rect=document.createElementNS("http://www.w3.org/2000/svg","rect");
    rect.setAttribute('x',0);
    rect.setAttribute('y',i*60);
    rect.setAttribute('width',data[i]);
    rect.setAttribute('height',50);
    rect.setAttribute('fill','steelblue');
    document.getElementById('chart').appendChild(rect);
  }
}


Setup D3

Download D3 from here
Add d3.js or d3.min.js into a new folder called d3
Use it with a <script> tag like so:

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="d3.min.js"></script>
</head>

...
...

D3 Bar Chart

Video….

Previous articleEnterprise Applications Assignment 2017
Next articleInstall Apache Tomcat 8
LiamWho