D3 Stream Graph
by Mike Rawling
HTML
<div id = "streamgraph"></div>
JavaScript
var data = [{
"key": "active time", "date": "05/13/2013", "value": "38.0"
}, {
"key": "active time", "date": "05/14/2013", "value": "51.0"
}, {
"key": "active time", "date": "05/15/2013", "value": "56.0"
}, {
"key": "active time", "date": "05/16/2013", "value": "54.0"
}, {
"key": "active time", "date": "05/16/2013", "value": "67.0"
}, {
"key": "active time", "date": "05/17/2013", "value": "63.0"
}, {
"key": "active time", "date": "05/18/2013", "value": "10.0"
}, {
"key": "active time", "date": "05/19/2013", "value": "10.0"
}, {
"key": "active time", "date": "05/20/2013", "value": "43.0"
}, {
"key": "active time", "date": "05/21/2013", "value": "37.0"
}, {
"key": "active time", "date": "05/22/2013", "value": "10.0"
}, {
"key": "active time", "date": "05/22/2013", "value": "33.0"
}, {
"key": "distance", "date": "05/13/2013", "value": "57.0"
}, {
"key": "distance", "date": "05/14/2013", "value": "74.0"
}, {
"key": "distance", "date": "05/15/2013", "value": "82.0"
}, {
"key": "distance", "date": "05/16/2013", "value": "79.0"
}, {
"key": "distance", "date": "05/16/2013", "value": "14.0"
}, {
"key": "distance", "date": "05/17/2013", "value": "93.0"
}, {
"key": "distance", "date": "05/18/2013", "value": "19.0"
}, {
"key": "distance", "date": "05/19/2013", "value": "18.0"
}, {
"key": "distance", "date": "05/20/2013", "value": "65.0"
}, {
"key": "distance", "date": "05/21/2013", "value": "55.0"
}, {
"key": "distance", "date": "05/22/2013", "value": "18.0"
}, {
"key": "distance", "date": "05/22/2013", "value": "49.0"
}, {
"key": "steps", "date": "05/13/2013", "value": "72.0"
}, {
"key": "steps", "date": "05/14/2013", "value": "94.0"
}, {
"key": "steps", "date": "05/15/2013", "value": "10.0"
}, {
"key": "steps", "date": "05/16/2013", "value": "10.0"
}, {
"key": "steps", "date": "05/16/2013", "value": "14.0"
}, {
"key": "steps", "date": "05/17/2013",...