waleedshkt · April 21, 2020 16:17
diff --git a/.block b/.block
 license: gpl-3.0
 height: 250
 border: no
diff --git a/README.md b/README.md
diff --git a/app.js b/app.js
 var App = (function () {
    "use strict";

    var App = {
        stateCode: window.location.search.substr(1) || 'ma'
    };

    d3.json("us-" + App.stateCode + ".json", ready);

    function ready(error, topo) {
        if (error) throw error;

        App.state = topojson.feature(topo, topo.objects.state);
        App.counties = topojson.feature(topo, topo.objects.counties).features;

        App.div = d3.select('#app');
        App.size = [
            parseInt(App.div.style('width')), parseInt(App.div.style('height'))
        ];

        App.path = d3.geoPath()
            .projection(null);

        App.transform = zoomBounds(App.path.bounds(App.state), App.size);

        App.zoom = d3.zoom()
            .translateExtent([[0, 0], App.size])
            .scaleExtent([App.transform.k, App.transform.k * 2])
            .on("zoom", zoomed);

        App.svg = App.div.append("svg")
            .call(App.zoom);

        App.svg.append("rect")
            .classed("background", true)
            .on("click", reset);

        App.g = App.svg.append("g")
            .attr("transform", App.transform);

        App.g.selectAll("path")
            .data(App.counties)
            .enter().append("path")
            .classed("county", true)
            .attr("d", App.path)
            .on("click", clicked);

        reset();
    }

    function zoomBounds(bounds, size) {
        // Calculate dimensions of bounds
        // and scale to fit inside container
        var width = bounds[1][0] - bounds[0][0],
            height = bounds[1][1] - bounds[0][1],
            scale = 1 / Math.max(width / size[0], height / size[1]);

        // Calculate center of bounds
        // and difference from center of container
        var x = (bounds[0][0] + bounds[1][0]) / 2,
            y = (bounds[0][1] + bounds[1][1]) / 2,
            translate = [size[0] / 2 - scale * x, size[1] / 2 - scale * y];

        return d3.zoomIdentity
            .translate(translate[0], translate[1])
            .scale(scale);
    }

    function zoomed() {
        App.g.attr("transform", d3.event.transform);
    }

    function reset() {
        App.svg.call(App.zoom.transform, App.transform);
    }

    function clicked() {
        App.svg.select(".active")
            .classed("active", false);

        d3.select(this)
            .classed("active", true);
    }

    return App;
 })();
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>State Zooming</title>

    <link href="style.css" rel="stylesheet">
 </head>
 <body>
    <div id="app"></div>

    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <script src="app.js"></script>
 </body>
diff --git a/style.css b/style.css
 #app {
    margin: 0 auto;
    height: 200px;
    width: 300px;
 }

 /*
 @media screen and (min-width: 640px) {
    #app {
        height: 600px;
        width: 600px;
    }
 }
 */

 svg {
    border: 1px solid #ccc;
    display: block;
    height: 100%;
    width: 100%;
 }

 .background {
    height: 100%;
    width: 100%;
    fill: none;
    pointer-events: all;
 }

 .county {
    fill: #ccc;
    stroke: #fff;
    stroke-linejoin: round;
 }

 .county.active {
    fill: orange;
 }
diff --git a/us-ca.json b/us-ca.json
diff --git a/us-fl.json b/us-fl.json
diff --git a/us-ma.json b/us-ma.json
diff --git a/us-oh.json b/us-oh.json
diff --git a/us-ri.json b/us-ri.json
diff --git a/us-wa.json b/us-wa.json
	var App = (function () {
	"use strict";

	var App = {
	stateCode: window.location.search.substr(1) \|\| 'ma'
	};

	d3.json("us-" + App.stateCode + ".json", ready);

	function ready(error, topo) {
	if (error) throw error;

	App.state = topojson.feature(topo, topo.objects.state);
	App.counties = topojson.feature(topo, topo.objects.counties).features;

	App.div = d3.select('#app');
	App.size = [
	parseInt(App.div.style('width')), parseInt(App.div.style('height'))
	];

	App.path = d3.geoPath()
	.projection(null);

	App.transform = zoomBounds(App.path.bounds(App.state), App.size);

	App.zoom = d3.zoom()
	.translateExtent([[0, 0], App.size])
	.scaleExtent([App.transform.k, App.transform.k * 2])
	.on("zoom", zoomed);

	App.svg = App.div.append("svg")
	.call(App.zoom);

	App.svg.append("rect")
	.classed("background", true)
	.on("click", reset);

	App.g = App.svg.append("g")
	.attr("transform", App.transform);

	App.g.selectAll("path")
	.data(App.counties)
	.enter().append("path")
	.classed("county", true)
	.attr("d", App.path)
	.on("click", clicked);

	reset();
	}

	function zoomBounds(bounds, size) {
	// Calculate dimensions of bounds
	// and scale to fit inside container
	var width = bounds[1][0] - bounds[0][0],
	height = bounds[1][1] - bounds[0][1],
	scale = 1 / Math.max(width / size[0], height / size[1]);

	// Calculate center of bounds
	// and difference from center of container
	var x = (bounds[0][0] + bounds[1][0]) / 2,
	y = (bounds[0][1] + bounds[1][1]) / 2,
	translate = [size[0] / 2 - scale * x, size[1] / 2 - scale * y];

	return d3.zoomIdentity
	.translate(translate[0], translate[1])
	.scale(scale);
	}

	function zoomed() {
	App.g.attr("transform", d3.event.transform);
	}

	function reset() {
	App.svg.call(App.zoom.transform, App.transform);
	}

	function clicked() {
	App.svg.select(".active")
	.classed("active", false);

	d3.select(this)
	.classed("active", true);
	}

	return App;
	})();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>State Zooming</title>

	<link href="style.css" rel="stylesheet">
	</head>
	<body>
	<div id="app"></div>

	<script src="//d3js.org/d3.v4.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="app.js"></script>
	</body>
	#app {
	margin: 0 auto;
	height: 200px;
	width: 300px;
	}

	/*
	@media screen and (min-width: 640px) {
	#app {
	height: 600px;
	width: 600px;
	}
	}
	*/

	svg {
	border: 1px solid #ccc;
	display: block;
	height: 100%;
	width: 100%;
	}

	.background {
	height: 100%;
	width: 100%;
	fill: none;
	pointer-events: all;
	}

	.county {
	fill: #ccc;
	stroke: #fff;
	stroke-linejoin: round;
	}

	.county.active {
	fill: orange;
	}