D3 Examples - Reusable Line Chart v2

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)

xxxxxxxxxx
 
<!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>
  <script src="https://d3js.org/d3-queue.v3.min.js"></script>
    <!--<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
</head>
<body>
<div class="chart-wrapper" id="chart-line1"></div>
​
<script src="multiline.js" charset="utf-8"></script>
<script type="text/javascript">
  
​
   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})
          
     
        
    var q = d3.queue();
    for (i=0;i<product_id_list.length;i++)
        file_url = 'fc_output_' + product_id_list[i] + '.csv';
        q = q.defer(d3.csv, file_url);
    q.await(onDataLoaded);    
  
    function onDataLoaded(error) {
    if (!error) {
        // Either simply loop them:
        for (var i=1; i<arguments.length; i++)
            console.log(arguments[i]);
            //… arguments[i] …
        // or slice them into an array:
        //var csvs = Array.prototype.slice.call(arguments, 1);
        //…
    } //else { … }
}
  
          
          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;
    });
​
      var global_data = data;
      
    var chart = makeLineChart(data, 'year', {
        'NSW': {best_guess: 'variableA', p90: 'variableA_90', p10: 'variableA_10'},
        'SA':  {best_guess: 'variableB', p90: 'variableB_90', p10: 'variableB_10'},
        'VIC': {best_guess: 'variableC', p90: 'variableC_90', p10: 'variableC_10'},
        'QLD': {best_guess: 'variableD', p90: 'variableD_90', p10: 'variableD_10'}
    });
    chart.bind({selector:"#chart-line1",chartSize:{height:400, width:800}, axisLabels: {xAxis:'Forecast horizon (h)', yAxis: 'Generation (kW)'}});
    chart.render();
​
});
</script>
</body>
</html>
    