Creating a pie chart using Rough.js and D3.js

In this simple tutorial, I want to show you how to make a hand-drawn pie chart using the Rough.js and D3.js libs. Besides, you can use Rough.js to draw other geometric figures, maps (using D3.js) in sketch style.

Getting started

To follow this tutorial you should have the basic fundamentals of the command line, Javascript, Canvas, D3.js and be able to run a simple server.

Let’s create an empty folder using the following command:

We already inside this folder. All stuff we will build in the index.html file. We can create it using the next command:

In this tutorial, we will reuse Canvas Pie example from bl.ocks.org and make it with sketchy-style using Rough.js. The original pie chart looks like:

Initial pie-chart. It built using only D3.js
Initial pie-chart. It built using only D3.js

All you need to take this example and copy whole code to index.html and include Rough.js library. Just add the next line after d3.js library:

After including, create data.tsv file in the project folder with the next data:

Creating Canvas and Pie

To use Rough.js, let’s create an instance of Rough.js. Simply add the next string of code on the 11 line (between 10 and 12) of index.html file:

Because we will use Rough.js for drawing, we can easily remove lines 42-48.  To draw pie we will use the next fragment:

And put it inside of callback function arcs.forEach in the bottom of index.html file. It should be look like this:

Running project

To run this project you need to run a simple http-server inside the project folder. In this case, I used Python. Just run the next command in project folder:

Now open your browser on localhost:8000. You will see our hand-drawn pie chart:

Hand-Drawn Pie Chart using Rough.js and D3.js
Hand-Drawn Pie Chart using Rough.js and D3.js

Summary

With Rough.js you can show data on your page with a sketchy style. You can use Pie Charts for statistics, analytics and in a wide range of business and social projects. All code related to this tutorial you can find here.

If you interested in other tutorials using Rough.js, D3.js, building charts, please type your idea in comments and I will help you.

If you liked this, please help spread the word by hitting the recommend button below. Thanks!