Area Chart (Stacked)

Stacked area chart

Compare with D3.js original

SELECT TODATE(`date`, "MM/dd/yy") AS dt, `key`, value::int AS value
FROM EXTERNAL CSV("http://scleraviz.herokuapp.com/assets/data/area-stacked.csv")
PLOT(
   GEOM=AREA(x=dt, y=value),
   INTERPOLATE="cardinal",
   POSITION=STACK,
   FILL=`key` SCALE=COLOR("category20c") LEGEND(REVERSED)
)
AXIS dt(TICKS=4)

Description

The chart plots the `value` column, for different values of the `key` column in an area stack, against the `date` column. For better aesthetics, the curves are smoothed by specifying the interpolation mode as "cardinal". The color scheme used is "category20c", and a legend shows the color to `key` map. The order of the legend is reversed to be compatible with the stacking order. The date axis is automatically taken as a time axis, and has the number of ticks fixed as 4, as specified in the `AXIS` clause.

Data Preparation

The data is read from a URL. The `date` column values are parsed as dates based on the specified pattern, and the `value` column is cast to `int`.

area-stacked.csv

key,value,date
Group1,37,04/23/12
Group2,12,04/23/12
Group3,46,04/23/12
Group1,32,04/24/12
Group2,19,04/24/12
Group3,42,04/24/12
Group1,45,04/25/12
Group2,16,04/25/12
Group3,44,04/25/12
Group1,24,04/26/12
Group2,52,04/26/12
Group3,64,04/26/12

Built with D3 and D3-Legend

Powered by Sclera