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
 {"type":"Topology","objects":{"counties":{"type":"GeometryCollection","bbox":[67659.81385423527,7074.9440770806805,131759.45796981937,103902.19108878277],"geometries":[{"type":"Polygon","properties":{"state":"RI","county":"Providence County"},"id":44007,"arcs":[[0,1,2,3]]},{"type":"Polygon","properties":{"state":"RI","county":"Bristol County"},"id":44001,"arcs":[[-1,4]]},{"type":"Polygon","properties":{"state":"RI","county":"Kent County"},"id":44003,"arcs":[[5,6,7,-3]]},{"type":"MultiPolygon","properties":{"state":"RI","county":"Newport County"},"id":44005,"arcs":[[[8]],[[9]],[[10]],[[11]],[[12]],[[13]],[[14]],[[15]],[[16]]]},{"type":"MultiPolygon","properties":{"state":"RI","county":"Washington County"},"id":44009,"arcs":[[[17]],[[-7,18]]]}]},"state":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[1,5,18,7,3,4]],[[8]],[[9]],[[10]],[[11]],[[12]],[[13]],[[14]],[[15]],[[16]],[[17]]],"id":44,"properties":{"state":"RI"}}]}},"arcs":[[[7408,7216],[-438,-265]],[[6970,6951],[-35,44],[-52,-24],[38,-94],[-40,-15],[-41,68],[-4,119],[-87,47],[35,62],[-6,70],[-51,55],[-57,134],[-61,22],[-42,74],[-53,23],[-66,109],[176,68],[-38,40],[106,87],[37,83],[-8,169],[-61,66],[-59,-2],[7,-109],[-16,-68],[-59,-32],[-2,-87],[50,-20],[-119,-153],[-154,-2],[12,-82],[73,-111],[58,-4],[118,-84],[24,-77],[-121,-33],[-4,-86],[70,-130],[-84,0]],[[6454,7078],[-111,48],[-153,-25],[-95,-50],[-56,14],[-55,-27],[-138,-13],[-103,-133],[12,-91],[-61,-1],[-116,-87],[-978,-25],[-774,-14],[-391,-11],[-600,-5],[-1046,-18],[-504,-12]],[[1285,6628],[-15,523],[-63,1394],[-17,510],[-12,825],[422,18],[1158,18],[807,19],[571,9],[680,17],[241,19],[1520,19],[1,-530],[-6,-632],[-28,-10],[32,-269],[557,61],[-44,-318],[4,-46],[57,-78],[-37,-41],[18,-54],[-39,-69],[-9,-72],[35,8],[-3,-67],[-84,-119],[95,-165],[-19,-123],[144,-114],[21,-107],[136,-38]],[[7408,7216],[738,-274],[166,-171],[279,-274],[15,-36],[-42,-58],[-79,-49],[-90,-22],[3,117],[-28,73],[-102,39],[-40,-6],[-52,65],[-58,-3],[63,-94],[168,-186],[-3,-51],[131,-193],[-27,-121],[-105,11],[-76,-49],[-36,-111],[-77,-133],[-84,27],[-40,86],[21,79],[-124,86],[-15,111],[-64,67],[-77,-34],[21,-97],[-36,-94],[-90,-52],[-2,-75],[-39,-23],[-36,56],[-26,188],[50,120],[83,20],[35,53],[32,279],[74,63],[-27,155],[1,79],[50,-30],[62,6],[-32,67],[-33,189],[-84,-34],[17,-153],[-30,-87],[-31,-6],[-85,107],[-123,34],[-78,40],[-34,-20],[50,-53],[169,-34],[92,-99],[69,-50],[-50,-68],[-7,-60],[-81,52],[6,-99],[-27,-50],[-62,7],[-25,72],[19,51],[-39,30],[-160,35],[-226,3],[-36,102],[-142,124],[8,91]],[[6454,7078],[35,-16],[48,-92],[60,-24],[-47,-63],[83,-36],[-59,-66],[-92,-19],[160,-164],[128,-58],[112,14],[13,-25],[-116,-43],[19,-91],[-14,-74],[29,-82],[-80,-46],[-42,-63],[-6,-107],[-49,-56],[-42,-2],[-123,65],[-9,89],[17,124],[-61,-14],[14,-61],[-100,3],[-35,104],[-48,10],[7,-72],[-87,0],[61,-45],[-90,-6],[-124,21],[-196,10],[-78,94],[-81,1],[69,-52],[-38,-44],[35,-104],[36,-47],[-24,-57],[23,-97],[-104,-86],[26,-58],[111,105],[21,101],[163,25],[37,29],[64,-60],[138,-40],[-1,-46],[-201,-29],[-61,-51]],[[5955,5777],[-59,1],[-106,-68],[-72,-85],[-15,-60],[-62,-25],[-98,93],[-139,-68],[6,-41],[-138,-61],[-71,-80],[33,-39],[1,-117],[-479,-2],[-464,-12],[-783,-9],[-333,0],[-137,-22],[-1176,1],[-580,-20]],[[1283,5163],[30,679],[-28,786]],[[6341,4039],[-60,-11],[27,76],[71,16],[-38,-81]],[[7303,4127],[-47,2],[36,85],[42,-63],[-31,-24]],[[6816,3939],[53,-84],[49,-34],[-99,-33],[-98,6],[-54,-39],[-49,131],[-84,19],[55,-224],[-23,-45],[-70,20],[-25,-130],[-126,-66],[-4,151],[72,40],[-44,91],[23,51],[-44,172],[156,3],[63,-22],[-25,55],[72,120],[-152,102],[-7,123],[36,96],[40,48],[-7,83],[18,116],[116,172],[57,31],[109,-52],[42,-164],[-2,-68],[-61,-117],[46,-145],[-64,-117],[23,-54],[75,-12],[4,-45],[-88,-74],[-18,-50],[35,-55]],[[6761,5194],[-47,-15],[60,85],[40,-23],[-53,-47]],[[7967,5641],[-129,-10],[-20,53],[102,56],[47,-99]],[[8724,5639],[-37,-62],[-41,51],[-169,-56],[-22,-49],[91,0],[74,-31],[79,26],[2,-53],[-192,-16],[-87,-29],[-8,-133],[-22,-95],[2,-165],[96,-97],[-32,-226],[45,-44],[-23,-82],[-2,-124],[102,-80],[-30,-92],[-106,-145],[-35,-87],[-57,-61],[-15,-71],[55,-38],[64,11],[-31,-117],[-87,-33],[5,107],[-86,49],[-142,28],[-138,-106],[-92,89],[-113,17],[-82,-48],[1,-174],[-82,-61],[-15,-106],[-99,-41],[-15,68],[-50,-32],[-78,67],[-111,-84],[-76,36],[-6,-64],[-87,33],[-144,-50],[-54,115],[-36,37],[237,129],[100,89],[19,-35],[-23,-96],[252,98],[-16,117],[-44,15],[-3,131],[-18,61],[29,45],[-19,52],[-69,39],[59,39],[33,-26],[118,26],[-20,143],[61,53],[-26,85],[68,105],[147,176],[81,20],[40,51],[-27,136],[86,56],[91,157],[10,68],[-22,70],[46,48],[62,6],[66,41],[32,64],[104,60],[165,-6],[145,91],[68,98],[-2,-62],[47,-65],[9,-61]],[[6884,5893],[56,-29],[-28,-62],[-53,-29],[-74,117],[99,3]],[[7144,5799],[31,-62],[-93,-42],[-5,-37],[186,-89],[162,-13],[102,-58],[60,-87],[10,-145],[-111,-178],[-72,-88],[-88,-40],[-78,12],[-64,61],[-18,99],[40,121],[54,49],[52,158],[-94,74],[-240,59],[-19,157],[38,8],[59,71],[-61,22],[28,89],[36,17],[21,-53],[58,-33],[6,-72]],[[9891,4749],[69,-441],[24,-258],[-185,-51],[-77,-43],[20,-82],[-143,-93],[-115,1],[-138,-85],[16,-85],[-185,-11],[-149,-40],[-23,87],[47,6],[10,107],[24,41],[-23,90],[-77,56],[-41,74],[-72,36],[64,147],[-95,182],[38,112],[-1,60],[-115,24],[-22,117],[-69,22],[39,47],[101,-42],[32,260],[-72,39],[116,149],[-68,71],[-34,81],[13,75],[-58,92],[52,123],[63,217],[112,155],[30,72],[255,-40],[-2,-38],[567,-89],[-36,-365],[-62,-55],[-17,-106],[16,-106],[115,-141],[56,-372]],[[4153,888],[84,-10],[95,-128],[-16,-47],[-77,-93],[-60,-124],[27,-158],[115,-17],[23,-58],[98,-43],[15,-36],[-32,-95],[-42,-20],[-218,-36],[-176,-1],[-179,-22],[-85,4],[-134,71],[-22,69],[29,105],[43,52],[21,93],[142,75],[29,122],[50,-36],[-31,-58],[41,-7],[84,-81],[118,-25],[38,106],[-62,32],[9,65],[-30,44],[-90,-18],[90,146],[1,177],[102,-48]],[[5955,5777],[179,40],[97,-45],[3,-119],[63,-160],[-28,-24],[-89,5],[-80,-24],[27,-34],[123,10],[62,-37],[-34,-60],[-69,-1],[-78,-69],[24,-34],[142,-11],[-4,-132],[-116,-42],[-132,-10],[-118,-34],[-78,-57],[-33,87],[-47,-10],[-40,-67],[-28,33],[4,77],[-100,-64],[0,-45],[85,-8],[51,-44],[81,-22],[23,-38],[-7,-87],[146,-52],[-36,-64],[-40,18],[-18,-45],[37,-28],[83,-2],[32,-71],[68,-42],[32,-82],[1,-184],[-76,-154],[16,-174],[29,-32],[-5,-106],[-25,-29],[-61,34],[-60,-17],[-13,-67],[55,-87],[-3,-37],[-66,-55],[-10,-54],[-89,-53],[-117,-10],[-105,-81],[18,-119],[31,-65],[-7,-83],[-122,-103],[-13,-53],[-70,-27],[-76,-79],[-68,-117],[-58,-57],[66,-124],[-126,0],[-14,36],[-99,72],[-96,48],[-98,6],[29,132],[94,94],[58,135],[6,123],[-48,40],[-59,-52],[-117,-226],[-37,-135],[51,-122],[-93,33],[-133,-3],[-74,-34],[-156,16],[-486,-84],[-169,-43],[-278,-19],[-271,-75],[-248,-50],[-334,-82],[-185,-64],[-75,-50],[-142,-40],[-53,14],[-158,-12],[-200,-38],[-41,-34],[-178,53],[-203,-22],[-270,-44],[-450,-87],[-301,-120],[-12,41],[-114,1],[-161,-39],[-73,8],[19,44],[236,30],[97,-2],[2,54],[149,70],[2,77],[199,99],[51,52],[-27,86],[-54,29],[-45,76],[8,51],[63,56],[-7,30],[50,91],[-62,28],[19,57],[-109,54],[16,106],[-33,56],[41,75],[75,-5],[119,42],[48,40],[117,1],[141,-41],[49,12],[17,376],[51,725],[51,967]]],"transform":{"scale":[0.039723976483587504,-0.06000600060005999],"translate":[101.39997957030423,600]}}
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;
	}