JSFiddle - React, Tailwind, and code Playground

by Gordon Woodhull

HTML

<script src="https://unpkg.com/d3@5/dist/d3.js"></script>
<script src="https://unpkg.com/crossfilter2@1.4/crossfilter.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dc@3/dc.css">
<script src="https://unpkg.com/dc@3/dc.js"></script>
<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
<script src="https://npmcdn.com/universe@latest/universe.js"></script>
<script src="https://unpkg.com/leaflet"></script>
<script src="https://unpkg.com/leaflet.markercluster"></script>
<script src="https://unpkg.com/dc.leaflet@0.4.0/dc.leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css">
  <div id="demo1">
    <h2>Markers with clustering, popups and single selection</h2>
    <i>Renewable energy plants in Bulgaria in 2012</i>
    <div class="map"></div>
    <div class="pie"></div>
  </div>

<pre...

CSS

pre#data {
  display: none;
}

.marker-cluster-indiv {
	background-color: #9ecae1;
}
.marker-cluster-indiv div {
	background-color: #6baed6;
}

JavaScript

function drawMarkerSelect(data) {
      var xf = crossfilter(data);
      var groupname = "marker-select";
      var facilities = xf.dimension(function(d) { return d.geo; });
      var facilitiesGroup = facilities.group().reduceSum(d => +d.rnd);

      var marker = dc_leaflet.markerChart("#demo1 .map",groupname)
          .dimension(facilities)
          .group(facilitiesGroup)
          .width(600)
          .height(400)
          .center([42.69,25.42])
          .zoom(7)
          .cluster(true);

      var types = xf.dimension(function(d) { return d.type; });
      var typesGroup = types.group();
      var pie = dc.pieChart("#demo1 .pie",groupname)
          .dimension(types)
          .group(typesGroup)
          .width(200)
          .height(200)
          .renderLabel(true)
          .renderTitle(true)
          .ordering(function (p) {
              return -p.value;
          });

      const old_marker_function = marker.marker();
      marker.icon(function(d, map) {
        return new L.DivIcon({
          html: '<div><span>' + d.value.toFixed(0) + '</span></div>',
          className: 'marker-cluster-indiv marker-cluster',
          iconSize: new L.Point(40, 40) });
      })
      marker.marker(function(d, map) {
        const m = old_marker_function(d, map);
				m.value = d.value;
        return m;
      });
      marker.clusterOptions({
        iconCreateFunction: function(cluster) {
          var children = cluster.getAllChildMarkers();
         	var sum = 0;
         	for (var i = 0; i < children.length; i++) {
            sum += children[i].value;
         	}
          sum = sum.toFixed(0);
          var c = ' marker-cluster-';
          if (sum < 10) {
            c += 'small';
          } else if (sum < 100) {
            c += 'medium';
          } else {
            c += 'large';
          }
          return new L.DivIcon({
            html: '<div><span>' + sum + '</span></div>',
            className: 'marker-cluster' + c,
            iconSize:...