Stripe Gross Volume Example

HTML

<script src="http://d3js.org/d3.v3.js"></script>

CSS

body {
    font: 10px sans-serif;
    margin: 0;
}
path.line {
    fill: none;
    stroke: #53aee2;
    stroke-width: 3;
}
path.area {
    fill: #cfddf0;
}
.axis {
    shape-rendering: crispEdges;
}
.x.axis path {
    display: none;
}
.y.axis path, .y.axis line {
    fill: none;
    stroke: #000000;
    stroke-width: 1px;
    stroke-opacity: 0.06;
}
text {
    stroke: none;
    fill: #bbbbbb;
    font-family:"HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size:10px;
}

JavaScript

var data = [{"end_time":"2013-01-01","value":25.00},{"end_time":"2013-01-02","value":0.00},{"end_time":"2013-01-03","value":25.00},{"end_time":"2013-01-04","value":159.00},{"end_time":"2013-01-05","value":84.00},{"end_time":"2013-01-06","value":0.00},{"end_time":"2013-01-07","value":64.00},{"end_time":"2013-01-08","value":84.00},{"end_time":"2013-01-09","value":84.00},{"end_time":"2013-01-10","value":0.00},{"end_time":"2013-01-11","value":89.00},{"end_time":"2013-01-12","value":75.00},{"end_time":"2013-01-13","value":0.00},{"end_time":"2013-01-14","value":50.00},{"end_time":"2013-01-15","value":50.00},{"end_time":"2013-01-16","value":174.00},{"end_time":"2013-01-17","value":84.00},{"end_time":"2013-01-18","value":0.00},{"end_time":"2013-01-19","value":393.00},{"end_time":"2013-01-20","value":134.00},{"end_time":"2013-01-21","value":282.00},{"end_time":"2013-01-22","value":25.00},{"end_time":"2013-01-23","value":149.00},{"end_time":"2013-01-24","value":0.00},{"end_time":"2013-01-25","value":124.00},{"end_time":"2013-01-26","value":100.00},{"end_time":"2013-01-27","value":134.00},{"end_time":"2013-01-28","value":168.00},{"end_time":"2013-01-29","value":379.00},{"end_time":"2013-01-30","value":193.00},{"end_time":"2013-01-31","value":0.00}]

var m = [80, 80, 80, 80],
    w = 700 - m[1] - m[3],
    h = 250 - m[0] - m[2],
    parse = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale().range([0, w]),
    y = d3.scale.linear().range([h, 0]),
    xAxis = d3.svg.axis().scale(x).tickSize(-h).tickFormat(d3.time.format("%-m/%d")),
    yAxis = d3.svg.axis().scale(y).ticks(2).orient("right");

var area = d3.svg.area()
    .interpolate("linear")
    .x(function (d) {
    return x(d.end_time);
})
    .y0(h)
    .y1(function (d) {
    return y(d.value);
});

var line = d3.svg.line()
    .interpolate("linear")
    .x(function (d) {
    return x(d.end_time);
})
    .y(function (d) {
    return y(d.value);
});

data.forEach(function (d) {
    d.end_time = parse(d.end_time);
 ...