Old school D3 from simpler times

All examples By author By category About

bquast

Full window Github gist

pieChart-nvd3

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
</head>
<body>

<div id="piechart"><svg style="width:450px;height:450px;"></svg></div>

<script>
    
    data_piechart=[{"values": [{"label": "with administration(s)", "value": 51.4}, 
                               {"label": "with intergovernmental/regional organization(s)", "value": 37.1}, 
                               {"label": "with other entities (e.g. company, university)", "value": 11.4}],
                    "key": "Serie 1"}
                  ];
        
    nv.addGraph(function() {
        var chart = nv.models.pieChart();
        chart.margin({top: 30, right: 60, bottom: 20, left: 60});
        var datum = data_piechart[0].values;
        chart.color(d3.scale.category20c().range());
        
    chart.tooltipContent(function(key, y, e, graph) {
          var x = String(key);
              var y =  String(y)  + '%';
              tooltip_str = '<center><b>'+x+'</b></center>' + y;
              return tooltip_str;
              });
    chart.showLabels(true);
    chart.donut(false);
    chart.showLegend(true);
    chart.labelType("percent")
    chart
            .x(function(d) { return d.label })
            .y(function(d) { return d.value });
    chart.width(600);
    chart.height(450);
            d3.select('#piechart svg')
            .datum(datum)
            .transition().duration(500)
            .attr('width', 600)
            .attr('height', 450)
            .call(chart);
        });
</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js