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.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">
    d3.csv('https://gist.githubusercontent.com/victorbullido/a36e151551ab1a45a68cc6b157849a1b/raw/27577593c33f8a6fbbae189cd5c7db208db45c8a/BeekeepersTotal', function(error, data) {
    data.forEach(function (d) {
        d.Year = +d.Year;
        d.TotalColonyLoss = +d.TotalColonyLoss;
        d.TotalBeekeeperGrowth = +d.TotalBeekeeperGrowth;
    });
​
    var chart = makeLineChart(data, 'Year', {
        'TotalBeekeeperGrowth': {column: 'TotalBeekeeperGrowth'},
        'TotalColonyLoss': {column: 'TotalColonyLoss'}
    });
    chart.bind({selector:"#chart-line1",chartSize:{height:452, width:960}, axisLabels: {xAxis:'Years', yAxis: 'Values'}});
    chart.render();
​
});
</script>
</body>
</html>
    