D3 Components

Bubble Map

<div id="bubble-map-default"></div>
<div id="bubble-map-tile"></div>

<script>
  d3.json('../dist/maps/china.geo.json', function (provinces) {
    d3.choroplethMap([], {
      id: 'bubble-map-default',
      map: {
        name: 'china',
        data: provinces
      },
      tooltip: {
        show: false
      }
    });
    d3.choroplethMap([], {
      id: 'bubble-map-tile',
      map: {
        name: 'china',
        data: provinces
      },
      tile: {
        show: true,
        scale: 2048,
        image: {
          href: {
            service: 'geoq',
            theme: 'ChinaOnlineStreetPurplishBlue'
          }
        },
        wrap: true
      },
      regions: {
        stroke: 'none',
        fill: 'none'
      },
      tooltip: {
        show: false
      }
    });
    d3.json('../dist/maps/china-cities.geo.json', function (cities) {
      d3.json('../data/china-cities-gdp.json', function (data) {
        d3.shuffle(data);
        d3.bubbleMap(data, {
          id: 'bubble-map-default',
          standalone: false,
          map: {
            name: 'china',
            data: cities
          }
        });
        d3.bubbleMap(data, {
          id: 'bubble-map-tile',
          standalone: false,
          map: {
            name: 'china',
            data: cities
          },
          tile: {
            show: true,
            scale: 2048
          },
          tooltip: {
            autoplay: true
          }
        });
      });
    });
  });
</script>