Old school D3 from simpler times

All examples By author By category About

vdepoorter

Full window Github gist

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

forked from vdepoorter'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>

<script src="multiline.js" charset="utf-8"></script>
<script type="text/javascript">
  
  function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}
    //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.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 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:700}, axisLabels: {xAxis:'Forecast horizon (h)', yAxis: 'Generation (kW)'}});
    chart.render();

});
</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