<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script src='http://mbostock.github.com/d3/d3.layout.js' type='text/javascript'></script>
<title>JS Bin</title>
</head>
<body>
<div id="chart"></div>
</body>
</html>
var data = [
{name: "Sample1", val: 100},
{name: "Sample2", val: 1000},
{name: "Sample3", val: 800},
{name: "Sample4", val: 400},
{name: "Sample5", val: 200}
];
var margin = {top: 40, right: 40, bottom: 40, left: 40};
var w = 600 - margin.left - margin.right,
h = 400 - margin.top - margin.bottom,
r = Math.min(w, h) / 2,
labelr = r + 20, // radius for label anchor
donut = d3.layout.pie().sort(null),
inner = r * 0.6,
arc = d3.svg.arc().innerRadius(inner).outerRadius(r),
arcOver = d3.svg.arc().innerRadius(inner + 5).outerRadius(r + 5);
var color = d3.scale.category20c();
var total = d3.sum(data, function(d) { return d3.sum(d3.values(d));});
var vis = d3.select("body")
.append("svg")
.data([data])
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom);
var textTop = vis.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("font-family", "Segoe UI")
.attr("font-size", r/7 + "px")
.attr("fill", "#bbb")
.attr("x", (w + margin.left + margin.right) / 2)
.attr("y", ((h + margin.top + margin.bottom) / 2) - (r/7)/2)
.text("TOTAL");
var textBottom = vis.append("text")
.attr("dy", ".35em")
.attr("font-family", "Segoe UI")
.style("text-anchor", "middle")
.attr("font-weight", "bold")
.attr("font-size", r/6 + "px")
.text(total)
.attr("x", (w + margin.left + margin.right) / 2)
.attr("y", ((h + margin.top + margin.bottom) / 2) + (r/6)/2);
var arcs = vis.selectAll("arc")
.data(donut.value(function(d) { return d.val;}))
.enter().append("g")
.attr("class", "arc")
.attr("transform", "translate(" + (w + margin.left + margin.right) / 2 + "," + (h + margin.top + margin.bottom) / 2 + ")");
arcs.append("path")
.attr("fill", function(d) { return color(d.data.name); })
.attr("d", arc)
.style("stroke", "white")
.style("stroke-width", 2);
arcs.append("text")
.attr("transform", function(d) {
var c = arc.centroid(d),
x = c[0],
y = c[1],
// pythagorean theorem for hypotenuse
h = Math.sqrt(x*x + y*y);
return "translate(" + (x/h * labelr) + ',' +
(y/h * labelr) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
// are we past the center?
return (d.endAngle + d.startAngle)/2 > Math.PI ?
"end" : "start";
})
.text(function(d) { return d.data.name; });
arcs.selectAll("path")
.on("mouseover", function(d){
d3.select(this).transition()
.duration(200)
.attr("d", arcOver);
textTop.text(d.data.name);
textBottom.text(d.data.val);
d3.select(this).style("fill", "red");
/*
var fontSize = r/3.5;
var xPos = (w + margin.left + margin.right) / 2;
var yPos = ((h + margin.top + margin.bottom) / 2) + fontSize / 2;
vis.append("text")
.attr("x", xPos)
.attr("y", yPos)
.attr("id", "tooltip")
.style("text-anchor", "middle")
.attr("font-weight", "bold")
.attr("font-size", fontSize + "px")
.style("fill", "black")
.text(d.data.val);
*/
})
.on("mouseout", function(){
d3.select(this).transition()
.duration(100)
.attr("d", arc);
//vis.selectAll("#tooltip").remove();
d3.select(this).style("fill", function(d) { return color(d.data.name); });
textTop.text("TOTAL");
textBottom.text(total);
});
var legend = d3.select("body").append("svg")
.attr("id", "legend")
.attr("width", r)
.attr("height", r * 2)
.selectAll("g")
.data(color.domain().slice())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) { return d;});
Output
300px
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |