FEM: Exercise 1 bar

forked from 4xDMG's block: FEM: Exercise 1 starter

<!DOCTYPE html>
<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