index.jade

h1 good user
h4 calories
#calories-good.graph.cal-graph
//- h4 exercise
//- #exercise-good.graph
h4 articles
#articles-good.graph

h1 bad user
h4 calories
#calories-bad.graph.cal-graph
//- h4 exercise
//- #exercise-bad.graph
h4 articles
#articles-bad.graph

h1 mixed user
h4 calories
#calories-mixed.graph.cal-graph
//- h4 exercise
//- #exercise-mixed.graph
h4 articles
#articles-mixed.graph

h1 spotty user
h4 calories
#calories-spotty.graph.cal-graph
//- h4 exercise
//- #exercise-spotty.graph
h4 articles
#articles-spotty.graph

h1 badData user
h4 calories
#calories-badData.graph.cal-graph
//- h4 exercise
//- #exercise-badData.graph
h4 articles
#articles-badData.graph

script.

  var initChart = function(file, element) {
    var array = [];

    //grab text file and convert to arrays
    d3.text(file, function(data) {
      c = d3.csv.parseRows(data);
      for (i = 0; i < c.length; i++) {
        var isSolid = 1;
        if (c[i].length > 2) {
          isSolid = parseInt(c[i][2])
        }
        array.push([ c[i][0], parseFloat(c[i][1]), isSolid ] )
      }

    //call columnChart() on the chart container elements
    d3.select(element)
      .datum(array)
        .call(columnChart()
          .width(600)
          .height(100)
          .x(function(d, i) { return d[0]; })
          .y(function(d, i) { return d[1]; }));
    });
  };

  initChart("data/calories_good.csv", "#calories-good")
  initChart("data/exercise_good.csv", "#exercise-good")
  initChart("data/articles_good.csv", "#articles-good")

  initChart("data/calories_bad.csv", "#calories-bad")
  initChart("data/exercise_bad.csv", "#exercise-bad")
  initChart("data/articles_bad.csv", "#articles-bad")

  initChart("data/calories_mixed.csv", "#calories-mixed")
  initChart("data/exercise_mixed.csv", "#exercise-mixed")
  initChart("data/articles_mixed.csv", "#articles-mixed")

  initChart("data/calories_spotty.csv", "#calories-spotty")
  initChart("data/exercise_spotty.csv", "#exercise-spotty")
  initChart("data/articles_spotty.csv", "#articles-spotty")

  initChart("data/calories_badData.csv", "#calories-badData")
  initChart("data/exercise_badData.csv", "#exercise-badData")
  initChart("data/articles_badData.csv", "#articles-badData")