Swiftmap Custom Breaks by harrystevens

index.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      #map {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <!-- Modules for d3-request and d3-queue -->
    <script src="https://d3js.org/d3-collection.v1.min.js"></script>
    <script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
    <script src="https://d3js.org/d3-dsv.v1.min.js"></script>
    <script src="https://d3js.org/d3-request.v1.min.js"></script>
    <script src="https://d3js.org/d3-queue.v3.min.js"></script>

    <script src="https://unpkg.com/swiftmap@0.1.23/dist/swiftmap.min.js"></script>

    <script>

      // Create the map.
      var map = swiftmap.map("#map");

      // Create a sequential color scheme with custom breaks.
      var scheme = swiftmap.schemeSequential()
        .from(d => +d.growth_2001_2011.replace("%", ""))
        .to(["#ef8a62", "#d1e5f0", "#67a9cf", "#2166ac"])
        .breaks([-.5, 0, 20, 25, 55]);

      d3.queue()
        .defer(d3.json, "india_state.json") // geospatial data
        .defer(d3.csv, "india_state_population.csv") // tabular data
        .await(ready);

      function ready(error, geo, tab){

        // Add data to the scheme.
        scheme.data(tab, d => d.state);

        // Add a polygons layer to your map and draw it.
        map
          .layerPolygons(geo, d => d.properties.ST_NM)
            .draw();

        // Fill the layer based on your color scheme.
        map.layers[0].polygons
            .style("fill", scheme);

        // Resize the map when the window changes.
        window.onresize = () => map.resize()

      }
      
    </script>
  </body>
</html>

india_state_population.csv

state,population,growth_2001_2011,population_rural,population_urban,area,sex_ratio
Uttar Pradesh,207281477,20.10%,155111022,44470455,240928,908
Maharashtra,112372972,16.00%,61545441,50827531,307713,946
Bihar,103804637,25.10%,92075028,11729609,94163,916
West Bengal,91347736,13.90%,62213676,29134060,88752,947
Madhya Pradesh,72597565,20.30%,52537899,20059666,308245,931
Tamil Nadu,72138958,15.60%,37189229,34949729,130058,995
Rajasthan,68621012,21.40%,51540236,17080776,342239,926
Karnataka,61130704,15.70%,37552529,23578175,191791,968
Gujarat,60383628,19.20%,34670817,25712811,196024,918
Andhra Pradesh,49386799,11.10%,34776389,14610410,162968,993
Odisha,41947358,14.00%,34951234,6996124,155707,978
Telangana,35286757,17.87%,21585313,13608665,114840,988
Kerala,33387677,4.90%,17445506,15932171,38863,"1,084"
Jharkhand,32966238,22.30%,25036946,7929292,79714,947
Assam,31169272,16.90%,26780526,4388756,78438,954
Punjab,27704236,13.70%,17316800,10387436,50362,893
Chhattisgarh,25540196,22.60%,19603658,5936538,135191,991
Haryana,25353081,19.90%,16531493,8821588,44212,877
Jammu & Kashmir,12548926,23.70%,9134820,3414106,222236,883
Uttarakhand,10116752,19.20%,7025583,3091169,53483,963
Himachal Pradesh,6864602,12.80%,6167805,688704,55673,974
Tripura,3671032,14.70%,2710051,960981,10486,961
Meghalaya,2964007,27.80%,2368971,595036,22429,986
Manipur,2721756,18.70%,1899624,822132,22327,987
Nagaland,1980602,-0.50%,1406861,573741,16579,931
Goa,1457723,8.20%,551414,906309,3702,968
Arunanchal Pradesh,1382611,25.90%,1069165,313446,83743,920
Mizoram,1091014,22.80%,529037,561997,21081,975
Sikkim,607688,12.40%,455962,151726,7096,889
NCT of Delhi,18980000,21%,419319,16333916,1484,866
Puducherry,1244464,27.70%,394341,850123,479,"1,038"
Chandigarh,1055450,17.10%,29004,1025682,114,818
Andaman & Nicobar Island,379944,6.70%,244411,135533,8249,878
Dadara & Nagar Haveli,342853,55.50%,183024,159829,491,775
Daman & Diu,242911,53.50%,60331,182580,112,618
Lakshadweep,64429,6.20%,14121,50308,32,946