D3Js Pie Charts made super easy: D3Pie


d3piechartD3pie 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 googled about high performance and deeply customizable charts, than for sure you have came across to D3 charts, D3 chart is such a big library and there are number of posts to implement them, there is no abstraction, you can add all your creativity and there is no limit.

Let’s see what d3Pie can do for your:

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, mouseout events
  • API for refreshing and recreating pie dynamically
  • Control over pie chart padding, pie chart x/y offsets

Now lets start with the implementation

Resources you need : only  2 libraries.

Create a simple index.html  file and write this code in that and open with browser.

index.html

<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 out put like:

d3piechart

Lets 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.

complex.html

<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 the output like this:

complexd3pie

Hope it helped you in your search for quick charting implementation.

Reference: d3Pie

Like and share it.


KNOLDUS-advt-sticker

About Nikhil Kumar

Software Consultant at Knoldus Software LLP.
This entry was posted in D3 Charts, Scala and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s