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.

Copy link
Owner Author

mjhea0 commented Oct 2, 2013

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