D3 Examples - Markers with no clustering and selection by area

xxxxxxxxxx
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>DC.js + Leaflet</title>
​
  <meta itemprop="name" content="DC.js + Leaflet"/>
  <meta itemprop="description" content="DC.js + Leaflet chart"/>
​
  <meta charset="UTF-8">
​
  <link type="text/css" href="css/leaflet.css" rel="stylesheet"/>
  <link type="text/css" href="css/MarkerCluster.Default.css" rel="stylesheet"/>
  <link type="text/css" href="css/MarkerCluster.css" rel="stylesheet"/>
  <link type="text/css" href="css/dc.css" rel="stylesheet"/>
  <link type="text/css" href="css/leaflet-legend.css" rel="stylesheet"/>
​
   <style>
    #holder {
      width:850px;
      margin:20px auto;
    }
    #holder>div {
      padding:30px 0;
      clear:both;
    }
    .map {
      width:600px;
      height:400px;
    }
    .pie {
      margin-left:30px;
    }
    #octocat {
      position: absolute;
      right: 5px;
      top: 5px;
    }
    /*map legend styling*/
    /*--*/
  </style>
</head>
<body>
​
<div id="holder">
  <div id="demo2">
    <h2>Markers with no clustering and selection by area</h2>
    <i>Renewable energy plants in Bulgaria in 2012</i>
    <div class="map"></div>
    <div class="pie"></div>
</div>
​
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>
<script src="js/colorbrewer.js"></script>
​
​
<!--Optional-->
<script type="text/javascript" src="js/leaflet.markercluster.js"></script>
​
<script type="text/javascript" src="js/dc.leaflet.js"></script>
<script type="text/javascript">
​
  /*     Markers      */
​
  d3.csv("demo2.csv").then(function(data) {
      drawMarkerSelect(data);
      drawMarkerArea(data);
  });
​
  function drawMarkerSelect(data) {
      var xf = crossfilter(data);
      var groupname = "marker-select";
      var facilities = xf.dimension(function(d) { return d.geo; });
      var facilitiesGroup = facilities.group().reduceCount();
​
      var marker = dc_leaflet.markerChart("#demo2 .map",groupname)
                .dimension(facilities)
                .group(facilitiesGroup)
                .width(600)
                .height(400)
                .center([42.69,25.42])
                .zoom(7)
                .renderPopup(false)
                .filterByArea(true);
​
      var types = xf.dimension(function(d) { return d.type; });
      var typesGroup = types.group().reduceCount();
​
      var pie = dc.pieChart("#demo2 .pie",groupname)
          .dimension(types)
          .group(typesGroup)
          .width(200)
          .height(200)
          .renderLabel(true)
          .renderTitle(true)
          .ordering(function (p) {
              return -p.value;
          });
​
      dc.renderAll(groupname);
      return {marker: marker, pie: pie};
  }
</script>
​
</body>
</html>
​
    