Skip to content

Instantly share code, notes, and snippets.

@geoffreyammons

geoffreyammons/LICENSE

Forked from mbhall88/LICENSE
Last active November 22, 2017 21:03
Download ZIP
A static, reusable donut chart for D3.js v4.
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.

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(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module with d3 as a dependency.
define(['d3'], factory)
} else if (typeof module === 'object' && module.exports) {
/* eslint-disable global-require */
// CommonJS
var d3 = require('d3')
module.exports = factory(d3)
/* eslint-enable global-require */
} else {
// Browser global.
// eslint-disable-next-line no-param-reassign
donutChart = factory(root.d3)
}
}(this, function(d3) {
return function() {
var data = [],
width,
height,
margin = {top: 10, right: 10, bottom: 10, left: 10},
colour = d3.scaleOrdinal(d3.schemeCategory20), // colour scheme
variable, // value in data that will dictate proportions on chart
category, // compare data by
padAngle, // effectively dictates the gap between slices
transTime, // transition time
showLabels = true,
showLegend = false,
updateData,
floatFormat = d3.format('.4r'),
cornerRadius, // sets how rounded the corners are on each slice
percentFormat = d3.format(',.2%');
function chart(selection){
// margin.right += 70;
console.log("selection.node(): ", selection.node())
selection.each(function() {
// 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')
var node = selection.node();
var svg = selection.append('svg')
// .attr('width', node.offsetWidth)
// .attr('height', node.offsetHeight);
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
var donutWidth = showLegend ? 0.7 * width : width;
var g = svg.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + 2*height / 3 + ')');
// .attr('transform', 'translate(' + (((width - margin.left - margin.right)/ 2)) + ',' + height / 2 + ')');
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// ===========================================================================================
// ===========================================================================================
// g elements to keep elements within svg modular
g.append('g').attr('class', 'slices');
g.append('g').attr('class', 'labelName');
g.append('g').attr('class', 'lines');
// ===========================================================================================
// ===========================================================================================
// add and colour the donut slices
var path = g.select('.slices')
.selectAll('path')
.data(pie(data))
.enter().append('path')
.attr('fill', function(d) { return colour(d.data[category]); })
.attr('d', arc);
// ===========================================================================================
if (showLabels) {
// ===========================================================================================
// add text labels
var label = g.select('.labelName').selectAll('text')
.data(pie(data))
.enter().append('text')
.attr('dy', '.35em')
.html(updateLabelText)
.attr('transform', labelTransform)
.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 = g.select('.lines')
.selectAll('polyline')
.data(pie(data))
.enter().append('polyline')
.attr('points', calculatePoints);
// ===========================================================================================
}
// ===========================================================================================
// add tooltip to mouse events on slices and labels
selection.selectAll('.labelName text, .slices path').call(toolTip);
// ===========================================================================================
if (showLegend) {
var legend = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "start")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 16 + ")"; });
legend.append("circle")
.attr("cx", width - 70)
.attr("cy", 9)
.attr("r", 4)
.attr("fill", function(d) { return colour(d[category]) });
legend.append("text")
.attr("x", width - 64)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) { return d[category]; });
}
// ===========================================================================================
// FUNCTION TO UPDATE CHART
updateData = function() {
var updatePath = d3.select('.slices').selectAll('path');
var updateLines = d3.select('.lines').selectAll('polyline');
var updateLabels = d3.select('.labelName').selectAll('text');
var data0 = path.data(), // store the current data before updating to the new
data1 = pie(data);
// update data attached to the slices, labels, and polylines. the key function assigns the data to
// the correct element, rather than in order of how the data appears. This means that if a category
// already exists in the chart, it will have its data updated rather than removed and re-added.
updatePath = updatePath.data(data1, key);
updateLines = updateLines.data(data1, key);
updateLabels = updateLabels.data(data1, key);
// adds new slices/lines/labels
updatePath.enter().append('path')
.each(function(d, i) { this._current = findNeighborArc(i, data0, data1, key) || d; })
.attr('fill', function(d) { return colour(d.data[category]); })
.attr('d', arc);
updateLines.enter().append('polyline')
.each(function(d, i) { this._current = findNeighborArc(i, data0, data1, key) || d; })
.attr('points', calculatePoints);
updateLabels.enter().append('text')
.each(function(d, i) { this._current = findNeighborArc(i, data0, data1, key) || d; })
.html(updateLabelText)
.attr('transform', labelTransform)
.style('text-anchor', function(d) { return (midAngle(d)) < Math.PI ? 'start' : 'end'; });
// removes slices/labels/lines that are not in the current dataset
updatePath.exit()
.transition()
.duration(transTime)
.attrTween("d", arcTween)
.remove();
updateLines.exit()
.transition()
.duration(transTime)
.attrTween("points", pointTween)
.remove();
updateLabels.exit()
.remove();
// animates the transition from old angle to new angle for slices/lines/labels
updatePath.transition().duration(transTime)
.attrTween('d', arcTween);
updateLines.transition().duration(transTime)
.attrTween('points', pointTween);
updateLabels.transition().duration(transTime)
.attrTween('transform', labelTween)
.styleTween('text-anchor', labelStyleTween);
updateLabels.html(updateLabelText); // update the label text
// 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', showToolCircle);
// remove the tooltip when mouse leaves the slice/label
selection.on('mouseout', function () {
d3.selectAll('.toolCircle').remove();
});
}
function showToolCircle(data) {
g.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', '.7em')
.style('text-anchor', 'middle'); // centres text in tooltip
g.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);
}
// 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];
var value = 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;
}
// calculate the points for the polyline to pass through
function calculatePoints(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]
}
function labelTransform(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 + ')';
}
function updateLabelText(d) {
return d.data[category] + ': <tspan>' + percentFormat(d.data[variable]) + '</tspan>';
}
// function that calculates transition path for label and also it's text anchoring
function labelStyleTween(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t){
var d2 = interpolate(t);
return midAngle(d2) < Math.PI ? 'start':'end';
};
}
function labelTween(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t){
var d2 = interpolate(t),
pos = outerArc.centroid(d2); // computes the midpoint [x,y] of the centre line that would be
// generated by the given arguments. It is defined as startangle + endangle/2 and innerR + outerR/2
pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1); // aligns the labels on the sides
return 'translate(' + pos + ')';
};
}
function pointTween(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t){
var d2 = interpolate(t),
pos = outerArc.centroid(d2);
pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
return [arc.centroid(d2), outerArc.centroid(d2), pos];
};
}
// function to calculate the tween for an arc's transition.
// see http://bl.ocks.org/mbostock/5100636 for a thorough explanation.
function arcTween(d) {
var i = d3.interpolate(this._current, d);
this._current = i(0);
return function(t) { return arc(i(t)); };
}
function findNeighborArc(i, data0, data1, key) {
var d;
return (d = findPreceding(i, data0, data1, key)) ? {startAngle: d.endAngle, endAngle: d.endAngle}
: (d = findFollowing(i, data0, data1, key)) ? {startAngle: d.startAngle, endAngle: d.startAngle}
: null;
}
// Find the element in data0 that joins the highest preceding element in data1.
function findPreceding(i, data0, data1, key) {
var m = data0.length;
while (--i >= 0) {
var k = key(data1[i]);
for (var j = 0; j < m; ++j) {
if (key(data0[j]) === k) return data0[j];
}
}
}
function key(d) {
return d.data[category];
}
// Find the element in data0 that joins the lowest following element in data1.
function findFollowing(i, data0, data1, key) {
var n = data1.length, m = data0.length;
while (++i < n) {
var k = key(data1[i]);
for (var j = 0; j < m; ++j) {
if (key(data0[j]) === k) return data0[j];
}
}
}
// ===========================================================================================
});
}
// 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;
// if (showLegend) {
// margin.right += 60;
// }
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;
};
chart.transTime = function(value) {
if (!arguments.length) return transTime;
transTime = value;
return chart;
};
chart.showLabels = function(value) {
if (!arguments.length) return showLabels;
showLabels = value;
return chart;
};
// chart.toolTipHTML = function(value) {
// if (!arguments.length) return toolTipHTML;
// toolTipHTML = value;
// return chart;
// };
chart.showLegend = function(value) {
if (!arguments.length) return showLegend;
showLegend = value;
// margin.right += 60;
return chart;
};
chart.data = function(value) {
if (!arguments.length) return data;
data = value;
if (typeof updateData === 'function') updateData();
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