Built with blockbuilder.org
forked from 4xDMG's block: FEM: Exercise 1 starter
forked from 4xDMG's block: FEM: Exercise 1 starter
forked from anonymous's block: FEM: Exercise 1 starter
forked from tw15egan's block: Austin TX Average Temperature (OCT 2011 - SEPT 2012)
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>
const city = 'New York';
const width = 800;
const height = 300;
const margin = { top: 20, bottom: 20, left: 40, right: 20 }
const rectWid = 5;
// dataset of city temperatures across time
d3.tsv('data.tsv', (err, data) => {
// clean the data
data.forEach(d => {
d.date = d3.timeParse("%Y%m%d")(d.date);
d.date = new Date(d.date); // x
d[city] = +d[city]; // y
});
const xExtent = d3.extent(data, d => d.date);
const yExtent = d3.extent(data, d => d[city]);
const xScale = d3.scaleTime()
.domain(xExtent)
.range([margin.left, width - margin.right]);
const yScale = d3.scaleLinear()
.domain(yExtent)
.range([height - margin.bottom, margin.top]);
const svg = d3.select('svg');
const bar = svg.selectAll('rect')
.data(data)
.enter().append('rect')
.attr('x', (d, i) => xScale(d.date))
.attr('y', d => yScale(d[city]))
.attr('width', rectWid)
.attr('height', d => height - yScale(d[city]))
.attr('fill', '#3b4ab8')
.attr('fill', d => {
let temp = d[city];
switch(true) {
case temp < 40:
return '#1D4E89'
case temp < 50:
return '#00B2CA'
case temp < 60:
return '#7DCFB6'
case temp < 70:
return '#FBD1A2'
case temp < 80:
return '#F79256'
default:
return '#F71C00'
}
});
const xAxis = d3.axisBottom()
.ticks(10)
// .tickFormat(d => d3.timeFormat('%b %Y')(d))
.tickFormat(d3.timeFormat('%b %Y'))
.scale(xScale);
const yAxis = d3.axisLeft()
.scale(yScale);
svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(xAxis)
svg.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(yAxis)
});
</script>
</body>
https://d3js.org/d3.v4.min.js