Map 7 - dotmap

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

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <style>
    svg {
    }

table {
      width: 100%;
    }
    td {

vertical-align: top;
    }
    
    path {
      stroke: #fff;
      stroke-width: .5px;
    }

path:hover {
      stroke: black;
      stroke-width: 2px
    }

#main .zoom {
      fill: steelblue !important;
    }

.caption {
      font-size: 30px;
      font-family: Verdana, Geneva, sans-serif;
    }

circle {
      fill: #f03b20;
      stroke: black;
    }

line {
      stroke: black;
      stroke-opacity: 0.4
    }

.base {
      fill: #ccc;
    }

.overlay {
      fill: #fa9fb5;
    }

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

.description {
      font-family: Arial, Helvetica, sans-serif;
    }

</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],
        centered;
    
    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);

if(+d.properties[city[0] + "_ANDELFR_NF"] >= min_bound)
        	me
          .append("line")
            .attr({
              x1: projection(d3.geo.centroid(point))[0] ,
              y1: projection(d3.geo.centroid(point))[1], 
              x2: projection(d3.geo.centroid(d))[0],
              y2: projection(d3.geo.centroid(d))[1] 
            }); 
      })     
      */
      /*
      var circles = svg.selectAll("g.circles")
        .data(features)
        .enter()
        .append("g")
      	.classed("circles", true);
      
      circles.each(function (d) {
        var me =  d3.select(this);

if(+d.properties[city[0] + "_ANDELFR_NF"] >= min_bound)
          me
          .append("circle")
          .attr({
            cx: function(d) { return projection(d3.geo.centroid(d))[0]; },
            cy: function(d) { return projection(d3.geo.centroid(d))[1]; },
            r: function(d) { 
              return sizeScale(+d.properties[city[0] + "_ANDELFR_NF"]); } ,
          })
          .style("fill", '#d7191c');
      })     
      */
    }
    
    d3.json("alla_lan(1).json", function(error, topology) {
      if (error) throw error; 
      console.log(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) {
  var x, y, k;

if (d && centered !== d) {
    var centroid = path.centroid(d);
    x = centroid[0];
    y = centroid[1];
    k = 7;
    centered = d;
  } else {
    x = width / 2;
    y = height / 2;
    k = 1;
    centered = null;
  }

var container = d3.select('.container');
  
  container.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });

container.transition()
      .duration(500)
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
      .style("stroke-width", 1.5 / k + "px");
}

</script>

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

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