Skip to content

Instantly share code, notes, and snippets.

@mtandre

mtandre/index.html

Last active September 30, 2017 08:50
Show Gist options
  • Save mtandre/358ad238de5296cea16830cc2695c1a0 to your computer and use it in GitHub Desktop.
Save mtandre/358ad238de5296cea16830cc2695c1a0 to your computer and use it in GitHub Desktop.
Download ZIP
Sullivan, WI snow depth early 2016
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>line chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
text { font-family:monospace; font-size:11px; }
.line { fill:none; stroke:steelblue; stroke-width:2px; }
.street-parking-line { stroke:red; stroke-dasharray:2, 3; stroke-width:1px; }
.street-parking-text { fill:red; text-anchor:end; }
</style>
</head>
<body>
<svg></svg>
<script type="text/javascript">
var w = 800,
h = 350,
padding = 40;
var svg, dataset, xScale, yScale, xAxis, yAxis, line;
var rowConverter = function(d) {
return {
date: new Date(+d.year, (+d.month - 1), +d.day),
snowDepth: parseFloat(d.depth)
};
}
var formatTime = d3.timeFormat("%m/%d");
d3.csv('sullivan-snow-depth.csv', rowConverter, function(data) {
dataset = data;
console.table(dataset, ['date', 'snowDepth']);
xScale = d3.scaleTime()
.domain([
d3.min(dataset, function(d) { return d.date; }),
d3.max(dataset, function(d) { return d.date; })
])
.range([padding, w - padding]);
yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) { return d.snowDepth; })])
.range([h - padding, padding]);
xAxis = d3.axisBottom()
.scale(xScale)
.ticks(10)
.tickFormat(formatTime);
yAxis = d3.axisLeft()
.scale(yScale)
.ticks(10);
line = d3.line()
.curve(d3.curveMonotoneX) // https://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529
.defined(function(d){return d.snowDepth >= 0;}) // not needed but a reminder this exists
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d.snowDepth); });
svg = d3.select('svg')
.attr('width', w)
.attr('height', h);
svg.append('clipPath')
.attr('id', 'chart-area')
.append('rect')
.attr('x', padding)
.attr('y', padding - 10)
.attr('width', w - padding * 2)
.attr('height', h - padding * 2 + 10);
svg.append('path')
.datum(dataset)
.attr('class', 'line')
.attr('clip-path', 'url(#chart-area)')
.attr('d', line);
svg.append('line')
.attr('class', 'line street-parking-line')
.attr('x1', padding)
.attr('x2', w - padding)
.attr('y1', yScale(4))
.attr('y2', yScale(4));
svg.append('text')
.text('no street parking')
.attr('class', 'street-parking-text')
.attr('x', w - padding)
.attr('y', yScale(4.1));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
sullivan-snow-depth.csv
year month day depth
2016 01 01 6
2016 01 02 6
2016 01 03 6
2016 01 04 6
2016 01 05 6
2016 01 06 6
2016 01 07 5
2016 01 08 3
2016 01 09 4
2016 01 10 4
2016 01 11 6
2016 01 12 6
2016 01 13 6
2016 01 14 6
2016 01 15 5
2016 01 16 5
2016 01 17 5
2016 01 18 5
2016 01 19 4
2016 01 20 4
2016 01 21 4
2016 01 22 4
2016 01 23 4
2016 01 24 4
2016 01 25 4
2016 01 26 4
2016 01 27 4
2016 01 28 4
2016 01 29 4
2016 01 30 3
2016 01 31 2
2016 02 01 2
2016 02 02 2
2016 02 03 2
2016 02 04 2
2016 02 05 2
2016 02 06 1
2016 02 07 1
2016 02 08 2
2016 02 09 2
2016 02 10 2
2016 02 11 2
2016 02 12 2
2016 02 13 1
2016 02 14 2
2016 02 15 3
2016 02 16 3
2016 02 17 2
2016 02 18 1
2016 02 19 0
2016 02 20 0
2016 02 21 0
2016 02 22 0
2016 02 23 0
2016 02 24 0
2016 02 25 0
2016 02 26 0
2016 02 27 0
2016 02 28 0
2016 02 29 0
2016 03 01 4
2016 03 02 2
2016 03 03 2
2016 03 04 3
2016 03 05 1
2016 03 06 0
2016 03 07 0
2016 03 08 0
2016 03 09 0
2016 03 10 0
2016 03 11 0
2016 03 12 0
2016 03 13 0
2016 03 14 0
2016 03 15 0
2016 03 16 0
2016 03 17 0
2016 03 18 0
2016 03 19 0
2016 03 20 0
2016 03 21 0
2016 03 22 0
2016 03 23 0
2016 03 24 2
2016 03 25 0
2016 03 26 0
2016 03 27 0
2016 03 28 0
2016 03 29 0
2016 03 30 0
2016 03 31 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment