Reusable Line Chart VK

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 niila's block: Reusable Line Chart v2

forked from niila's block: Reusable Line Chart VK

<!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>

var chart = makeLineChart(data, 'year', {
        'Variable A': {column: 'variableA'},
        'Variable B': {column: 'variableB'},
        'Variable C': {column: 'variableC'},
        'Variable D': {column: 'variableD'}
    });

chart.bind({selector:"#chart-line1",chartSize:{height:452, width:960}, axisLabels: {xAxis:'Years', yAxis: 'Values'}});
    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