Reusable Line Chart

<!DOCTYPE html>
<meta charset="utf-8">

<script src="./d3.js"></script>
<script src="./moment.js"></script>

<script src="./helpers.js"></script>
<script src="./line-chart.js"></script>

<link href="./line-chart.css" rel="stylesheet" />

<body>

var datasets = ["Any_Bedrooms", "One_Bedroom", "Studios", "Two_Bedrooms", "Three_Bedrooms_Or_More"];
// sales_discount_share_time_series_All_Types_
// 
var selection = d3.select("#select-data")
    .on("input", function(d) {
      d3.csv("./sales_inventory_time_series_counts_All_Types_" + this.value + ".csv", ready);
    })

selection.selectAll("option")
  .data(datasets)
.enter().append("option")
  .attr("value", function(d) { return d })
  .text(function(d) { return d });

d3.csv("./sales_inventory_time_series_counts_All_Types_Any_Bedrooms.csv", ready);

function ready(error, data) {

console.log(data);
  var columns = data.columns.filter(function(d) { return d != "Area" || d != "Boro" || d != "AreaType" })
    , flatData = []
    , excludeAreas = ["Area","NYC","Manhattan","All Downtown","All Midtown","All Upper West Side","All Upper East Side","All Upper Manhattan","Bronx","Brooklyn","North Brooklyn","Northwest Brooklyn","East Brooklyn","Prospect Park","South Brooklyn","Queens","Staten Island"];

data = data.filter(function(d) { return excludeAreas.indexOf(d["Area"]) == -1 })
      .filter(function(d) { return d["Boro"] == "Brooklyn" })

data.forEach(function(d) {
    columns.forEach(function(col) {
      d["date"] = moment(col, "YYYY-MM-DD");
      if(+d[col] > 0) { flatData.push({"date": d["date"], "val": +d[col], "area": d["Area"] });  }
    })
  });

var lines = lineChart()
      .x("date")
      .y("val")
      .margin({top: 20, right: 20, bottom: 120, left: 60})
      .width(parseInt(d3.select("#chart").style("width"),10))
      .height(650 - 50 - 100)
      .nest("area");

d3.select("#chart")
    .datum(flatData)
    .call(lines);

}

</script>