In Swiftmap, continuous schemes are used to map values of data to corresponding visual attributes along a continuum. You can use a continuous scheme to create a gradient color scale. In this example, each polygon is colored, alternatively, according to the horizontal or vertical position of its centroid. Because Swiftmap returns elements as D3 selections, it is easy to animate style transitions.
Swiftmap Gradient Scheme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| #map { | |
| width: 100%; | |
| height: 100vh; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <!-- D3 modules for d3-request and d3-timer --> | |
| <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-timer.v1.min.js"></script> | |
| <!-- TopoJSON --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/2.2.0/topojson.min.js"></script> | |
| <script src="https://unpkg.com/swiftmap@0.2.1/dist/swiftmap.min.js"></script> | |
| <script> | |
| var map = swiftmap.map("#map"); | |
| var scheme = swiftmap.schemeContinuous() | |
| .from(d => +d.h) | |
| .to(["#a50026", "#d73027", "#f46d43", "#fdae61", "#fee090", "#ffffbf", "#e0f3f8", "#abd9e9", "#74add1", "#4575b4", "#313695"]); | |
| d3.json("cb_2017_us_state_20m.json", (error, counties) => { | |
| map | |
| .projection("albersUsa") | |
| .layerPolygons(counties, d => d.properties.AFFGEOID) | |
| .draw(); | |
| var data = topojson.feature(map.layers[0].data, map.layers[0].object).features; | |
| var out = []; | |
| for (var i = 0, l = data.length; i < l; i++){ | |
| var d = data[i], | |
| c = map.path.centroid(d); | |
| out.push({ | |
| key: d.properties.AFFGEOID, | |
| h: c[0], | |
| v: c[1] | |
| }); | |
| } | |
| scheme.data(out, d => d.key); | |
| map.layers[0].polygons | |
| .style("fill", scheme); | |
| var curr_prop = "h"; | |
| d3.interval(function(){ | |
| var new_prop = curr_prop == "h" ? "v" : "h"; | |
| map.layers[0].polygons | |
| .transition().duration(1000) | |
| .style("fill", scheme.from(d => +d[new_prop])); | |
| curr_prop = new_prop; | |
| }, 2000); | |
| window.onresize = () => map.resize(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment