mwalks/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Top 10 ZIP Codes by FY</title>
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="http://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>

## Top_10_FY_Comb.csv

          
            Zip
            City
            State
            Num_Tickets

            
              1
              Dublin (43017)
              Dublin
              OH
              2808

            
              2
              Hilliard (43026)
              Hilliard
              OH
              2288

            
              3
              Powell (43065)
              Powell
              OH
              2436

            
              4
              Westerville (43081)
              Westerville
              OH
              2818

            
              5
              Worthington (43085)
              Worthington
              OH
              2079

            
              6
              Urbancrest (43123)
              Urbancrest
              OH
              2354

            
              7
              The Short North (43201)
              The Short North
              OH
              2374

            
              8
              Clintonville (43214)
              Clintonville
              OH
              2562

            
              9
              Upper Arlington (43221)
              Upper Arlington
              OH
              2989

            
              10
              Gahanna (43230)
              Gahanna
              OH
              1988
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Top 10 ZIP Codes by FY</title>
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script src="http://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>
	Zip	City	State	Num_Tickets
1	Dublin (43017)	Dublin	OH	2808
2	Hilliard (43026)	Hilliard	OH	2288
3	Powell (43065)	Powell	OH	2436
4	Westerville (43081)	Westerville	OH	2818
5	Worthington (43085)	Worthington	OH	2079
6	Urbancrest (43123)	Urbancrest	OH	2354
7	The Short North (43201)	The Short North	OH	2374
8	Clintonville (43214)	Clintonville	OH	2562
9	Upper Arlington (43221)	Upper Arlington	OH	2989
10	Gahanna (43230)	Gahanna	OH	1988