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

  
## 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">
<style>
  svg {
  }

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

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

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

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

</style>
<body>
  <svg id='main' />
  <svg id='detail'/>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <script>

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

    // main code
    var width = 400,
        height = 500;

    var path = d3.geo.path()
    .projection(d3.geo.mercator()
               	.scale(1100)
    						.translate([width / 2, height / 2])
              	.center([0, 55.4])
    						.rotate([-15, -7.4]));

    var detailPath =  d3.geo.path()
    .projection(d3.geo.mercator()
               	.scale(1100)
    						.translate([width / 2, height / 2])
              	.center([0, 55.4])
    						.rotate([-15, -7.4]));

    var svg = d3.select("#main")
    .attr("width", width)
    .attr("height", height);

    d3.select("#detail")
      .attr("width", width)
      .attr("height", height);

    d3.json("alla_lan(1).json", function(error, topology) {
      if (error) throw error;

      var groups = svg.selectAll("g")
      .data(topojson.feature(topology, topology.objects.alla_lan).features)
      .enter()
      .append("g");

      groups
        .style("fill", function(d,i) { return i%2 == 0 ? "#ccc" : "red" })
        .append("path")
        .attr("d", path)
        .style("fill", function(d,i) { return i%2 == 0 ? "#ccc" : "red" })
        .on("mouseover", function(d) {
            var elem = d3.select(this);
            var parent = d3.select(this.parentNode);

            parent.moveToFront();
            elem.classed('zoom', true);

        		var centroid = path.centroid(d);

            d3.select('#detail').html('');
            var detail = d3.select('#detail').append("g");
        		detail
              .append("path")
              .attr("d", function() { return detailPath(d); })
              .style("fill", function() {  return parent.style('fill'); })
            	.style("transform", "translate(" + (width/2 - centroid[0]) + "px, " + (height/2 - centroid[1]) + "px)");

        		detail.append("text")
            	.attr({
              	x: 100,
              	y: height - 120
              })
              .text(d.properties.LAN_NAMN)
        			.classed('caption', true);
      	})
        .on("mouseout", function() {
        	d3.select(this).classed('zoom', false)
      	})
    });

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

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

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

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

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

	</style>
	<body>
	<svg id='main' />
	<svg id='detail'/>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>

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

	// main code
	var width = 400,
	height = 500;

	var path = d3.geo.path()
	.projection(d3.geo.mercator()
	.scale(1100)
	.translate([width / 2, height / 2])
	.center([0, 55.4])
	.rotate([-15, -7.4]));

	var detailPath = d3.geo.path()
	.projection(d3.geo.mercator()
	.scale(1100)
	.translate([width / 2, height / 2])
	.center([0, 55.4])
	.rotate([-15, -7.4]));

	var svg = d3.select("#main")
	.attr("width", width)
	.attr("height", height);

	d3.select("#detail")
	.attr("width", width)
	.attr("height", height);

	d3.json("alla_lan(1).json", function(error, topology) {
	if (error) throw error;

	var groups = svg.selectAll("g")
	.data(topojson.feature(topology, topology.objects.alla_lan).features)
	.enter()
	.append("g");

	groups
	.style("fill", function(d,i) { return i%2 == 0 ? "#ccc" : "red" })
	.append("path")
	.attr("d", path)
	.style("fill", function(d,i) { return i%2 == 0 ? "#ccc" : "red" })
	.on("mouseover", function(d) {
	var elem = d3.select(this);
	var parent = d3.select(this.parentNode);

	parent.moveToFront();
	elem.classed('zoom', true);

	var centroid = path.centroid(d);

	d3.select('#detail').html('');
	var detail = d3.select('#detail').append("g");
	detail
	.append("path")
	.attr("d", function() { return detailPath(d); })
	.style("fill", function() { return parent.style('fill'); })
	.style("transform", "translate(" + (width/2 - centroid[0]) + "px, " + (height/2 - centroid[1]) + "px)");

	detail.append("text")
	.attr({
	x: 100,
	y: height - 120
	})
	.text(d.properties.LAN_NAMN)
	.classed('caption', true);
	})
	.on("mouseout", function() {
	d3.select(this).classed('zoom', false)
	})
	});

	</script>