Built with blockbuilder.org
forked from MasDenBy's block: test: city temperature
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg {
width:100%;
height:100%;
}
</style>
</head>
<body>
<svg></svg>
<script>
var city = 'San Francisco';
var width = 800;
var height = 300;
var margin = {top: 20, bottom: 20, left: 20, right: 20};
d3.tsv('data.tsv', (err, data) => {
data.forEach(d=> {
d.date = d3.timeParse("%Y%m%d")(d.date);
d.date = new Date(d.date);
++d[city];
});
var xExtent = d3.extent(data, d => d.date);
var xScale = d3.scaleTime()
.domain(xExtent)
.range([margin.left, width - margin.right]);
var yExtent = d3.extent(data, d => d[city]);
var yScale = d3.scaleLinear()
.domain(yExtent)
.range([height - margin.bottom, margin.top]);
var line = d3.line()
.x(d => xScale(d.date))
.y(d => yScale(d[city]))
.curve(d3.curveCatmullRom);
var svg = d3.select('svg');
svg.append('path')
.attr('d', line(data))
.attr('fill', 'none')
.attr('stroke', 'blue');
var yAxis = d3.axisLeft()
.scale(yScale);
var xAxis = d3.axisBottom()
.scale(xScale)
.tickFormat(d3.timeFormat('%b %Y'));
svg.append('g')
.attr('transform', 'translate(' + [margin.left, 0] +')')
.call(yAxis);
svg.append('g')
.attr('transform', 'translate(' + [0, height - margin.bottom] +')')
.call(xAxis);
});
</script>
</body>
https://d3js.org/d3.v4.min.js