D3 Examples - Reusable Line Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<!-- Vendor Modules -->
<script src="./d3.js"></script>
<script src="./moment.js"></script>
​
<!-- PB Modules -->
<script src="./helpers.js"></script>
<script src="./line-chart.js"></script>
​
<!-- CSS Styling  -->
<link href="./line-chart.css" rel="stylesheet" />
​
<body>
​
<div id="chart"></div>
​
​
<script>
​
​
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>
​
​
    