Skip to content

Instantly share code, notes, and snippets.

@allyraza
Last active July 8, 2018 11:32
Show Gist options
  • Save allyraza/f89c69aeed3672a60da5a4e35469500e to your computer and use it in GitHub Desktop.
Save allyraza/f89c69aeed3672a60da5a4e35469500e to your computer and use it in GitHub Desktop.
multiline chart
license: mit
We can make this file beautiful and searchable if this error is corrected: It looks like row 7 should actually have 3 columns, instead of 2. in line 6.
date,value,target
20-Apr-12,110.98,105.23
23-Apr-12,146.70,140.11
24-Apr-12,130.28,135.11
25-Apr-12,120.00,120.00
26-Apr-12,110.70,117.00
27-Apr-12,116.00
30-Apr-12,123.98
1-May-12,158.13
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {padding: 100px; margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg {
border: 1px solid #ddd;
}
</style>
</head>
<body>
<script>
var margin = { top: 10, right: 10, bottom: 10, left: 10 };
var outerWidth = 350;
var outerHeight = 200;
var width = outerWidth - margin.left - margin.right;
var height = outerHeight - margin.bottom - margin.top;
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
var parseDate = d3.timeParse('%d-%b-%y');
var x = d3.scaleTime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var line = d3.line()
.curve(d3.curveCatmullRom)
.x(d => x(d.date))
.y(d => y(d.value));
var targetLine = d3.line()
.curve(d3.curveCatmullRom)
.x(d => x(d.date))
.y(d => y(d.target));
function draw(error, data) {
if (error) return;
data.forEach(d => {
d.value = +d.value;
d.target = +d.target;
d.date = parseDate(d.date);
});
x.domain(d3.extent(data, d => d.date));
y.domain([0, d3.max(data, d => d.value)]);
svg.append('g')
.append('path')
.datum(data)
.attr('stroke', 'skyblue')
.attr('opacity', '0.6')
.attr('stroke-width', '1.5')
.attr('stroke-dasharray', '5')
.attr('fill', 'none')
.attr('d', line);
var g = svg.append('g');
g.append('path')
.datum(data)
.attr('stroke', 'skyblue')
.attr('stroke-width', '1.5')
.attr('fill', 'none')
.attr('d', targetLine);
var last = data.filter(d => d.target).slice(-1).pop();
console.log(last);
g.append('circle')
.attr('stroke', 'skyblue')
.attr('stroke-width', '1.5')
.attr('fill', 'none')
.attr('cx', x(last.date) + 5 )
.attr('cy', y(last.target))
.attr('r', 4);
}
d3.csv('data.csv', draw);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment