Instantly share code, notes, and snippets.

@mjhea0 /d3_test.py Secret
Created Oct 2, 2013

Embed
What would you like to do?
d3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing D3</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet" media="screen">
<style>
.container {
padding-top: 100px;
width:400px;
}
.head {
text-align: center;
}
h1 {
font-size: 50px;
}
.slice text {
font-size: 16pt;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<script type="text/javascript">
//** width, height, radius, colors */
var w = 500,
h = 400,
r = 200,
color = d3.scale.category20c();
//** data */
data = [{"label":"yes", "value":15},
{"label":"no", "value":28},
{"label":"maybe", "value":55}];
//** append to container */
var vis = d3.select(".container")
.append("svg:svg")
.data([data])
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + r + "," + r + ")")
var arc = d3.svg.arc()
.outerRadius(r);
var pie = d3.layout.pie()
.value(function(d) { return d.value; });
var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice");
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } )
.attr("d", arc);
arcs.append("svg:text")
.attr("transform", function(d) {
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d, i) { return data[i].label + " - " + data[i].value + "%"; });
</script>
</div>
</body>
</html>
@mjhea0

This comment has been minimized.

Owner

mjhea0 commented Oct 2, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment