Built with blockbuilder.org
forked from 4xDMG's block: FEM: Exercise 1 starter
forked from 4xDMG's block: FEM: Exercise 1 starter
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;width:100%; }
svg {
width: 100%;
height: 100%;
}
.btnContainer {
display: inline-block;
width:80%;
margin: 20px auto;
text-align: center;
}
.button {
border: 1px solid steelblue;
background-color: steelblue;
padding: .5em .8em;
}
.button:hover {
cursor: pointer;
opacity: .8;
}
.button:nth-of-type(2){
margin-left: 30px;
margin-right: 30px;
}
.active {
background-color: #b47846;
border-color: #b47846;
}
</style>
</head>
<body>
<div class="btnContainer">
<span class="button" id="sf" onclick="updateCity('San Francisco')">San Francisco</span>
<span class="button" id="an" onclick="updateCity('Austin')">Austin</span>
<span class="button" id="ny" onclick="updateCity('New York')">New York</span>
</div>
<svg></svg>
<script>
function updateCity(c){
d3.selectAll('g').remove();
var city = c;
var width = 800;
var height = 300;
var margin = {top: 20, right: 20, bottom: 20, left: 20};
if(c === 'New York'){
d3.select('#ny').classed('active', true);
d3.select('#sf').classed('active', false);
d3.select('#an').classed('active', false);
} else if ( c === 'San Francisco') {
d3.select('#sf').classed('active', true);
d3.select('#ny').classed('active', false);
d3.select('#an').classed('active', false);
} else {
d3.select('#an').classed('active', true);
d3.select('#sf').classed('active', false);
d3.select('#ny').classed('active', false);
}
// 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
});
// scales
var extentCity = d3.extent(data, d => d[city]);
var extentDate = d3.extent(data, d => d.date);
var xScale = d3.scaleTime()
.domain(extentDate)
.range([margin.left, width]);
var yScale = d3.scaleLinear()
.domain(extentCity)
.range([height - margin.top, margin.bottom]);
var colorScale = d3.scaleLinear()
.domain(extentCity)
.range(['red', 'blue']);
var t = d3.transition()
.duration(1000);
//selections
var u = d3.select('svg')
.selectAll('rect')
.data(data);
u.exit()
.transition(t)
.attr('height', 0)
.remove();
//enter() + update()
var entering = u.enter()
.append('rect')
.merge(u)
.attr('width', function(d, i){
return width / (data.length);
})
.attr('transform', 'translate(' + (margin.left + margin.right) +', ' + margin.top +')')
.transition(t)
.attr('height', function(d){
return yScale(d[city]);
})
.attr('x', function(d, i){
return i * d3.select(this).attr('width');
})
.attr('y', function(d){
return height - yScale(d[city]);
})
.attr('fill', function(d, i){
return colorScale(d[city]);
});
//x-axis and y-axis
var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale);
d3.select('svg')
.append('g')
.attr('transform', 'translate(' + margin.left + ', ' + (height + margin.top) + ')')
.call(xAxis);
d3.select('svg')
.append('g')
.attr('transform', 'translate(' + (margin.left + margin.right) + ', ' + margin.top +')')
.call(yAxis);
});
}
updateCity('New York');
</script>
</body>
https://d3js.org/d3.v4.min.js