Reusable Line Chart v2

An implementation of a reusable responsive multiline chart. Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts.

Features:

Reusable modular design
Responsive design, chart size adjusts with screen size
Customizable options
- Chart Size
- Margins
- Div Selector
- Chart Colors
- Axis labels
Toggleable series (click on the legend to toggle series)

Previous version: Reusable Responsive Multiline Chart

forked from asielen's block: Reusable Line Chart v2

forked from anonymous's block: Reusable Line Chart v2

forked from vdepoorter's block: Reusable Line Chart v2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="multiline.css">
    <script src="https://d3js.org/d3.v3.js" charset="utf-8"></script>
    
</head>
<body>
<div class="chart-wrapper" id="chart-line1"></div>

product_id_list = ["1371", "7837", "1182", "21397"];
    
   extract_data = function(product) {
      
      return d3.csv('fc_output_' + product + '.csv', function(data) {
        					console.log("Read data for " + product)
                  return data})
   		};
      
    datasets = [];
    for (i=0;i<product_id_list.length;i++) 
        datasets[i] = d3.csv('fc_output_' + product_id_list[i] + '.csv', function(data) {
        					console.log("Read data for " + product)
                  return data})
          
          
          
          extract_data(product_id_list[i]);
  
  	parseDate = d3.time.format("%Y-%m-%d %H:%M").parse;
  
    //d3.csv = httpGetAsync("https://forecasts.proaanalytics.com/GetForecast/testkey1/2");
    d3.csv("multiline_data.csv", function(error, data) {
      console.log(data);
    data.forEach(function (d) {
        //d.year = +d.year;
        d.year = parseDate(d.year);
        d.variableA = +d.variableA/1000;
        d.variableB = +d.variableB/1000;
        d.variableC = +d.variableC/1000;
        d.variableD = +d.variableD/1000;
        d.variableA_90 = +d.variableA*0.8;
        d.variableA_10 = +d.variableA*1.1;
      	d.variableB_90 = +d.variableB*0.9;
        d.variableB_10 = +d.variableB*1.1;
      	d.variableC_90 = +d.variableC*0.9;
        d.variableC_10 = +d.variableC*1.1;
      	d.variableD_90 = +d.variableD*0.9;
        d.variableD_10 = +d.variableD*1.1;
    });

});
</script>
</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.js

https://d3js.org/d3.v3.min.js