D3.js donut chart component
by Darth Vader
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="donut" style="height: 200px; width: 200px;"></div>
CSS
.donut {
border: thin solid black;
}
JavaScript
var $tcsDonut = (function () {
var constants = {
toRadians: function (input) {
return input * Math.PI / 50;
},
defaultWidth: 200,
defaultHeight: 200,
minWidth: 50,
marginUnits: 24,
colors: ["#bbbbbb", "#d40f0f", "#f3e220", "#22b322", "#22b322"],
domain: [0, 40, 80, 100],
colorMap: undefined,
mapColor: function (input) {
var mapper = this.colorMap || (this.colorMap = d3.scale.threshold().domain(this.domain).range(this.colors));
return mapper(input);
}
};
function arcTween(transition, newAngle, arcRef) {
transition.attrTween("d", function (d) {
var interpolate = d3.interpolate(d.endAngle, newAngle);
return function (t) {
d.endAngle = interpolate(t);
return arcRef(d);
};
});
};
function getDimensions(clientRect, container) {
var dimensions = {};
if (clientRect.width !== clientRect.height || clientRect.width == undefined) {
var autoWidth = Math.min(clientRect.width, clientRect.height) || constants.defaultWidth;
if (autoWidth < constants.minWidth) {
autoWidth = constants.defaultWidth;
}
container.style("height", autoWidth).style("width", autoWidth);
dimensions.width = autoWidth;
dimensions.height = autoWidth;
} else {
dimensions.width = clientRect.width;
dimensions.height = clientRect.height;
}
dimensions.top = dimensions.width / (constants.marginUnits * 2);
dimensions.left = dimensions.width / (constants.marginUnits * 2);
dimensions.margin = dimensions.width / constants.marginUnits;
var translationCoordinates = {
x: dimensions.width / 2,
y: dimensions.height / 2
}
dimensions.translationCoordinates = translationCoordinates;
...