Reusable chart using closure (Stacked area)

by Pablo Navarro

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>

CSS

.chart {
    width: 600px;
    height: 300px; 
    margin: 0 auto;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #999999;
}
  .chart img.loading {
    display: block;
    left: 50%;
    position: relative;
    top: 50%; }
  .chart path {
    fill: none; }
  .chart .axis path, .chart .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges; }
  .chart .brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges; }
  .chart .brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges; }

JavaScript

var data = [];
for (var day=10; day < 30; day++) { 
    for (hour=10; hour < 24; hour++) { 
        data.push({
            'date': '2013-02-'+day+' '+hour+':00:00',
            'prod': Math.floor(Math.random()*200),
            'robo': Math.floor(Math.random()*100),
            'other':Math.floor(Math.random()*50)
        });
    }
}

var chart1 = StackedAreaChart();

d3.select('#chart1')
    .data([data])
    .call(chart1);

$(window).on('resize', function() {
    chart1.duration(0);

    d3.select('#chart1')
    .data([data])
    .call(chart1);         

    chart1.duration(500);
});

var chart2 = StackedAreaChart().colors(['green', 'green', 'green']);

function StackedAreaChart() {

  var margin      = {top: 40, right: 20, bottom: 40, left: 40},
      xScale      = d3.time.scale(),
      yScale      = d3.scale.linear(),
      xAxis       = d3.svg.axis().scale(xScale).orient("bottom").ticks(7),
      yAxis       = d3.svg.axis().scale(yScale).orient("left").ticks(5),
      area        = d3.svg.area().x(X).y0(Y0).y1(Y1),
      stack       = d3.layout.stack(),
      parseDate   = d3.time.format("%Y-%m-%d %X").parse,
      duration    = 500,
      color       = d3.scale.category20(),
      hoverDataLabels = false,
      showLegend  = false,
      hideTicks = false,
      seriesTitles = '';
      

    function chart(selection) {
        selection.each(function(data) {

            var width = $(selection[0]).width()-margin.left-margin.right;
            var height = $(selection[0]).height()-margin.top-margin.bottom;
      
            // Set the domain of the color scale to all categories other than date
            color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
      
            data.forEach(function(d) {
              if (!d.date.getMonth) {
                d.date = parseDate(d.date);
              }
            });
      
            // Filter data
            // var filtered_data = [];
            // data.forEach(function(d,...