Skip to content

Instantly share code, notes, and snippets.

@davidtucker
Created November 19, 2013 21:47
Show Gist options
  • Save davidtucker/7553156 to your computer and use it in GitHub Desktop.
Save davidtucker/7553156 to your computer and use it in GitHub Desktop.
Basic NVD3 Pie Chart
<html>
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.js"></script>
</head>
<body>
<div id="pieChart">
<svg></svg>
</div>
<script>
var width = 500;
var height = 500;
var chart = {};
nv.addGraph(function() {
chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true)
.showLegend(false)
.donut(false)
.width(width)
.height(height);
d3.select("#pieChart svg")
.datum([
{label: "Male",value: 5},
{label: "Female",value: 3}
])
.transition()
.duration(500)
.call(chart);
return chart;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment