D3 Components

Choropleth Map

<div id="choropleth-map-geojson"></div>
<div id="choropleth-map-topojson"></div>

<script>
  d3.json('../dist/maps/china.geo.json', function (geojson) {
    d3.json('../data/china-provinces-gdp.json', function (data) {
      d3.shuffle(data);
      d3.choroplethMap(data, {
        id: 'choropleth-map-geojson',
        map: {
          name: 'china',
          data: geojson
        },
        tile: {
          show: true,
          scale: 2048,
          zoomable: false,
          image: {
            href: {
              service: 'mapbox',
              theme: 'natural-earth-2'
            }
          }
        },
        colorScale: 'scaleSequential',
        colorScheme: d3.interpolateReds,
        tooltip: {
          autoplay: true,
          carousel: {
            sort: 'descending(gdp)'
          }
        }
      });
    });
  });
  d3.json('../dist/maps/world.topo.json', function (topojson) {
    d3.json('../data/world-countries-population.json', function (data) {
      d3.choroplethMap(data, {
        id: 'choropleth-map-topojson',
        map: {
          key: 'name',
          name: 'world',
          data: topojson,
          object: 'countries'
        },
        tile: {
          show: true,
          image: {
            href: {
              service: 'geoq',
              theme: 'ChinaOnlineCommunityENG'
            }
          }
        },
        colorScale: 'scaleSequential',
        colorScheme: d3.interpolateReds
      });
    });
  });
</script>