GitNoise/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    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
forked from anonymous's block: Map 8 - map w. zoom

  
## alla_lan(1).json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              alla_lan(1).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.
      
    
## index.html
<!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>

  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
</head>

<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>

  <script>

    // helpers
    d3.selection.prototype.moveToFront = function() {
      return this.each(function(){
        this.parentNode.appendChild(this);
      });
    };

    function setKommun(d) {
      d3.select(".home").classed("home", false);
      var input = d3.select('#' + d.dataset.target);
      var home = d3.select('#' + (input[0][0].value));
      home.classed("home", true);
      d3.select(home.parentNode).moveToFront();
    }

    var distance = function distance (firstObject, secondObject)  {
      return Math.sqrt(
        ( firstObject[0] - secondObject[0] ) *
        ( firstObject[0] - secondObject[0] ) + ( firstObject[1] - secondObject[1] ) *
        ( firstObject[1] - secondObject[1] ) );
    }

    // 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>
	<!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>

	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	</head>

	<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>

	<script>

	// helpers
	d3.selection.prototype.moveToFront = function() {
	return this.each(function(){
	this.parentNode.appendChild(this);
	});
	};

	function setKommun(d) {
	d3.select(".home").classed("home", false);
	var input = d3.select('#' + d.dataset.target);
	var home = d3.select('#' + (input[0][0].value));
	home.classed("home", true);
	d3.select(home.parentNode).moveToFront();
	}

	var distance = function distance (firstObject, secondObject) {
	return Math.sqrt(
	( firstObject[0] - secondObject[0] ) *
	( firstObject[0] - secondObject[0] ) + ( firstObject[1] - secondObject[1] ) *
	( firstObject[1] - secondObject[1] ) );
	}

	// 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>