Monday, December 10, 2012

Use D3.js to draw pie chart instead of PROC GCHART

Is the pie really round?


Commonly the PIE statement in the PROC GCHART produces the pie charts. Given the shortcoming of the pixel based Gxxxxxx procedures, the boundary of the pie is not very clear. I always feel that the resulting pie is not 100% round. Let's see one example with a dataset from SAS's online document.

/* Set the graphics environment */
goptions reset=all;

/* Create the input data set SALES */
data sales;
input site $ 1-8 count;
datalines;
Atlanta 103
Chicago 486
Dallas 195
Denver 400
New York 307
Seattle 577
;
run;

/* Produce the chart */
proc gchart data=sales;
pie site / sumvar=count slice = inside value = none noheading;
run;

My intuition is that the pie above has bumps on the boundary areas. In SAS, the SVG-based SG procedures can be a rescue. However, right now they don't include an option of the PIE chart (because a pie chart is not a statistical graph?)

An alternative solution


D3.js, an already very popular open-source JavaScript library, will soon launch its 3rd version. With the JavaScript interpreter of any browser such as Chrome, IE9 or Firefox, we can make a variety of data-driven graphs with D3. The good thing is that D3 generates SVG, which can be zoomed to any size without losing detail.

In this example, I switch to a plug-in of D3 to draw the pie again. This time I finally obtain a really round pie.