Skip to content

Instantly share code, notes, and snippets.

@mjhea0

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 mjhea0 commented Oct 2, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.