Swiftmap Layers by HarryStevens

In Swiftmap, layers let you add geospatial data to a map, as well as decide how that data should be drawn to the DOM. The recommended indenting pattern is to indent two spaces to declare a new layer, calling either map.layerPolygons() or map.layerPoints(), and to indent four spaces when calling drawing functions on the preceding layer.

This map shows the results of the 2013 assmebly election in Karnataka.

Data from Lok Dhaba. Citation: Francesca R. Jensenius and Gilles Verniers (2017). “Studying Indian Politics with Large-scale Data: Indian Election Data 1961–Today.” Studies in Indian Politics, Vol 5, Issue 2, pp. 269-275.

index.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      #map {
        width: 100%;
        height: 100vh;
        background: #1f78b4;
      }
      #map .polygon.polygon-0 {
        fill: #fff;
        stroke: #ddd;
        stroke-dasharray: 5,5;
      }
      #map .boundary.boundary-0 {
        stroke: #fff;
      }
      #map .boundary.boundary-1 {
        stroke-width: 2px;
      }
      #map .label {
        text-shadow: 1px 1px 1px #fcfcfc, 1px 1px 1px #eee, 0 -1px 0 #fff, -1px 0 0 #fff;
      }
      #map .label, #map .point {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <!-- D3 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.2.7/dist/swiftmap.min.js"></script>
    <script>

      // Initialize a map.
      var map = swiftmap.map("#map");

      // Create a color scheme.
      var scheme = swiftmap.schemeCategorical()
        .from(d => d.winner)
        .to({
          "INC": "#b2df8a"
        });

      d3.queue()
        .defer(d3.json, "karnataka_geodata.json")
        .defer(d3.json, "karnataka_data_2013.json")
        .defer(d3.json, "india_state.json")
        .await(ready);

      function ready(error, karnataka, results2013, india){

        // Update the scheme's data.
        scheme.data(parseResults(results2013), d => d.ac_no);

        // Add three layers to the map.
        map
          .layerPolygons(india)
            .drawPolygons()
            .drawBoundary()
          .layerPolygons(karnataka, d => d.properties.ac_no)
            .draw()
          .layerPoints(karnataka)
            .drawPoints()
            .drawLabels(d => d.properties.name, true);

        map.layers[1].polygons
            .style("fill", scheme);

        // After two seconds, update the layer.
        setTimeout(() => {
          // Add colors, with a one second transition, to the second layer.
          map.layers[1].polygons
            .transition().duration(1000)
              .style("fill", scheme.to({
                  "INC": "#b2df8a",
                  "BJP": "#fdbf6f",
                  "JD(S)": "#fb9a99"
                })
              );
        }, 2000);

        // Responsive resize.
        window.onresize = () => map.resize();

      }

      function parseResults(results){
        return results.map(ac => {
          ac.winner = ac.candidate_json[0].party;
          ac.ac_no = ac.const_code;
          return ac;
        });
      }  

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