niallmackenzie/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

    .overlay {
        fill: none;
        pointer-events: all;
    }

    .municipality {
        fill: #aaa;
    }

    .county-border,
    .municipality-border {
        fill: none;
        stroke: #fff;
        stroke-linejoin: round;
        stroke-linecap: round;
    }

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script>

    var width = 960,
            height = 500;

    var projection = d3.geo.mercator()

    // Create a path generator
    var path = d3.geo.path()
            .projection(projection);

    var zoom = d3.behavior.zoom()
            .translate([0, 0])
            .scale(1)
            .scaleExtent([1, 8])
            .on("zoom", zoomed);

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

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

    svg.append("rect")
            .attr("class", "overlay")
            .attr("width", width)
            .attr("height", height)
            .call(zoom);

    d3.json("swedenFullKommun.json", function(error, swedenFullKommun) {
        if (error) throw error;

        var komms = topojson.feature(swedenFullKommun, swedenFullKommun.objects.swedenFullKommun3),
                jkKom = komms.features.filter(function(d) { return d.properties.KnKod == '2305'; })[0];

        // Create a unit projection
        projection
                .scale(1)
                .translate([0, 0]);

        // Compute the bounds of a feature of interest, then derive scale & translate
        var b = path.bounds(jkKom),
                // The first (boundary percetage) value is a useful cheat to control the zoom
                s = .035 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
                t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

        // Update the projection to use computed scale & translate
        projection
                .scale(s)
                .translate(t);

        features.append("path")
                .datum(topojson.feature(swedenFullKommun, swedenFullKommun.objects.swedenFullKommun3))
                .attr("class", "municipality")
                .attr("d", path);

        features.append("path")
                .datum(topojson.mesh(swedenFullKommun, swedenFullKommun.objects.swedenFullKommun3, function(a, b) { return a !== b; }))
                .attr("class", "municipality-border")
                .attr("d", path)
                .style("stroke-width", ".5px");

        features.append("path")
                .datum(topojson.mesh(swedenFullKommun, swedenFullKommun.objects.swedenFullKommun3, function(a, b) { return a.properties.LnKod !== b.properties.LnKod; }))
                .attr("class", "county-border")
                .attr("d", path)
                .style("stroke-width", "1.5px");
    });

    function zoomed() {
        features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        features.select(".municipality-border").style("stroke-width", .5 / d3.event.scale + "px");
        features.select(".county-border").style("stroke-width", 1.5 / d3.event.scale + "px");
    }

    d3.select(self.frameElement).style("height", height + "px");

</script>

## swedenFullKommun.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              swedenFullKommun.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.overlay {
	fill: none;
	pointer-events: all;
	}

	.municipality {
	fill: #aaa;
	}

	.county-border,
	.municipality-border {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	stroke-linecap: round;
	}

	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var projection = d3.geo.mercator()

	// Create a path generator
	var path = d3.geo.path()
	.projection(projection);

	var zoom = d3.behavior.zoom()
	.translate([0, 0])
	.scale(1)
	.scaleExtent([1, 8])
	.on("zoom", zoomed);

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

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

	svg.append("rect")
	.attr("class", "overlay")
	.attr("width", width)
	.attr("height", height)
	.call(zoom);

	d3.json("swedenFullKommun.json", function(error, swedenFullKommun) {
	if (error) throw error;

	var komms = topojson.feature(swedenFullKommun, swedenFullKommun.objects.swedenFullKommun3),
	jkKom = komms.features.filter(function(d) { return d.properties.KnKod == '2305'; })[0];

	// Create a unit projection
	projection
	.scale(1)
	.translate([0, 0]);

	// Compute the bounds of a feature of interest, then derive scale & translate
	var b = path.bounds(jkKom),
	// The first (boundary percetage) value is a useful cheat to control the zoom
	s = .035 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
	t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

	// Update the projection to use computed scale & translate
	projection
	.scale(s)
	.translate(t);

	features.append("path")
	.datum(topojson.feature(swedenFullKommun, swedenFullKommun.objects.swedenFullKommun3))
	.attr("class", "municipality")
	.attr("d", path);

	features.append("path")
	.datum(topojson.mesh(swedenFullKommun, swedenFullKommun.objects.swedenFullKommun3, function(a, b) { return a !== b; }))
	.attr("class", "municipality-border")
	.attr("d", path)
	.style("stroke-width", ".5px");

	features.append("path")
	.datum(topojson.mesh(swedenFullKommun, swedenFullKommun.objects.swedenFullKommun3, function(a, b) { return a.properties.LnKod !== b.properties.LnKod; }))
	.attr("class", "county-border")
	.attr("d", path)
	.style("stroke-width", "1.5px");
	});

	function zoomed() {
	features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	features.select(".municipality-border").style("stroke-width", .5 / d3.event.scale + "px");
	features.select(".county-border").style("stroke-width", 1.5 / d3.event.scale + "px");
	}

	d3.select(self.frameElement).style("height", height + "px");

	</script>