Kommun glowing dots

Built with blockbuilder.org

forked from GitNoise's block: Map #1

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

forked from GitNoise's block: Map #4 - kommun

forked from anonymous's block: Kommun glowing dots

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

circle {
      fill: #c27575;
      fill-opacity: 0.8;
      mix-blend-mode: screen;
      pointer-events:none;
    }

.search {
      display: flex;
      width: 300px;
      margin-bottom: 8px;
    }

.btn {
      background: white;
    }

.search {
      width: 300px;
    }

.dropdown-input {
      width: 100%;
      font-size: 16px;
      padding: 4px 8px;

}

.numbers {
      position: absolute;
      color: white;
      top: 100px;
      font-size: 32px
    }
  </style>

</head>

<div class="numbers">
    <span id="number">300</span> historier
  </div>
  <svg>
  </svg>

var projection = d3.geoMercator()
    .scale(1100)
    .center([17, 63])
    .translate([width/2, height/2]);

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

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

var container = svg.append('g').classed('container',true);

d3.json("lan.json", function(error, geo) {
      var paths = container
      .append('g')
      .classed('paths', true)	
      .selectAll('g')
      .data(geo.features)
      .enter()
        .append('path')
          .attr('d', path)
      		.attr('id', (d,i) => i)
          .classed("kommun", true);

const dots = svg.append('g').classed('dots', true);

paths
        .each(function(d,i) {
        var center = projection(d3.geoCentroid(d));

var noDots = Math.floor(Math.random() * 10) + 1;

if (noDots > 8) {
          for (let i=0; i<noDots; i++) {
            var jitterX = Math.floor(Math.random() * 15) + 1; 
            var jitterY = Math.floor(Math.random() * 15) + 1;

dots.append("circle")
              .attr("cx", center[0] + jitterX)
              .attr("cy", center[1] + jitterY)
              .attr("r", 2);
          }   
        }
      }); 
    });

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

let active = d3.select(null);

function clicked(d) {
      if (active.node() === this) return reset();

active.classed("active", false);
      active = d3.select(this).classed("active", true);

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

var dots = svg.selectAll('circle');
      dots.transition()
        .duration(750)
        .attr("r", "0.6")
        .attr("transform", "translate(" + translate + ")scale(" + scale + ")");

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", "");

var dots = svg.selectAll('circle');
      dots.transition()
        .duration(750)
        .attr("r", "2")
        .attr("transform", "");     
    }
  </script>
</body>

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

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

https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.2/awesomplete.min.js