1988 Porsche 959 Sport (old)

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 ptvans's block: 1988 Porsche 959 Sport (old)

<!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">
    var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse;
  
  	d3.csv('multiline_data.csv', function(error, data) {
    data.forEach(function (d) {
        d.date = parseDate(d.date);
        d.value1 = +d.value1;
        d.value2 = +d.value2;
        d.value3 = +d.value3;
        d.value4 = +d.value4;
    });

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