Skip to content

Instantly share code, notes, and snippets.

@DefiantBidet
Created May 15, 2013 21:01
Show Gist options
  • Save DefiantBidet/5587342 to your computer and use it in GitHub Desktop.
Save DefiantBidet/5587342 to your computer and use it in GitHub Desktop.
A CodePen by James Dean. Sample D3 Stacked Area Chart - attempting to refactor live example using csvParse
<div id="chart"></div>
var dataCSV = "key,value,date\n" +
"Group1,37,20120423\n" +
"Group2,12,20120423\n" +
"Group3,46,20120423\n" +
"Group1,32,20120424\n" +
"Group2,19,20120424\n" +
"Group3,42,20120424\n" +
"Group1,45,20120425\n" +
"Group2,16,20120425\n" +
"Group3,44,20120425\n" +
"Group1,24,20120426\n" +
"Group2,52,20120426\n" +
"Group3,64,20120426\n",
dataArray = d3.csv.parse( dataCSV );
// window.alert( dataArray[ 0 ].key + " : " + dataArray[ 0 ].value + " : " + dataArray[ 0 ].date );
var w = 700, h = 600,
margin = {top: 10, right: 15, bottom: 25, left: 30},
height = h - margin.top - margin.bottom,
width = w - margin.left - margin.right,
format = d3.time.format("%Y%m%d").parse,
xScale = d3.time.scale().range([0, width]),
// xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks( d3.time.days ),
xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks( d3.time.days ).tickFormat( d3.time.format('%b %d %Y') ),
yScale = d3.scale.linear().range([height, 0]),
yAxis = d3.svg.axis().scale(yScale).orient("left");
zScale = d3.scale.category20c(),
stack = d3.layout.stack()
.offset("zero")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; }),
nest = d3.nest().key(function(d) { return d.key; }),
area = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return xScale(d.date); })
.y0(function(d) { return yScale(d.y0); })
.y1(function(d) { return yScale(d.y0 + d.y); }),
svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
(function(){
for ( var x = 0, len = dataArray.length; x < len; x++ ) {
var d = dataArray[ x ];
// window.alert( d3.time.format( '%Y%m%d' ).parse( d.date ) + ' : ' + format( d.date ) );
d.date = format( d.date );
d.value = +d.value;
}
var layers = stack( nest.entries( dataArray ) );
xScale.domain(d3.extent(dataArray, function(d) { return d.date; }));
yScale.domain([0, d3.max(dataArray, function(d) { return d.y0 + d.y; })]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return zScale(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
})()
body {
font: 10px sans-serif;
}
#chart{
border: 1px dashed darkblue;
width: 700px;
height: 600px;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment