Skip to content

Instantly share code, notes, and snippets.

@lorenzopub

lorenzopub/.block

Created November 15, 2017 08:21
Show Gist options
  • Save lorenzopub/8495c1801fa07b9fe23ad8a3052ea4ba to your computer and use it in GitHub Desktop.
Save lorenzopub/8495c1801fa07b9fe23ad8a3052ea4ba to your computer and use it in GitHub Desktop.
Download ZIP
A static, reusable donut chart for D3.js v4.
Raw
.block
license: mit
Raw
README.md

I'm relatively new to d3.js and know it can be tough getting started as a lot of bl.ocks and tutorials don't have what I would consider adequate comments.

One of the first real-world problems I had to tackle with d3 was a donut chart (which would eventually need to be dynamic).
I flew around stackoverflow, google, bl.ocks, and everything inbetween trying to get my head around how to make one. I eventually got something up and running but the code was a bowl of spaghetti and I had no idea how it was actually working.

What I decided to do in the end was to start with a clean slate and build the pieces one-by-one. I have been helped immensely by juancb's bl.ock and the Pie Chart Update series by Mike Bostock.

Two of the main goals I wanted to achieve with making this were:

  1. Make the chart reusable. Which, in my opinion, is one of the most important concepts in d3.
  2. Make it using d3 v4, as most tutorials I come across are still in d3 v3.

Going through the process of making a chart reusable really helps in understanding how all the pieces fit together and boosts your understanding of how charts are constructed.

I worked through the tutorials mentioned above until I understood (pretty much) every line of code. I went to town on the comments because:

  • I will be very thankful for it in 6 months time.
  • I hope it will help out someone else in my position 3 months ago.

This donut chart has a tooltip that appears in the centre of the donut when the mouse enters a chart slice or hovers over a species name. By making the chart in this reusable fashion I think you should be able to easily tweak any settings to meet your needs. If you do need any help or advise with this those feel free to get in touch.

This is my first bl.ock so please let me know if there are any issues or things I can improve on.
I am also working on a dynamic, updating version of this so I will add and link that when it is done.

Next: Dynamic, reusable chart.

forked from geoffreyammons's block: A static, reusable donut chart for D3.js v4.

