D3 Examples - Project 5

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Top 5 ZIP Codes by Month</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.4/d3-queue.min.js"></script>
    <style>
        html, body, #vis {
            height: 100%;
            margin: 0;
        }
        form, select {
            text-align: center;
        }
    </style>
</head>
<body>
<h1 align="center">Top 5 ZIP Codes by Month</h1>
    <form>
        <select name="month" id="month" style="height:50px">
            <option value="July 2017">July 2017</option>
            <option value="August 2017">August 2017</option>
            <option value="September 2017">September 2017</option>
            <option value="October 2017">October 2017</option>
            <option value="November 2017">November 2017</option>
            <option value="December 2017">December 2017</option>
            <option value="January 2018">January 2018</option>
            <option value="February 2018">February 2018</option>
            <option value="March 2018">March 2018</option>
            <option value="April 2018">April 2018</option>
            <option value="May 2018">May 2018</option>
            <option value="June 2018" selected>June 2018</option>
        </select>
    </form>
    <div id="vis">
    </div>
    <script>
  
  
var width = document.getElementById('vis')
    .clientWidth;
var height = document.getElementById('vis')
    .clientHeight;
​
var margin = {
    top: 10,
    bottom: 70,
    left: 70,
    right: 20
};
​
var svg = d3.select('#vis')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
​
​
width = width - margin.left - margin.right;
height = height - margin.top - margin.bottom;
​
var x_scale = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.2);
​
var y_scale = d3.scaleLinear()
    .range([height, 0]);
​
svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + height + ')');
​
svg.append("text")             
.attr("transform",
      "translate(" + (width/2) + " ," + 
                     (height + margin.top + 40) + ")")
.style("text-anchor", "middle")
.text("Zip");
​
svg.append('g')
    .attr('class', 'y axis');
​
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Number of Tickets"); 
​
​
var y_axis = d3.axisLeft(y_scale);
var x_axis = d3.axisBottom(x_scale);
​
​
var colour_scale = d3.scaleQuantile()
    .range(["#d9f0a3", "#78c679", "#41ab5d", "#006837", "#004529"]);
​
​
​
function update(month) {
    d3.csv('Top_5_' + month + '.csv', function(csv_data) {
​
        var t = d3.transition()
            .duration(1500);
​
        var zips = csv_data.map(function(d) {
            return d.Zip;
        });
        x_scale.domain(zips);
​
        var max_value = d3.max(csv_data, function(d) {
            return d.Num_Tickets;
        });
        y_scale.domain([0, max_value]);
        colour_scale.domain([0, max_value]);
​
        var bars = svg.selectAll('.bar')
            .data(csv_data);
        
        //exit
        bars
            .exit()
            .remove();
​
        //enter
        var new_bars = bars
            .enter()
            .append('rect')
            .attr('class', 'bar')
            .attr('height', 0)
            .attr('y', height)
            .attr('width', x_scale.bandwidth());
​
        //update
        new_bars.merge(bars)
            .transition(t)
            .attr('x', function(d) {
                return x_scale(d.Zip);
            })
            .attr('y', function(d) {
                return y_scale(d.Num_Tickets);
            })
            .attr('height', function(d) {
                return height - y_scale(d.Num_Tickets);
            })
            .attr('fill', function(d) {
                return colour_scale(d.Num_Tickets);
            });
​
        svg.select('.x.axis')
            .transition(t)
            .call(x_axis);
​
        svg.select('.y.axis')
            .transition(t)
            .call(y_axis);
​
    });
}
​
var select = d3.select('#month');
select.on('change', function() {
    console.log(this.value);
    update(this.value);
})
​
update('June 2018');
​
  
  </script>
</body>
</html>
​
    