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.
Creating a new project
Let’s create an empty folder using the following command:

mkdir roughjs-chart-tutorial && cd roughjs-chart-tutorial

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.jsAll 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:

src=”https://rawgit.com/pshihn/rough/master/dist/rough.min.js”>

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


Original URL: http://feedproxy.google.com/~r/feedsapi/BwPx/~3/KygXe-04iVk/

Original article

Comments are closed.

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑

%d bloggers like this: