Map #4 - kommun

forked from GitNoise's block: Map #1

forked from GitNoise's block: Map #4 - län

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>

<body>
  <script>
    var colorScale = 
        d3.scaleLinear()
        .domain([0,1])
        .range(["#f8f8f5","DarkOrange"]);
      
    function randomColor () {
      var h = Math.random();
      var r = Math.random();
			if(r < 0.5) return "#f8f8f5";
      
      return colorScale(h);
    }
    
    function randomSize() {
      var h = (Math.random()*10) + 1;
      var r = Math.random();
      if(r < 0.95) return 0;
       
      return h;
    } 
    
    var width = 960,
        height = 1160;

var projection = d3.geoMercator()
      .translate([0, 2050])
      .scale([1200]);

//Define path generator
    var path = d3.geoPath()
    	.projection(projection);

var svg = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height);
    
    //Container for the gradients
var defs = svg.append("defs");

//Filter for the outside glow
var filter = defs.append("filter")
	.attr("id","glow");
filter.append("feGaussianBlur")
	.attr("stdDeviation","1.8")
	.attr("result","coloredBlur");
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
	.attr("in","coloredBlur");
feMerge.append("feMergeNode")
	.attr("in","SourceGraphic");

d3.json("lan.json", function(error, geo) {
      var groups = svg.selectAll("g")
        .data(geo.features)
        .enter()
        .append("g");
      
      groups
        .append("path")
        .attr("d", path)
        .style("fill", randomColor)
      	.style("stroke", "#575757")
      	.style("stroke-width", "0.5");
      
      groups
        .each(function(d,i) {
          var 
            	rs = randomSize(),
          		center = projection(d3.geoCentroid(d));

d3.select(this)
            .append("circle")
          	.attr("class", "glow")
            .attr("cx", center[0])
            .attr("cy", center[1])
            .attr("r", rs != 0 ? rs + 3 : 0)
            .style("fill", "lightgray")
            .style("fill-opacity", "0.8")
            .style("stroke", "#cccccc")
      			.style("stroke-width", "0.5");
    
          d3.select(this)
            .append("circle")
            .attr("cx", center[0])
            .attr("cy", center[1])
            .attr("r", rs)
            .style("fill", "steelblue")
            .style("stroke", "#575757")
      			.style("stroke-width", "0.5");
        
        if (i == 10
           ) {
          d3.select(this)
            .append("line")
            .attr("x1", center[0])
            .attr("y1", center[1])
            .attr("x2", center[0]+10)
            .attr("y2", center[1]-10)
            .style("stroke", "black");
          
          d3.select(this)
            .append("line")
            .attr("x1", center[0]+10)
            .attr("y1", center[1]-10)
            .attr("x2", center[0]+130)
            .attr("y2", center[1]-10)
            .style("stroke", "black");
          
           d3.select(this)
           	.append("text")
           	.attr("x", center[0]+130)
            .attr("y", center[1]-12)
           	.text("Gotland 10%")
            .style("fill", "black")
           	.style("font-family","sans-serif")
           	.style("text-anchor","end");
        }
        
        d3.selectAll(".glow")
					.style("filter","url(#glow)");
      });
      
    });

</script>
</body>

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

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