Data Visualization with D3 journal Part: 1

4 min readJun 14, 2018

D3 Introduction:

Its a JavaScript library which is used to create dynamic interactive data visualisations in browser. D3 actually stands for Data Driven Documents. It is quite famous due to its universal adaptability because it has been made using common web standards, namely HTML, CSS, and Scalable Vector Graphics (SVG). It supports various data visualisation forms like bar chart, scatter plot etc.

I have divided my understanding from d3 challenges as follows:

How to modify elements in DOM using d3

We can modify the DOM using D3 like the following. Here we are adding a h1 element in the body and also updating its text

<body>
 <script>
  d3.select("body").append("h1").text("Learning D3");
 </script>
</body>

2. Styling using d3

In this example we are modifying the text style of h1 element created in the last example.

<body>
 <script>
  d3.select("body").append("h1").text("Learning D3").style("font-family","verdana");
 </script>
</body>

3. How to iterate over a dataSet and create elements respectively.

There are couple of things that needed to be discussed here. Here we are taking our data set to be an Array of integers. In the first line we are selecting our body element like what we have been doing in previous examples. Later on we are calling two extra methods. In the first one “.data(dataset)” we are setting our array data set in d3 element and then we have to call “enter()”. Now this d3 will iterate over each element in the array and create separate h2 element for each item present in the array. The text value for each h2 will correspond to the value of each item in array.

<body>
 <script> const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
 d3.select("body")
  .selectAll("h2")
  .data(dataset)
  .enter()
  .append("h2")
  .text((d) => (d + " USD")); </script>
</body>

4. SVG Introduction

SVG stands for scalable vector graphics. Here “scalable” means that, if you zoom in or out on an object, it would not appear pixelated. It is used to make common geometric shapes. Since D3 maps data into a visual representation, it uses SVG to create the shapes for the visualisation. SVG shapes for a web page must go within an HTML ‘svg’ tag. Here is an example of creating ‘svg’ element with a specific width and height. In the next few examples we will draw different shapes on this svg for various visualisations.

<style>
 svg {
  background-color: pink;
 }
</style>
<body>
 <script>
  const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
  const w = 500;
  const h = 100;
  const svg = d3.select("body")
  .append("svg")
  .attr("width",w)
  .attr("height",h);
 </script>
</body>

5. How to draw different shapes using ‘svg’ like Rect, Circle etc

As we have seen in the last section, svg supports different shapes drawing for various sort of data visualisations. Like commonly ‘rectangle’ shapes are used to draw Bar charts. This is an example of how we can draw a bar chart using a certain dataset.

<body>
 <script>  const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];  const w = 500;
  const h = 100;
  const svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);  svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 30)
  .attr("y", (d, i) => {
  return h - (d * 3);
  })
  .attr("width", 25)
  .attr("height", (d, i) => 3 * d); </script>
</body>

There are couple of points that needed to discuss here related to the above code. We are creating svg element like what we did in the previous example and additionally we are adding ‘rect’ for each data item in the array. We can provide a function for ‘x’ and ‘y’ position and also for size (width and height). For setting up ‘y’ position we are doing an additional step to invert the coordinate system because our coordinate system starts with top left.

We can also make scatterplot using circle shape of ‘svg’. Here we would need three parameters x,y and radius of that circle. This is an eaxmaple of drawing a scatterplot:

<body>
 <script>  const dataset = [
  [ 34,    78 ],
  [ 109,   280 ],
  [ 310,   120 ],
  [ 79,    411 ],
  [ 420,   220 ],
  [ 233,   145 ],
  [ 333,   96 ],
  [ 222,   333 ],
  [ 78,    320 ],
  [ 21,    123 ]
  ];
  const w = 500;
  const h = 500;  const svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);
  svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle")
  .attr("cx",(d)=>d[0])
  .attr("cy",(d)=> h - d[1])
  .attr("r",5);
 </script>
</body>

Here we have a dataset of 2d Array. Each item corresponds to a subArray of two items ‘x’ and ‘y’. Here we are using fixed radius of units 5.

7. Axes, Scale, domain, Range

D3 gives support to define your scale using domain and Range which eventually can be used to draw axes. Domain represent the range of your input data. Minimum and maximum values of your domain combined to make domain. Likewise, the size of your canvas represents the Range on which you will display the data. In the following example we are creating x and y axis using the input data values and canvas range.

<body>
 <script>
  const scale = d3.scaleLinear();
  scale.domain([250,500])
  .range([10,150]);
  const output = scale(50);
  d3.select("body")
  .append("h2")
  .text(output);
 </script>
</body>

According to my opinion data visualisation has steep learning curve and it takes some time to grasp all the concepts but its fun in the end. Once you are familiar with some of its basic concepts then you can move forward with better speed.

I am currently working on the projects linked with this certification. You can track my progress here.

Data Visualization with D3 journal Part: 1

Written by Salman khalid