I am struggling to get my Pie chart created using D3.JS to show up when I load my file in Chrome or any browser (index.html). It only displays the title without the actual pie chart.
I'm not sure where the issue lies and why my pie chart is not appearing. Any assistance on this matter would be greatly appreciated. Thank you.
style.css -
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.arc2 text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc2 path {
stroke: #fff;
}
pie.js -
// margin
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 500 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom,
radius = width/2;
// color range
var color = d3.scaleOrdinal()
.range(["#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5", "#2196F3", "#1E88E5", "#1976D2"]);
// pie chart arc. Need to create arcs before generating pie
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0);
// donut chart arc
var arc2 = d3.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
// arc for the labels position
var labelArc = d3.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
// generate pie chart and donut chart
var pie = d3.pie()
.sort(null)
.value(function(d) { return d.count; });
// define the svg for pie chart
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// define the svg donut chart
var svg2 = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// import data
d3.csv("data.csv", function(error, data) {
if (error) throw error;
// parse data
data.forEach(function(d) {
d.count = +d.count;
d.fruit = d.fruit;
})
// "g element is a container used to group other SVG elements"
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
// append path
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.fruit); })
// transition
.transition()
.ease(d3.easeLinear)
.duration(2000)
.attrTween("d", tweenPie);
// append text
g.append("text")
.transition()
.ease(d3.easeLinear)
.duration(2000)
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.data.fruit; });
// "g element is a container used to group other SVG elements"
var g2 = svg2.selectAll(".arc2")
.data(pie(data))
.enter().append("g")
.attr("class", "arc2");
// append path
g2.append("path")
.attr("d", arc2)
.style("fill", function(d) { return color(d.data.fruit); })
.transition()
.ease(d3.easeLinear)
.duration(2000)
.attrTween("d", tweenDonut);
// append text
g2.append("text")
.transition()
.ease(d3.easeLinear)
.duration(2000)
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.data.fruit; });
});
// Helper function for animation of pie chart and donut chart
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) { return arc(i(t)); };
}
function tweenDonut(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) { return arc2(i(t)); };
}
CSV file (data.csv)
fruit,count
Apple,10
Strawberry,20
Banana,15
Blueberry,20,
Kiwi,30
Plum,5
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pie Charts</title>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Load D3 -->
<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>
<body>
<h2>Pie Chart and Donut Chart</h2>
<script type="text/javascript" src="js/pie.js"></script>
</body>
</html>