An implementation of a reusable responsive multiline chart. Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts.
Features:
Previous version: Reusable Responsive Multiline Chart
forked from asielen's block: Reusable Line Chart v2
forked from ptvans's block: 1988 Porsche 959 Sport
forked from ptvans's block: 1988 Porsche 959 Sport
xxxxxxxxxx
<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>
<!--
1988 Porsche 959 Sport
2dr Coupe 6-cyl. 2849cc/575hp Twin Turbo FI
https://www.hagerty.com/apps/valuationtools/values/131827?yearRange=15
-->
<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;
});
var chart = makeLineChart(data, 'date', {
'Concours': {column: 'value1'},
'Excellent': {column: 'value2'},
'Good': {column: 'value3'},
'Fair': {column: 'value4'}
});
chart.bind({selector:"#chart-line1",chartSize:{height:452, width:960}, axisLabels: {xAxis:'Dates', 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