Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

D3.js Pie Charts Made Super Easy: D3Pie

DZone 's Guide to

D3.js Pie Charts Made Super Easy: D3Pie

Learn what d3pie is, see how to create interactive pie charts easily using D3.js, and glean some insight on what d3pie can do for you.

· Big Data Zone ·
Free Resource

According to its website, “d3pie is a simple, highly configurable script built on d3.js for creating simple, attractive pie charts. It’s free — open source.”

If you have ever researched high performance and deeply customizable charts, then for sure you have come across to D3 charts. The D3 chart is a huge library and there are a number of posts to implement them. You can be creative without limits.

Let’s see what d3pie can do for you.

Configuration options include:

  • Pie/donut charts.
  • Title, subtitle, footer text, and control over placement.
  • Inner and outer labels; choice of what data appears in each.
  • Automatic percentage calculations.
  • Unlimited data set size.
  • Full control over font, font sizes, colors.
  • Segment colors.
  • Small segment grouping.
  • Background color/transparency.
  • Load, mouseover, and click effects.
  • Callbacks for click, mouseover, and mouseout events.
  • API for refreshing and recreating pies dynamically.
  • Control over pie chart padding and pie chart x/y offsets.

Now let's start with the implementation

You only need two libraries:

  1. d3.min.js.
  2. d3Pie.min.js.

Create a simple index.html file, write the code in it, and open with the browser:

<html>
<head></head>
<body>
<div id="myPie"></div>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<!-- <script src="https://d3js.org/d3-selection.v1.js"></script> -->
 
<script src="d3pie.js"></script>
<script src="d3.min.js"></script>
<script>
    var pie = new d3pie("myPie", {
    header: {
        title: {
            text: "A very simple example pie"
        }
    },
    data: {
        content: [
            { label: "JavaScript", value: 50 },
            { label: "Ruby", value: 20 },
            { label: "Java", value: 30},
        ]
     },
 
    //Here further operations/animations can be added like click event, cut out the clicked pie section.
     callbacks: {
        onMouseoverSegment: function(info) {
            console.log("mouse in", info);
        },
        onMouseoutSegment: function(info) {
            console.log("mouseout:", info);
        }
    }
      
});
 
</script>
</body>
</html>

This will generate the following output:

d3piechart

Let's make it complex now.

Notice the line in above code: “Here further operations/animations can be added like click event, cut out the clicked pie section.”

Let’s create a file complex.html and add this content:

<html>
<head></head>
<body>
<div id="pie"></div>
<button id="addData"> Add Data </button>
 
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script   src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
 
<script src="d3pie.js"></script>
<script src="d3.min.js"></script>
<script>
    var data = [
          { label: "1", value: 1 },
          { label: "2", value: 4 },
          { label: "3", value: 3 }
        ];
 
        var pie = new d3pie("pie", {
          data: {
            content: data
          }
        });
 
        $(function() {
          var num = 4;
          $("#addData").on("click", function() {
            data.push({
              label: num.toString(),
              value: Math.floor(Math.random() * 10) + 1
            });
 
            pie.updateProp("data.content", data);
            num++;
          });
        });
</script>
</body>
</html>

This will generate an output like this:

complexd3pie

Hopefully, this article has helped you in your search for quick charting implementation.

References

Topics:
big data ,data visualization ,d3.js ,d3pie ,tutorial ,pie charts

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}