D3 Examples - Geo2rect test using nmap

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
​
path{
  fill:transparent;
  stroke:rgba(0,0,0,1);
}
​
.class-4 circle{
  fill:red;
}
​
</style>
<body>
  <script src="affinetransform.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
  <script src="nmap.min.js"></script>
  <script src="geo2rect.js"></script>
  <script>
  var elements = [];
  var config = {
    width : 500,
    height : 350,
    padding : 10,
    duration : 1000,
    key:function(d){;return d.properties.CODDISTRIT; },
    // empty grid
    grid : {
      '01':{x:0,y:0},
      '02':{x:0,y:0},
      '03':{x:0,y:0},
      '04':{x:0,y:0},
      '05':{x:0,y:0},
      '06':{x:0,y:0},
      '07':{x:0,y:0},
      '08':{x:0,y:0},
      '09':{x:0,y:0},
      '10':{x:0,y:0},
      '11':{x:0,y:0},
      '12':{x:0,y:0},
      '13':{x:0,y:0},
      '14':{x:0,y:0},
      '15':{x:0,y:0},
      '16':{x:0,y:0},
      '17':{x:0,y:0},
      '18':{x:0,y:0},
      '19':{x:0,y:0},
      '20':{x:0,y:0},
      '21':{x:0,y:0}
    }
  };
​
  var svg = d3.select('body').append('svg').attr('width', config.width).attr('height', config.height);
​
  var g2r = new geo2rect.draw();
​
  d3.json('distritos.geojson', function(err, data){
​
    var geojson = geo2rect.compute(data);
​
    g2r.config = config;
    g2r.data = geojson;
    g2r.svg = svg.append('g');
​
    g2r.draw();
​
    for (var i = 0; i < data.features.length; i++) {
​
      var cod = data.features[i].properties.CODDISTRIT,
​
      pathEL = d3.select(".id-" + cod);
​
      var bounds = g2r._path.bounds(pathEL._groups[0][0].__data__),
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2;
​
      elements.push(new nmap_element({
        id:cod,
        x:x,
        y:y,
        weight:1000+Math.random(),
        klass:"id-" + cod
      }));
​
    }
​
    //initializing the nmap function and setting the bounding box
    var map = new nmap({x:0, y:0, width:10, height:10});
​
​
    //Equal Weight Approach
    var ac = map.equalWeight({elements:elements});
​
    for (var i = 0; i < data.features.length; i++) {
      var cod = ac[i].attr().element.getId();
​
      config.grid[cod].x = ac[i].attr().x;
      config.grid[cod].y = ac[i].attr().y;
    }
​
    g2r.config = config;
    console.log();
​
  });
​
  d3.select('body').append('a').text('Toggle').on('click', function(){
    g2r.toggle();
    g2r.draw();
    console.log(g2r.mode);
  });
​
  </script>
</body>
</html>
​
    