Map 8 - map w. zoom

A demo of TopoJSON on a U.S. counties shapefile from the U.S. census bureau. The same TopoJSON file can also be used to show states.

forked from mbostock's block: U.S. Counties TopoJSON

forked from anonymous's block: U.S. Counties TopoJSON

forked from GitNoise's block: Map 5 - lan, topojson

forked from GitNoise's block: Map 6 - dotmap, kommun, stockholm

forked from GitNoise's block: Map 7 - dotmap

forked from GitNoise's block: Map 8 - map w. zoom

forked from anonymous's block: Map 8 - map w. zoom

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <style>
    table {
      width: 100%;
    }
    td {
     	vertical-align: top;
    }
    
    path {
      stroke: #fff;
      stroke-width: .5px;
    }
   
    .caption {
      font-size: 30px;
      font-family: Verdana, Geneva, sans-serif;
    }

.base {
      fill: #ccc;
    }

.overlay {
      fill: #fa9fb5;
    }

#andel {
      font-weight: bold;
      font-size: 1.2em;
    }
    
    .home {
      stroke: steelblue;
      stroke-width: 2px;
    }

.description {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .active {
      stroke: black;
      stroke-width: 1.5px;
    }

</style>

<body>
  <div class='description'>
    <p>
      Normaliserat data för hur många som flyttar från sin hemkommun till stad vald i drop down. <br/> 
			Färgintensitet (röd) motsvarar hur stor andel av befolkningen i en kommun som flyttat.
    </p>
    <p>
      Visualiseringen visar endast de kommuner där andelen som flyttat är större än <span id='andel'>XXX</span>.     
    </p>
  </div>
  
  <table>
    <tr>
      <td colspan="2">
        Stad:
        <select id="city">
          <option value="0">Stockholm</option>
          <option value="1">Göteborg</option>
          <option value="2">Malmö</option>
        </select>
      </td>
    </tr> 
    <tr>
      <td colspan=2>
      	Kommun: <input id="search" type="search" style="width: 300px">
        <input type="button" value="hitta" onclick="setKommun(this)" data-target="search">
      </td>
    </tr>
    <tr>
      <td>
        <svg id='main' />
      </td>
      <td>
        <pre id='detail'></pre>
      </td>
    </tr>
  </table>

// main code  
    var width = 400,
        height = 900,
        min_bound = 0.05,
        cities = [["Stockholm","Stockholm"],
                  ["Goteborg","Göteborg"],["Malmo","Malmö"]],
        city = cities[0],
        active = d3.select(null),
        max,
        colorScale,
        features;
    
    d3.select("#andel").html(min_bound*100 + '%');
    
    var projection = d3.geo.mercator()
               	.scale(1200)
    						.translate([width / 2, (height / 2) - 150])
              	.center([0, 55])
    						.rotate([-17, -7.4]);
     
    var path = d3.geo.path()
    .projection(projection); 
 
    var svg = d3.select("#main")
    .attr("width", width)
    .attr("height", height);
    
    var container = svg.append('g').classed('container',true);
        
    function update() {
      // setup scale
      max = d3.max(features, 
        function(d) {  
        	if(d.properties.KnNamn == city[0]) return 0;
        	return  +d.properties[city[0] + "_ANDELFR_NF"]; 
      	});
      
      // scales 
      colorScale = d3.scale.linear() 
      	.domain([0, max])
      	.range(['#ccc', 'red']);
      
      var groups = container   	
      	.selectAll("path")
          .data(features);
    	
      groups
        .style('fill', '#ccc')
      	.transition()
      	.duration(1000)
      		.style("fill", function(d) { 
                if(+d.properties[city[0] + "_ANDELFR_NF"] < min_bound) 
                  return colorScale.range()[0];
                return colorScale(+d.properties[city[0] + "_ANDELFR_NF"]); 
              });
      
      groups
        .enter()
        .append('path')
          .classed("base", function(d) { 
            return +d.properties[city[0] + "_ANDELFR_NF"] < min_bound; })
          .classed("overlay", function(d) { 
            return +d.properties[city[0] + "_ANDELFR_NF"] >= min_bound; })
          .attr("d", path)
            .style("fill", function(d) { 
                if(+d.properties[city[0] + "_ANDELFR_NF"] < min_bound) 
                  return colorScale.range()[0];
                return colorScale(+d.properties[city[0] + "_ANDELFR_NF"]); 
              })
            .attr("id", function(d) { return d.properties.KnNamn; })
            .on("click", clicked)
            .on("mouseover", function(d) {
              d3.select("#detail")
                .html(JSON.stringify(
                d.properties, null, 2));
            });
    }
    
    d3.json("alla_lan(1).json", function(error, topology) {   
      features = topojson.feature(topology, topology.objects.svenskarna_kommun).features;
    	update(); 
    });

d3.select("#city").on("change", function() {
      city = cities[d3.select(this).node().value]; 
      update();
    })  
    
    
function clicked(d) {
  if (active.node() === this) return reset();
  
  active.classed("active", false);
  active = d3.select(this).classed("active", true);
  active.moveToFront();
  
  d3.select(active.node().parentNode).moveToFront();

var bounds = path.bounds(d),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
      scale = .4 / Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

var g = svg.select('.container');
  g.transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}

function reset() {
  active.classed("active", false);
  active = d3.select(null);
  var g = svg.select('.container');
  g.transition()
      .duration(750)
      .style("stroke-width", "1.5px")
      .attr("transform", ""); 
}

</script>

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js