Raw
index.css
body {
font-family: 'Roboto', sans-serif;
color: #333333;
}
/* Add shadow effect to chart. If you don't like it, get rid of it. */
svg {
-webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.3) );
filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.25) );
}
/*Styling for the lines connecting the labels to the slices*/
polyline{
opacity: .3;
stroke: black;
stroke-width: 2px;
fill: none;
}
/* Make the percentage on the text labels bold*/
.labelName tspan {
font-style: normal;
font-weight: 700;
}
/* In biology we generally italicise species names. */
.labelName {
font-size: 0.9em;
font-style: italic;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reusable Donut Chart in D3 v4</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var donut = donutChart()
.width(960)
.height(500)
.cornerRadius(3) // sets how rounded the corners are on each slice
.padAngle(0.015) // effectively dictates the gap between slices
.variable('Probability')
.category('Species');
d3.tsv('species.tsv', function(error, data) {
if (error) throw error;
d3.select('#chart')
.datum(data) // bind data to the div
.call(donut); // draw chart in div
});
</script>
</body>
</html>
Raw
index.js
function donutChart() {
var width,
height,
margin = {top: 10, right: 10, bottom: 10, left: 10},
colour = d3.scaleOrdinal(d3.schemeCategory20c), // colour scheme
variable, // value in data that will dictate proportions on chart
category, // compare data by
padAngle, // effectively dictates the gap between slices
floatFormat = d3.format('.4r'),
cornerRadius, // sets how rounded the corners are on each slice
percentFormat = d3.format(',.2%');
function chart(selection){
selection.each(function(data) {
// generate chart
// ===========================================================================================
// Set up constructors for making donut. See https://github.com/d3/d3-shape/blob/master/README.md
var radius = Math.min(width, height) / 2;
// creates a new pie generator
var pie = d3.pie()
.value(function(d) { return floatFormat(d[variable]); })
.sort(null);
// contructs and arc generator. This will be used for the donut. The difference between outer and inner
// radius will dictate the thickness of the donut
var arc = d3.arc()
.outerRadius(radius * 0.8)
.innerRadius(radius * 0.6)
.cornerRadius(cornerRadius)
.padAngle(padAngle);
// this arc is used for aligning the text labels
var outerArc = d3.arc()
.outerRadius(radius * 0.9)
.innerRadius(radius * 0.9);
// ===========================================================================================
// ===========================================================================================
// append the svg object to the selection
var svg = selection.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
// ===========================================================================================
// ===========================================================================================
// g elements to keep elements within svg modular
svg.append('g').attr('class', 'slices');
svg.append('g').attr('class', 'labelName');
svg.append('g').attr('class', 'lines');
// ===========================================================================================
// ===========================================================================================
// add and colour the donut slices
var path = svg.select('.slices')
.datum(data).selectAll('path')
.data(pie)
.enter().append('path')
.attr('fill', function(d) { return colour(d.data[category]); })
.attr('d', arc);
// ===========================================================================================
// ===========================================================================================
// add text labels
var label = svg.select('.labelName').selectAll('text')
.data(pie)
.enter().append('text')
.attr('dy', '.35em')
.html(function(d) {
// add "key: value" for given category. Number inside tspan is bolded in stylesheet.
return d.data[category] + ': <tspan>' + percentFormat(d.data[variable]) + '</tspan>';
})
.attr('transform', function(d) {
// effectively computes the centre of the slice.
// see https://github.com/d3/d3-shape/blob/master/README.md#arc_centroid
var pos = outerArc.centroid(d);
// changes the point to be on left or right depending on where label is.
pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
return 'translate(' + pos + ')';
})
.style('text-anchor', function(d) {
// if slice centre is on the left, anchor text to start, otherwise anchor to end
return (midAngle(d)) < Math.PI ? 'start' : 'end';
});
// ===========================================================================================
// ===========================================================================================
// add lines connecting labels to slice. A polyline creates straight lines connecting several points
var polyline = svg.select('.lines')
.selectAll('polyline')
.data(pie)
.enter().append('polyline')
.attr('points', function(d) {
// see label transform function for explanations of these three lines.
var pos = outerArc.centroid(d);
pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
return [arc.centroid(d), outerArc.centroid(d), pos]
});
// ===========================================================================================
// ===========================================================================================
// add tooltip to mouse events on slices and labels
d3.selectAll('.labelName text, .slices path').call(toolTip);
// ===========================================================================================
// ===========================================================================================
// Functions
// calculates the angle for the middle of a slice
function midAngle(d) { return d.startAngle + (d.endAngle - d.startAngle) / 2; }
// function that creates and adds the tool tip to a selected element
function toolTip(selection) {
// add tooltip (svg circle element) when mouse enters label or slice
selection.on('mouseenter', function (data) {
svg.append('text')
.attr('class', 'toolCircle')
.attr('dy', -15) // hard-coded. can adjust this to adjust text vertical alignment in tooltip
.html(toolTipHTML(data)) // add text to the circle.
.style('font-size', '.9em')
.style('text-anchor', 'middle'); // centres text in tooltip
svg.append('circle')
.attr('class', 'toolCircle')
.attr('r', radius * 0.55) // radius of tooltip circle
.style('fill', colour(data.data[category])) // colour based on category mouse is over
.style('fill-opacity', 0.35);
});
// remove the tooltip when mouse leaves the slice/label
selection.on('mouseout', function () {
d3.selectAll('.toolCircle').remove();
});
}
// function to create the HTML string for the tool tip. Loops through each key in data object
// and returns the html string key: value
function toolTipHTML(data) {
var tip = '',
i = 0;
for (var key in data.data) {
// if value is a number, format it as a percentage
var value = (!isNaN(parseFloat(data.data[key]))) ? percentFormat(data.data[key]) : data.data[key];
// leave off 'dy' attr for first tspan so the 'dy' attr on text element works. The 'dy' attr on
// tspan effectively imitates a line break.
if (i === 0) tip += '<tspan x="0">' + key + ': ' + value + '</tspan>';
else tip += '<tspan x="0" dy="1.2em">' + key + ': ' + value + '</tspan>';
i++;
}
return tip;
}
// ===========================================================================================
});
}
// getter and setter functions. See Mike Bostocks post "Towards Reusable Charts" for a tutorial on how this works.
chart.width = function(value) {
if (!arguments.length) return width;
width = value;
return chart;
};
chart.height = function(value) {
if (!arguments.length) return height;
height = value;
return chart;
};
chart.margin = function(value) {
if (!arguments.length) return margin;
margin = value;
return chart;
};
chart.radius = function(value) {
if (!arguments.length) return radius;
radius = value;
return chart;
};
chart.padAngle = function(value) {
if (!arguments.length) return padAngle;
padAngle = value;
return chart;
};
chart.cornerRadius = function(value) {
if (!arguments.length) return cornerRadius;
cornerRadius = value;
return chart;
};
chart.colour = function(value) {
if (!arguments.length) return colour;
colour = value;
return chart;
};
chart.variable = function(value) {
if (!arguments.length) return variable;
variable = value;
return chart;
};
chart.category = function(value) {
if (!arguments.length) return category;
category = value;
return chart;
};
return chart;
}
Raw
LICENSE
MIT License
Copyright (c) 2017 Michael Hall
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Raw
species.tsv
Species Probability Error
Halobacillus halophilus 0.10069108308662117 0.045296463390387814
Staphylococcus epidermidis 0.04076903848429238 0.0096463390387814
Chromobacterium violaceum 0.10318269548054262 0.03390387814
Pseudomonas TKP 0.05880239155316942 0.0045296463390387745
Bacillus subtilis 0.1908578484310064 0.0765387676
Pseudomonas fluorescens 0.10663641563053275 0.0045296463390387676
Micrococcus luteus 0.04523420524963677 0.006463390387814
Pseudoalteromonas SM9913 0.08033880363132218 0.05296463390387814
Enterococcus faecalis 0.07214855298991701 0.0077390387814
Escherichia coli 0.2014657031774047 0.100646339038795
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment