Project 5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Top 10 ZIP Codes by FY</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 10 ZIP Codes in FY 2018</h1>
    <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.4);

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(["#ffffff","#d5bedd","#c8a4d6", "#8e639e","#52325e"]);

d3.csv('Top_10_FY_Comb.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);

});

</script>
</body>
</html>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.4/d3-queue.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.4/d3-queue.min.js