Did you know that you can navigate the posts by swiping left and right?

D3 Examples and Building Blocks

September 18, 2016, April 20, 2017 | Comments

category: VISUALIZATION
d3 html css javascript

Before we dig into each D3 modules, let’s first take a few simple D3 examples to get a main idea of the code. The followings are some examples I pull from Bl.ock Builder.

Example 1: bar chart

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

</script>

Example 2: line chart

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var formatDate = d3.time.format("%d-%b-%y");

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", type, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});

function type(d) {
  d.date = formatDate.parse(d.date);
  d.close = +d.close;
  return d;
}

</script>

Example 3: world map

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
    height = 500;

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(150)
    .rotate([-180,0]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geo.path()
    .projection(projection);

var g = svg.append("g");

// load and display the World
d3.json("world-110m2.json", function(error, topology) {
    g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

</script>
</body>
</html>

From the three D3 examples above we can see, three are three major components of D3 project: HTML, CSS and JavaScript.

1. HTML

<!DOCTYPE html>
<meta charset="utf-8">

<body>

</body>
</html>

The Hypertext Markup Language (HTML) resource is the main markup language for displaying web pages. HTML elements are the building blocks of the HTML web page. The elements consist of a pair of tags (starting and ending tags) and the textual or graphical content inside of the tags. For example, <body> tag defines the document’s body.

2. CSS

/*Example 1*/
<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>

/*Example 2*/
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>

/*Example 3*/
<style>

path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}

</style>

The Cascading Style Sheet (CSS) resource is the style sheet language used for describing the presentation of the document. The presentation includes both the look as well as the formatting. There are three ways of adding CSS formatting to HTML elements. The examples above show a way, putting CSS within the <style> element which is called as ‘Internal Style Sheet’.

You can also separate all our CSS codes into a standalone piece and let HTML to call it by using the <link> element. For example:

<link rel="stylesheet" type="text/css" href="mystyle.css">

This is so-called ‘External Style Sheet’.

The third way of add CSS formatting is ‘Inline Styles’ which play as an optional parameter of HTML tags by only changing its styles. For example:

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

3. JavaScript

If we say HTML defines the contents of web page and CSS formats it, JavaScript is the programming language which gives web page functionality. In the examples, the remaining codes not belonging to HTML or CSS are basically JavaScript codes with some D3 flavors. Like CSS, there are also a couple of places where JavaScript could be embedded.

You can call in JavaScript from external sources and include it inside <script> tag under <body> tag, like Example 3:

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
</body>

Or instead of calling external JavaScript code, you can place JavaScript code directly inside <script> tag. In the three examples above, the longest codes inside <script> tags are used by this way.

A third way, which is not shown in our examples, is to put JavaScript inside <head> tag which is outside the scope of <head> tag.

All of three, HTML, CSS and JavaScript, are different programming languages themselves. If you feel interested in study more, please check reference 1 - 3 for details.

4. DOM, SVG and Canvas

Document Object Model (DOM) is a convention for representing and interacting with objects in HTML, XML, and XHTML documents. The DOM is separated into three parts: Core, HTML, and XML. The DOM allows programs and scripts to dynamically access and update the structure, content, and style of a document.

Scalable Vector Graphics (SVG) is a family of specifications for creating two-dimensional vector graphics. Vector graphics are not created out of pixels. Vector graphics are created with paths having a start and end point, as well as points, curves and angles in between. Since Vector Graphics are not created out of pixels, they can be scaled up to larger or smaller sizes without losing image quality. Tag <svg> is a container for SVG graphics.

Canvas is also a language from drawing 2D graphics, but pixel by pixel. Different from SVG, Canvas is essentially a graph container when moving between different browsers, you must call a script (usually JavaScript) to draw graphics. Tag <canvas> is a container for Canvas graphics.

5. Browser Support

Finally, we need a browser to present our D3 project. According to D3 wiki, majority ‘modern’ browsers support D3 except IE8 and older versions.

6. A Template for D3

From the above examples and brief introduction to HTML/CSS/JavaScript, I want to set up a template for D3 in order to illustrate how to apply it into different charts in the following blogs. Also, this template is based on D3 version 4.0 and above.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

<\style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

</script>
</body>
</html>
<body>

</body>

Let’s start our D3 journey!


Reference:

(1). HTML5 Tutorial from W3School.com, http://www.w3schools.com/html/default.asp.
(2). CSS Tutorial from W3School.com, http://www.w3schools.com/css/default.asp.
(3). JavaScript Tutorial from W3School.com, http://www.w3schools.com/js/default.asp.