rickj33 · October 5, 2016 21:00
diff --git a/.block b/.block
 license: gpl-3.0

diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

    .state {
        fill: orange;
        stroke: #000;

    }

    .state-boundary {
        fill: none;
        stroke: #fff;
    }

    .us {
        fill: #ccc;
    }

 </style>
 <body>
 <script src="//d3js.org/d3.v4.min.js"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <script src="//d3js.org/d3-tile.v0.0.min.js"></script>

 <script src="/rickj33/raw/6d2ae74b0f4ac9d15b899032e840d3e8/selectedZipcodes.js"></script>

 <script>


    var width = Math.max(960, window.innerWidth), height = Math.max(600, window.innerHeight);

    var pi = Math.PI, tau = 2 * pi;

    var projection = d3.geoMercator()
            .scale(1 / tau)
            .translate([0, 0]);


    var path = d3.geoPath().projection(projection);

    var tile = d3.tile()
            .size([width, height]);

    var zoom = d3.zoom()
            //.scaleExtent([1 << 11, 1 << 14])
            .on("zoom", zoomed);


    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);


    var raster = svg.append("g");


    var vector = svg.append("path");


    d3.json("/rickj33/raw/6d2ae74b0f4ac9d15b899032e840d3e8/midAtlanticZipcodeTopo.json", function(error, midAtlantic)
    {
        if (error)
 		{
 			throw error;
 		}
        var center = projection([-76.640625, 38.676933444637925]);
        svg.call(zoom)
                .call(zoom.transform, d3.zoomIdentity
                        .translate(width / 2, height / 2)
                        .scale(1 << 12)
                        .translate(-center[0], -center[1]));

        vector.attr("d", path(topojson.merge(midAtlantic, midAtlantic.objects.midAtlantic.geometries.filter(function(d)
                {
                    return selectedZipcodes.has(d.id);
                }))))
                .attr("class", "state");

    });


    function zoomed()
    {
        var transform = d3.event.transform;

        var tiles = tile
                .scale(transform.k)
                .translate([transform.x, transform.y])();

        vector
                .attr("transform", transform)
                .style("stroke-width", 1 / transform.k);

        var image = raster
                .attr("transform", stringify(tiles.scale, tiles.translate))
                .selectAll("image")
                .data(tiles, function(d)
                {
                    return d;
                });

        image.exit().remove();

        image.enter().append("image")
                .attr("xlink:href", function(d)
                {
                    return "http://" + "abc"[d[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png";
                })
                .attr("x", function(d)
                {
                    return d[0] * 256;
                })
                .attr("y", function(d)
                {
                    return d[1] * 256;
                })
                .attr("width", 256)
                .attr("height", 256);
    }

    function stringify(scale, translate)
    {
        var k = scale / 256, r = scale % 1 ? Number : Math.round;
        return "translate(" + r(translate[0] * scale) + "," + r(translate[1] * scale) + ") scale(" + k + ")";
    }
 </script>
diff --git a/midAtlanticDc.json b/midAtlanticDc.json
diff --git a/midAtlanticZipcodeTopo.json b/midAtlanticZipcodeTopo.json
diff --git a/selectedZipcodes.js b/selectedZipcodes.js
diff --git a/us.json b/us.json
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.state {
	fill: orange;
	stroke: #000;

	}

	.state-boundary {
	fill: none;
	stroke: #fff;
	}

	.us {
	fill: #ccc;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="//d3js.org/d3-tile.v0.0.min.js"></script>

	<script src="/rickj33/raw/6d2ae74b0f4ac9d15b899032e840d3e8/selectedZipcodes.js"></script>

	<script>


	var width = Math.max(960, window.innerWidth), height = Math.max(600, window.innerHeight);

	var pi = Math.PI, tau = 2 * pi;

	var projection = d3.geoMercator()
	.scale(1 / tau)
	.translate([0, 0]);


	var path = d3.geoPath().projection(projection);

	var tile = d3.tile()
	.size([width, height]);

	var zoom = d3.zoom()
	//.scaleExtent([1 << 11, 1 << 14])
	.on("zoom", zoomed);


	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);


	var raster = svg.append("g");


	var vector = svg.append("path");


	d3.json("/rickj33/raw/6d2ae74b0f4ac9d15b899032e840d3e8/midAtlanticZipcodeTopo.json", function(error, midAtlantic)
	{
	if (error)
	{
	throw error;
	}
	var center = projection([-76.640625, 38.676933444637925]);
	svg.call(zoom)
	.call(zoom.transform, d3.zoomIdentity
	.translate(width / 2, height / 2)
	.scale(1 << 12)
	.translate(-center[0], -center[1]));

	vector.attr("d", path(topojson.merge(midAtlantic, midAtlantic.objects.midAtlantic.geometries.filter(function(d)
	{
	return selectedZipcodes.has(d.id);
	}))))
	.attr("class", "state");

	});


	function zoomed()
	{
	var transform = d3.event.transform;

	var tiles = tile
	.scale(transform.k)
	.translate([transform.x, transform.y])();

	vector
	.attr("transform", transform)
	.style("stroke-width", 1 / transform.k);

	var image = raster
	.attr("transform", stringify(tiles.scale, tiles.translate))
	.selectAll("image")
	.data(tiles, function(d)
	{
	return d;
	});

	image.exit().remove();

	image.enter().append("image")
	.attr("xlink:href", function(d)
	{
	return "http://" + "abc"[d[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png";
	})
	.attr("x", function(d)
	{
	return d[0] * 256;
	})
	.attr("y", function(d)
	{
	return d[1] * 256;
	})
	.attr("width", 256)
	.attr("height", 256);
	}

	function stringify(scale, translate)
	{
	var k = scale / 256, r = scale % 1 ? Number : Math.round;
	return "translate(" + r(translate[0] * scale) + "," + r(translate[1] * scale) + ") scale(" + k + ")";
	}
	</script>