Creating Multiplie Pie Charts in a same page using d3 with JSON data

Question

<!DOCTYPE html>

<meta charset="utf-8">

<style>

body {
  font: 10px sans-serif;
}

    #radiobutton {
        font: 20px sans-serif;
        margin-top: 20px;
        margin-left: 380px;
        color: green;
    }
.arc path {
  stroke: #fff;
}
#tooltip {
    position: absolute;
    width: 200px;
    height: auto;
    padding: 10px;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4);

}
#tooltip.hidden {
    opacity: 0;
}
    #tooltip p {
        margin: 0;
        font-family: sans-serif;
        font-size: 16px;
        line-height: 20px;
    }



</style>

<div id="tooltip" class="hidden">
    <p><strong>Adult_Mortality_rate of Whole Population</strong>
    </p>
    <p><span id="value">100</span></p>
</div>
<div id="radiobutton">
<form>

   <label><input type="radio" name="dataset" value="country" > country</label>
  <label><input type="radio" name="dataset" value="value" checked> values</label>
</form></div>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    var m = 10,
      r = 100,
      z = d3.scale.category20c();

    var width = 960,
        height = 500,
        radius = Math.min(width, height) / 2;

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

    var arc = d3.svg.arc()
        .outerRadius(50)
        .innerRadius(0);



    var arcOver = d3.svg.arc()
                        .innerRadius(0)
                        .outerRadius(50 + 50);

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

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

The below code is use to draw a pie chart but I would like to create another similar pie chart in the same page using a different column value in the JSON file that I have. Example: For the first pie chart, I am using the Overall column but the second pie chart that I would like to create would use the Under70 column in the JSON file. Is there anyway for me to create both pie charts in the same page?

    d3.json("data.json", function (error, data) {


        data.forEach(function (d) {
            d.Overall = +d.Overall;
            d.Under70 = +d.Under70;

        });

        var g = svg.selectAll(".arc")
            .data(pie(data))
          .enter().append("g")
            .attr("class", "arc")

    .on("mouseover", function (d) {
        d3.select("#tooltip")
            .style("left", d3.event.pageX + "px")
            .style("top", d3.event.pageY + "px")
            .style("opacity", 1)
            .select("#value")
            .text(d.data.Overall);
    })
    .on("mouseout", function () {
        // Hide the tooltip
        d3.select("#tooltip")
            .style("opacity", 0);;
    });


        g.append("path")

            .attr("d", arc)
            .style("fill", function (d) {
                return color(d.data.gender);

            })
        .on("mouseover", function (d) {
            d3.select(this).transition()
               .duration(1000)
               .attr("d", arcOver);

        })
                .on("mouseout", function (d) {
                    d3.select(this).transition()
                       .duration(1000)
                       .attr("d", arc);
                });

        g.append("text")
            .attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; })
            .attr("dy", ".35em")

             .attr("text-anchor", "middle") //center the text on it's origin
      .style("fill", "Purple")
      .style("font", "bold 12px Arial")
        .text(function (d) { return d.data.gender });

    });
</script>

This is my JSON file:

[{"country":"Singapore","gender": "Male", "Overall":"1234", "Under70": "1224"},
 {"country":"Singapore","gender": "Female", "Overall":"4567","Under70": "5678"}]

Answer 1

要在同一页面上具有多个图表，最简单的方法是在脚本内的页面中创建不同的svg，然后将饼图指向不同的svg。

Creating Multiplie Pie Charts in a same page using d3 with JSON data

Question

1 answers

solution1
0 2014-07-21 14:51:37

Creating Multiplie Pie Charts in a same page using d3 with JSON data

Question

1 answers

solution1 0 2014-07-21 14:51:37

solution1
0 2014-07-21 14:51:37