An introduction to d3.js in 10 basic examples.





D3.js is a JavaScript library for manipulating documents based on data. It allows to build absolutely any type of data visualization. This document displays 10 interactive examples illustrating the key concepts of d3, leading to a first basic scatterplot. Note that this online course is a great ressource to get you started with web development.

What is HTML?


→ Explanation:

→ Example:
<!DOCTYPE html>

<!-- Add a title -->
<h1>First html document</h1>

<!-- Add a bit of text -->
<p>This is my first sentence</p>

<!-- Add a link -->
<p>This is <a href="https://www.d3-graph-gallery.com">a link to the d3 graph gallery</a></p>



→ Try:

Custom document style with CSS


→ Explanation:

→ Example:
<!DOCTYPE html>

<!-- Apply specific style to the elements that have the class `inGreen` -->
<style>
  .inGreen { color: green; }
</style>

<!-- Add a title. Note that the class 'inGreen' is given to this title -->
<h1 class="inGreen">First html document</h1>

<!-- Add a bit of text -->
<p>This is my first sentence</p>

<!-- Add a link -->
<p>This is <a href="https://www.d3-graph-gallery.com">a link to the d3 graph gallery</a></p>


→ Try:

Build shapes with SVG


→ Explanation:

→ Example:
<!DOCTYPE html>
<!-- Add a title -->
<h1>First html document</h1>

<!-- Add a bit of text -->
<p>This is my first sentence</p>

<!-- Add a svg shape -->
<svg>
  <circle style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40></circle>
</svg>


→ Try:
<line x1="0" y1="0" x2="10" y2="10" stroke="black"></line>
<rect x="0" y="0" width="10" height="10"></rect>
<circle cx="5" cy="5" r="5"></circle>
<ellipse cx="10" cy="5" rx="10" ry="5"></ellipse>
<polygon points="0,0 10,5 20,0 20,20 10,15 0,20"></polygon>
<polyline points="0,0 10,5 20,0 20,20 10,15 0,20" stroke="black"></polyline>
<path d="M65,10 a50,25 0 1,0 50,25"></path>

Example source

Modify elements with Javascript and D3.js


→ Explanation:

→ Example:
<!DOCTYPE html>
<h1>First html document</h1>

<!-- Add a bit of text -->
<p>This is my first sentence</p>

<!-- Add a svg shape. Note that the 'target' class is attributed to the circle -->
<svg> 
  <circle class="target" style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40></circle>
</svg>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<script>
d3
  .select(".target")  // select the elements that have the class 'target'
  .style("stroke-width", 8) // change their style: stroke width is not equal to 8 pixels
</script>
→ Try:

Console.log() is your friend.


→ Explanation:

The coordinate system


→ Explanation:

→ Example:
<!DOCTYPE html>

<!-- Add a svg area, empty -->
<svg id="dataviz_area" height=200 width=450></svg>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<script>
var svg = d3.select("#dataviz_area")
svg.append("circle")
  .attr("cx", 2).attr("cy", 2).attr("r", 40).style("fill", "blue");
svg.append("circle")
  .attr("cx", 140).attr("cy", 70).attr("r", 40).style("fill", "red");
svg.append("circle")
  .attr("cx", 300).attr("cy", 100).attr("r", 40).style("fill", "green");
</script>
→ Try:

From data to pixel: Scales


→ Explanation:

→ Example:
<!DOCTYPE html>

<!-- Add a svg area, empty -->
<svg id="viz_area" height=200 width=450></svg>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<script>
// Select the svg area
var svg = d3.select("#viz_area")

// Create a scale: transform value in pixel
var x = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([0, 400]);       // This is the corresponding value I want in Pixel
// Try console.log( x(25) ) to see what this x function does.

// Add 3 dots for 0, 50 and 100%
svg.append("circle")
  .attr("cx", x(10)).attr("cy", 100).attr("r", 40).style("fill", "blue");
svg.append("circle")
  .attr("cx", x(50)).attr("cy", 100).attr("r", 40).style("fill", "red");
svg.append("circle")
  .attr("cx", x(100)).attr("cy", 100).attr("r", 40).style("fill", "green");
</script>
→ Try:

Add axis


→ Explanation:
→ Example:
<!DOCTYPE html>

<!-- Add a svg area, empty -->
<svg id="Viz_area" height=200 width=450></svg>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<script>
// Select the svg area
var svg = d3.select("#Viz_area")

// Create a scale: transform value in pixel
var x = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([0, 400]);       // This is the corresponding value I want in Pixel

// Show the axis that corresponds to this scale
svg.call(d3.axisBottom(x));

// Add 3 dots for 0, 50 and 100%
svg.append("circle")
  .attr("cx", x(10)).attr("cy", 100).attr("r", 40).style("fill", "blue");
svg.append("circle")
  .attr("cx", x(50)).attr("cy", 100).attr("r", 40).style("fill", "red");
svg.append("circle")
  .attr("cx", x(100)).attr("cy", 100).attr("r", 40).style("fill", "green");
</script>
→ Try:

Margin & translation


→ Explanation:
→ Example:
<!DOCTYPE html>

<!-- Add a svg area, empty -->
<div id="Area"></div>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 40, bottom: 30, left: 30},
    width = 450 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var sVg = d3.select("#Area")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  // translate this svg element to leave some margin.
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// X scale and Axis
var x = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([0, width]);       // This is the corresponding value I want in Pixel
sVg
  .append('g')
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// X scale and Axis
var y = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([height, 0]);       // This is the corresponding value I want in Pixel
sVg
  .append('g')
  .call(d3.axisLeft(y));

</script>
→ Try:

Data binding


→ Explanation:
→ Example:
<!DOCTYPE html>

<!-- Add a svg area, empty -->
<div id="scatter_area"></div>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 40, bottom: 30, left: 30},
    width = 450 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svG = d3.select("#scatter_area")
  .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 + ")");

// Create data
var data = [ {x:10, y:20}, {x:40, y:90}, {x:80, y:50} ]

// X scale and Axis
var x = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([0, width]);       // This is the corresponding value I want in Pixel
svG
  .append('g')
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// X scale and Axis
var y = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([height, 0]);       // This is the corresponding value I want in Pixel
svG
  .append('g')
  .call(d3.axisLeft(y));

// Add 3 dots for 0, 50 and 100%
svG
  .selectAll("whatever")
  .data(data)
  .enter()
  .append("circle")
    .attr("cx", function(d){ return x(d.x) })
    .attr("cy", function(d){ return y(d.y) })
    .attr("r", 7)


</script>
→ Note:

This is probably the most difficult concept in d3.js. And it is used in almost every single chart. It is actually the power of d3: binding data to elements

It is probably a good idea to read more on this topic. Check d3 in depth and Dashing d3.js.


What's next?


This document is a very very short intro to d3.js. However, it describes the basic concepts that are used in almost every chart.

You're now probably ready to explore the gallery. For each chart section, there is a very basic example to start with.