CODEWITHSUNDEEP
javascriptd3.jszoomingpie-chartcircle-pack
user2524994
user2524994

Reputation: 367

D3 multiple pie chart labels

I am relatively new to D3 working with a very large data set and trying to create a very large array of pie charts. However I cannot figure out how to place tittles at the very top of each pie chart.

My data that I am using is currently in a csv format like this and the fruits would be the labels I want for the pie charts

[apple,90,36,2]
[pear,36,36,3]
[grape,19,13,0]

I have pasted my code bellow with the data that works for it included bellow. Also I would ultimately like to be able to zoom into the data and look at it from a zoomed out feature like this:

http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

enter image description here

If anybody has an idea to effectively convey this it would be greatly appreciated. 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Multiple Pie Charts</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.4.5"></script>
    <style type="text/css">


body {
  text-align: center;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">
var data = [
[90,36,2],
[36,36,3],
[19,13,0],
]
var m = 10,
    r = 100,
    z = d3.scale.category20c();
var svg = d3.select("body").selectAll("svg")
    .data(data)
  .enter().append("svg:svg")
    .attr("width", (r + m) * 2)
    .attr("height", (r + m) * 2)
  .append("svg:g")
    .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");
svg.selectAll("path")
    .data(d3.layout.pie())
  .enter().append("svg:path")
    .attr("d", d3.svg.arc()
    .innerRadius(r / 2)
    .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });

    </script>
  </body>
</html>

Upvotes: 2

Views: 1357

Answers (2)

user2524994
user2524994

Reputation: 367

Figured it out

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

svg {
  padding: 10px 0 0 10px;
}

.arc {
  stroke: #fff;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var radius = 74,
    padding = 10;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#2B8429"]);

var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius - 30);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.population; });

d3.csv("data1.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "fruit"; }));

  data.forEach(function(d) {
    d.ages = color.domain().map(function(name) {
      return {name: name, population: +d[name]};
    });
  });

  var legend = d3.select("body").append("svg")
      .attr("class", "legend")
      .attr("width", radius * 2)
      .attr("height", radius * 2)
    .selectAll("g")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .text(function(d) { return d; });

  var svg = d3.select("body").selectAll(".pie")
      .data(data)
    .enter().append("svg")
      .attr("class", "pie")
      .attr("width", radius * 2)
      .attr("height", radius * 2)
    .append("g")
      .attr("transform", "translate(" + radius + "," + radius + ")");

  svg.selectAll(".arc")
      .data(function(d) { return pie(d.ages); })
    .enter().append("path")
      .attr("class", "arc")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.name); });

  svg.append("text")
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.fruit; });

});

</script>

Upvotes: 0

pilavdzice
pilavdzice

Reputation: 958

You could use dc.js, it simplifies making d3 charts and retains the flexibility. On the homepage of that project they have a link to annotated source so you can see how to use it.

If you have a large data set I would use something like that because it uses crossfilter to reduce your data elements to only those that need to be displayed, resulting in much better performance.

Sorry I didn't directly answer your title question but suggested a different way of doing this, but I have never had to do that because I use dc.js which makes all this much simpler.

Upvotes: 1

Related Questions