{"id":13426042,"url":"https://github.com/HarryStevens/swiftmap","last_synced_at":"2025-03-15T20:31:55.456Z","repository":{"id":48034215,"uuid":"127729150","full_name":"HarryStevens/swiftmap","owner":"HarryStevens","description":"A JavaScript library for making data-driven maps.","archived":false,"fork":false,"pushed_at":"2021-08-10T17:48:45.000Z","size":1909,"stargazers_count":9,"open_issues_count":15,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-14T22:45:53.650Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://harrystevens.github.io/swiftmap/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HarryStevens.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-02T08:40:51.000Z","updated_at":"2020-04-07T15:22:36.000Z","dependencies_parsed_at":"2022-08-12T17:10:54.174Z","dependency_job_id":null,"html_url":"https://github.com/HarryStevens/swiftmap","commit_stats":null,"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fswiftmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fswiftmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fswiftmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HarryStevens%2Fswiftmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HarryStevens","download_url":"https://codeload.github.com/HarryStevens/swiftmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719399,"owners_count":20336607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:01:25.042Z","updated_at":"2025-03-15T20:31:50.401Z","avatar_url":"https://github.com/HarryStevens.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Swiftmap\nA JavaScript library for making data-driven maps. [See it in action](https://bl.ocks.org/harrystevens/5b705c13618e20706675135fd412b6d1).\n\nSwiftmap is still in development mode (v0.x). This is not a stable release. The API is subject to breaking changes.\n\n## Features\n\n* Provides a simple API for making maps.\n\n```js\nvar map = swiftmap.map()\n  .layerPolygons(UsaStatesTopoJSON, d =\u003e d.stateName)\n    .draw();\n```\n\n* Exposes DOM elements as D3 selections for styling.\n\n```js\nvar colors = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"purple\"];\nmap.layers[0].polygons.style(\"fill\", (d, i) =\u003e colors[i % colors.length]);\n```\n\n* Makes it easy to create resizable maps for responsive designs.\n\n```js\nwindow.onresize = () =\u003e map.resize();\n```\n\n* Uses simple abstractions for creating color schemes.\n\n```js\nvar scheme = swiftmap.schemeSequential()\n  .data(UsaStatesByPopulation, d =\u003e d.stateName)\n  .from(d =\u003e d.population)\n  .to([\"#ffffcc\", \"#a1dab4\", \"#41b6c4\", \"#2c7fb8\", \"#253494\"]);\n\nmap.layers[0].polygons.style(\"fill\", scheme);\n```\n\n## Installation\n\n### Web browser\nIn vanilla, a `swiftmap` global is exported. You can use the CDN from unpkg.\n```html\n\u003cscript src=\"https://unpkg.com/swiftmap/dist/swiftmap.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/swiftmap/dist/swiftmap.min.js\"\u003e\u003c/script\u003e\n```\nIf you'd rather host it yourself, download `swiftmap.js` or `swiftmap.min.js` from the [`dist` directory](https://github.com/HarryStevens/swiftmap/tree/master/dist).\n```html\n\u003cscript src=\"path/to/swiftmap.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/swiftmap.min.js\"\u003e\u003c/script\u003e\n```\n\n### npm\n```bash\nnpm install swiftmap --save\n```\n```js\nvar swiftmap = require(\"swiftmap\");\n```\n\n## API Reference\n\n- [Maps](#maps)\n- [Layers](#layers)\n  - [Polygons](#layerPolygons)\n  - [Points](#layerPoints)\n- [Schemes](#schemes)\n  - [Categorical](#schemeCategorical)\n  - [Continuous](#schemeContinuous)\n  - [Sequential](#schemeSequential)\n\n### Maps\n\nBefore drawing and styling a map, you can tell Swiftmap where on the DOM to place the map. You may also specify a map projection and call methods for resizing the map when the browser window's dimensions change.\n\n\u003ca name=\"map\" href=\"#map\"\u003e#\u003c/a\u003e swiftmap.\u003cb\u003emap\u003c/b\u003e([\u003ci\u003eparent\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/map.js \"Source\")\n\nInitializes a map.\n\n\u003ci\u003eparent\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003eparent\u003c/i\u003e is specified, the map will be placed in the DOM element referenced by the parent's selector. The \u003ci\u003eparent\u003c/i\u003e must be specified as a string. If \u003ci\u003eparent\u003c/i\u003e is not specified, `\"body\"` will be used as the parent. The map will inherit the dimensions of its parent.\n\n\u003ca name=\"graticule\" href=\"#graticule\"\u003e#\u003c/a\u003e \u003ci\u003emap\u003c/i\u003e.\u003cb\u003egraticule\u003c/b\u003e([\u003ci\u003estep\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/graticule.js \"Source\")\n\nAdds a graticule to the map. [See it in action](https://bl.ocks.org/HarryStevens/30daa8a31d0d444aceb55a58adedf7c8).\n\n\u003ci\u003estep\u003c/i\u003e\u003cbr /\u003e\nTo set the frequency of the graticule's lines, a \u003ci\u003estep\u003c/i\u003e may be specified as an array of two numbers, where the first number is the frequency in degrees of the lines of longitude, and the second number is the frequency in degrees of latitude. Defaults to `[10, 10]`.\n\n\u003ca name=\"projection\" href=\"#projection\"\u003e#\u003c/a\u003e \u003ci\u003emap\u003c/i\u003e.\u003cb\u003eprojection\u003c/b\u003e([\u003ci\u003eprojection\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/projection.js \"Source\")\n\nSets or gets a map's projection.\n\n\u003ci\u003eprojection\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003eprojection\u003c/i\u003e is specified, sets the map's projection. The \u003ci\u003eprojection\u003c/i\u003e must be specified as a string, and can be one of three options: \n- `\"mercator\"`, for the [Mercator projection](https://en.wikipedia.org/wiki/Mercator_projection)\n- `\"equirectangular\"`, for the [equirectangular projection](https://en.wikipedia.org/wiki/Equirectangular_projection)\n- `\"albersUsa\"`, for the Albers USA projection, which is a composite of three [Albers' equal-area conic projections](https://en.wikipedia.org/wiki/Albers_projection)\n\nIf \u003ci\u003eprojection\u003c/i\u003e is not specified, returns the projection associated with the map. For more information, see the [documentation in d3-geo](https://github.com/d3/d3-geo#projections).\n\n\u003ca name=\"resize\" href=\"#resize\"\u003e#\u003c/a\u003e \u003ci\u003emap\u003c/i\u003e.\u003cb\u003eresize\u003c/b\u003e() [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/resize.js \"Source\")\n\nResizes the map. This method is useful if your map must respond to window resizes.\n\n\u003ca name=\"tiles\" href=\"#tiles\"\u003e#\u003c/a\u003e \u003ci\u003emap\u003c/i\u003e.\u003cb\u003etiles\u003c/b\u003e([\u003ci\u003etilesource\u003c/i\u003e | \u003ci\u003etilefunction\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/tiles.js \"Source\")\n\nAdds raster tiles to the map's background and exposes the CSS class `tile`. Note that these raster tiles only work with a Mercator projection. If you use these raster tiles, please include a copyright notice with your map. [See it in action](https://bl.ocks.org/HarryStevens/e605a99d49878fac2e2117256608a3a4).\n\n\u003ci\u003etilesource\u003c/i\u003e\u003cbr /\u003e\nYou can specify a \u003ci\u003etilesource\u003c/i\u003e as a string to determine the style of raster tiles. Defaults to `\"openStreetMap\"`. Your options are:\n\n- `\"cartoDark\"` Carto dark tiles. Copyright: Map tiles by [Carto](https://carto.com/location-data-services/basemaps/).\n- `\"cartoDarkLabels\"` Carto dark tiles' labels. Copyright: Map tiles by [Carto](https://carto.com/location-data-services/basemaps/).\n- `\"cartoLight\"` Carto light tiles. Copyright: Map tiles by [Carto](https://carto.com/location-data-services/basemaps/).\n- `\"cartoLightLabels\"` Carto light tiles' labels. Copyright: Map tiles by [Carto](https://carto.com/location-data-services/basemaps/).\n- `\"cartoLightNoLabels\"` Carto light tiles without labels. Copyright: Map tiles by [Carto](https://carto.com/location-data-services/basemaps/).\n- `\"mapboxNaturalEarth\"` Mapbox Natural Earth II. Copyright: Map tiles by [MapBox](http://a.tiles.mapbox.com/v3/mapbox.natural-earth-2/page.html).\n- `\"openStreetMap\"` Open Street Map tiles. Copyright: © [OpenStreetMap contributors](https://www.openstreetmap.org/copyright).\n- `\"stamenToner\"` Stamen toner tiles. Copyright: Map tiles by [Stamen Design](http://stamen.com/), under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0). Data by [OpenStreetMap](http://openstreetmap.org/), under [ODbL](http://www.openstreetmap.org/copyright).\n- `\"stamenTerrain\"` Stamen terrain tiles. Copyright: Map tiles by [Stamen Design](http://stamen.com/), under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0). Data by [OpenStreetMap](http://openstreetmap.org/), under [ODbL](http://www.openstreetmap.org/copyright).\n- `\"stamenTerrainLabels\"` Stamen terrain tiles' labels. Copyright: Map tiles by [Stamen Design](http://stamen.com/), under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0). Data by [OpenStreetMap](http://openstreetmap.org/), under [ODbL](http://www.openstreetmap.org/copyright).\n- `\"stamenTerrainNoLabels\"` Stamen terrain tiles without labels. Copyright: Map tiles by [Stamen Design](http://stamen.com/), under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0). Data by [OpenStreetMap](http://openstreetmap.org/), under [ODbL](http://www.openstreetmap.org/copyright).\n- `\"stamenWatercolor\"` Stamen watercolor tiles. Copyright: Map tiles by [Stamen Design](http://stamen.com/), under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0). Data by [OpenStreetMap](http://openstreetmap.org/), under [CC BY SA](http://creativecommons.org/licenses/by-sa/3.0).\n- `\"wikimedia\"` Wikimedia tiles. Copyright: [Wikimedia](https://wikimediafoundation.org/wiki/Maps_Terms_of_Use) | © [OpenStreetMap](https://www.openstreetmap.org/copyright).\n\n\u003ci\u003etilefunction\u003c/i\u003e\u003cbr /\u003e\nInstead of a \u003ci\u003etilesource\u003c/i\u003e, you can specify a \u003ci\u003etilefunction\u003c/i\u003e to generate a tiles URL. The tiles are generated by [d3-tile](https://github.com/d3/d3-tile) and have the properties `x`, `y`, `z`, `tx` and `ty`. You can [read more about these properties in the documentation](https://github.com/d3/d3-tile#_tile). For example, a \u003ci\u003etilefunction\u003c/i\u003e could be specified as:\n```js\nvar tileGenerator = tile =\u003e \"http://\" + \"abc\"[tile.y % 3] + \".tile.openstreetmap.org/\" + tile.z + \"/\" + tile.x + \"/\" + tile.y + \".png\";\n\nmap.tiles(tileGenerator);\n```\n\n\u003cb\u003eMap attributes\u003c/b\u003e\n\n\u003ca name=\"height\" href=\"#height\"\u003e#\u003c/a\u003e \u003ci\u003emap\u003c/i\u003e.\u003cb\u003eheight\u003c/b\u003e\u003cbr /\u003e\n\u003ca name=\"width\" href=\"#width\"\u003e#\u003c/a\u003e \u003ci\u003emap\u003c/i\u003e.\u003cb\u003ewidth\u003c/b\u003e\n\nThe map's dimensions.\n\n\u003ca name=\"svg\" href=\"#svg\"\u003e#\u003c/a\u003e \u003ci\u003emap\u003c/i\u003e.\u003cb\u003esvg\u003c/b\u003e\n\nThe D3 selection of the SVG element containing the map.\n\n\u003ca name=\"parent\" href=\"#parent\"\u003e#\u003c/a\u003e \u003ci\u003emap\u003c/i\u003e.\u003cb\u003eparent\u003c/b\u003e\n\nA string of the map's parent element.\n\n### Layers\n\nLayers 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 \u003ci\u003emap\u003c/i\u003e.layerPolygons() or \u003ci\u003emap\u003c/i\u003e.layerPoints(), and to indent four spaces when calling drawing functions on the preceding layer.\n\n```js\nvar map = swiftmap.map(\"#map\")\n  .layerPolygons(TopoJSON, d =\u003e d.state_name, \"states\")\n    .drawPolygons()\n    .drawBoundary()\n  .layerPolygons(TopoJSON, d =\u003e d.county_name, \"counties\")\n    .draw()\n  .layerPoints(TopoJSON, d =\u003e d.city_name, \"cities\")\n    .drawPoints()\n    .drawLabels(d =\u003e d.city_name);\n\nmap.layers[1].polygons.style(\"fill\", scheme);\n```\n\nLayers can be styled with CSS selectors.\n\n```css\n#map .boundary {\n  stroke-width: 2px;\n}\n#map .boundary.boundary-states {\n  stroke-width: 3px;\n}\n#map .polygon {\n  fill: none;\n}\n#map .polygon.polygon-counties {\n  stroke-dasharray: 5, 5;\n}\n#map .point.point-cities {\n  fill: blue;\n}\n#map .label.label-cities {\n  font-size: 1.2em;\n}\n```\n\n[See it in action](https://bl.ocks.org/HarryStevens/ef47557d3639243956e26261199ee91c).\n\n\u003ca name=\"layerPolygons\" href=\"#layerPolygons\"\u003e#\u003c/a\u003e \u003ci\u003emap\u003c/i\u003e.\u003cb\u003elayerPolygons\u003c/b\u003e([\u003ci\u003edata\u003c/i\u003e][, \u003ci\u003ekey\u003c/i\u003e][, \u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/layerPolygons.js \"Source\")\n\nSets or gets a polygons layer.\n\n\u003ci\u003edata\u003c/i\u003e\u003cbr /\u003e\nThe \u003ci\u003edata\u003c/i\u003e must be specified as a TopoJSON object. If no \u003ci\u003edata\u003c/i\u003e is passed, returns the geospatial data associated with the layer.\n\n\u003ci\u003ekey\u003c/i\u003e\u003cbr /\u003e\nEach datum will be assigned a key value based on the value returned by an optional \u003ci\u003ekey\u003c/i\u003e function. This key will be used to match each datum of geospatial data to a corresponding datum of tabular data when a scheme is passed to a style or attribute of the layer. If no \u003ci\u003ekey\u003c/i\u003e is specified, each datum will be assigned a key according to its index.\n\n\u003ci\u003elayer\u003c/i\u003e\u003cbr /\u003e\nIf a \u003ci\u003elayer\u003c/i\u003e is passed, the geospatial data will be associated with the name of the layer, which must be specified as a string. In the \u003ci\u003elayer\u003c/i\u003e string, space characters will be converted to hyphens so that DOM elements produced by the layer's geospatial data can be referenced with CSS selectors.\n\nIf a \u003ci\u003elayer\u003c/i\u003e is not passed, the geospatial data will be associated with the index of the layer, where the first layer is indexed to `0`. For instance, the name of the third layer added to the map will default to `2`, and can be styled with CSS using the following pattern:\n\n```css\n#map .boundary.boundary-2 {\n  stroke-width: 2px;\n}\n```\n\n\u003ca name=\"draw\" href=\"#draw\"\u003e#\u003c/a\u003e \u003ci\u003epolygons\u003c/i\u003e.\u003cb\u003edraw\u003c/b\u003e([\u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/draw.js \"Source\")\n\nDraws a polygons layer. This is a convenience method equivalent to \u003ci\u003emap\u003c/i\u003e.fit().drawPolygons().drawBoundary().\n\n\u003ci\u003elayer\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003elayer\u003c/i\u003e is not specified, the most recently added layer will be drawn by default. If you wish to change the default behavior, you may specify a \u003ci\u003elayer\u003c/i\u003e as a string or a number corresponding to a layer that has already been added to the map, and Swiftmap will draw or redraw the specified layer.\n\n\u003ca name=\"drawBoundary\" href=\"#drawBoundary\"\u003e#\u003c/a\u003e \u003ci\u003epolygons\u003c/i\u003e.\u003cb\u003edrawBoundary\u003c/b\u003e([\u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/drawBoundary.js \"Source\")\n\nDraws a polygons layer's outer boundary. The boundary is rendered as an SVG `path` element, can be accessed as a D3 selection via `map.layers.\u003c layername \u003e.boundary`, and can be styled with the CSS class `.boundary` or `.boundary-\u003c layername \u003e` or both.\n\n\u003ci\u003elayer\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003elayer\u003c/i\u003e is not specified, the boundary of the most recently added layer will be drawn by default. If you wish to change the default behavior, you may specify a \u003ci\u003elayer\u003c/i\u003e as a string or a number corresponding to a layer that has already been added to the map, and Swiftmap will draw or redraw the boundary of the specified layer.\n\n\u003ca name=\"layerPoints\" href=\"#layerPoints\"\u003e#\u003c/a\u003e \u003ci\u003emap\u003c/i\u003e.\u003cb\u003elayerPoints\u003c/b\u003e([\u003ci\u003edata\u003c/i\u003e][, \u003ci\u003ekey\u003c/i\u003e][, \u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/layerPoints.js \"Source\")\n\nSets or gets a points layer. See [\u003ci\u003emap\u003c/i\u003e.polygons()](#polygons) for descriptions of the arguments.\n\n\u003ca name=\"drawLabels-polygons\" href=\"#drawLabels-polygons\"\u003e#\u003c/a\u003e \u003ci\u003epolygons\u003c/i\u003e.\u003cb\u003edrawLabels\u003c/b\u003e(\u003ci\u003ekey\u003c/i\u003e[,\u003ci\u003eoffset\u003c/i\u003e][, \u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/drawLabels.js \"Source\")\n\nLabels each polygon at its [pole of inaccessibility](https://github.com/mapbox/polylabel) or, in the case of complex multipolygons, its [centroid](https://en.wikipedia.org/wiki/Centroid). Labels are rendered as SVG `text` elements, can be accessed as D3 selections via `map.layers.\u003c layername \u003e.labels`, and can be styled with the CSS class `.label` or `.label-\u003c layername \u003e` or both.\n\n\u003ci\u003ekey\u003c/i\u003e\u003cbr /\u003e\nA \u003ci\u003ekey\u003c/i\u003e function tells Swiftmap how each datum should be labeled.\n\n```js\nvar key = d =\u003e d.properties.name;\n\nmap.drawLabels(key);\n```\n\n\u003ci\u003eoffset\u003c/i\u003e\u003cbr /\u003e\nBy default, labels are centered on the coordinates of the polygons' centroid. To offset the labels, you may specify the \u003ci\u003eoffset\u003c/i\u003e as `true`. If the polygons's centroid is on the left half of the map, the label will be placed to the left side of the point. If the polygons's centroid is on the right half of the map, the label will be placed to the right side of the point.\n\n\u003ci\u003elayer\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003elayer\u003c/i\u003e is not specified, the labels of the most recently added layer will be drawn by default. If you wish to change the default behavior, you may specify a \u003ci\u003elayer\u003c/i\u003e as a string or a number corresponding to a layer that has already been added to the map, and Swiftmap will draw or redraw the labels of the specified layer.\n\n\u003ca name=\"drawPoints-polygons\" href=\"#drawPoints-polygons\"\u003e#\u003c/a\u003e \u003ci\u003epolygons\u003c/i\u003e.\u003cb\u003edrawPoints\u003c/b\u003e([\u003ci\u003eradius\u003c/i\u003e][, \u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/drawPoints.js \"Source\")\n\nDraws points at the centroid of each polygon in a polygons layer. Points are rendered as SVG `circle` elements, can be accessed as D3 selections via `map.layers.\u003c layername \u003e.points`, and can be styled with the CSS class `.point` or `.point-\u003c layername \u003e` or both.\n\n\u003ci\u003eradius\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003eradius\u003c/i\u003e is specified, sets each point's radius in pixels. Defaults to `2`.\n\n\u003ci\u003elayer\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003elayer\u003c/i\u003e is not specified, the points of the most recently added layer will be drawn by default. If you wish to change the default behavior, you may specify a \u003ci\u003elayer\u003c/i\u003e as a string or a number corresponding to a layer that has already been added to the map, and Swiftmap will draw or redraw the polygons of the specified layer.\n\n\u003ca name=\"drawPolygons\" href=\"#drawPolygons\"\u003e#\u003c/a\u003e \u003ci\u003epolygons\u003c/i\u003e.\u003cb\u003edrawPolygons\u003c/b\u003e([\u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/drawPolygons.js \"Source\")\n\nDraws a polygons layer's polygons. For example, if the layer's TopoJSON contains states, the polygons are the states. Polygons are rendered as SVG `path` elements, can be accessed as D3 selections via `map.layers.\u003c layername \u003e.polygons`, and can be styled with the CSS class `.polygon` or `.polygon-\u003c layername \u003e` or both.\n\n\u003ci\u003elayer\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003elayer\u003c/i\u003e is not specified, the polygons of the most recently added layer will be drawn by default. If you wish to change the default behavior, you may specify a \u003ci\u003elayer\u003c/i\u003e as a string or a number corresponding to a layer that has already been added to the map, and Swiftmap will draw or redraw the polygons of the specified layer.\n\n\u003ca name=\"fit-polygons\" href=\"#fit-polygons\"\u003e#\u003c/a\u003e \u003ci\u003epolygons\u003c/i\u003e.\u003cb\u003efit\u003c/b\u003e([\u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/fit.js \"Source\")\n\nUpdates the projection so that a layer's outer boundary fits the map's parent element. Overrides any previous invocations of \u003ci\u003emap\u003c/i\u003e.fit(), as the map can only have one projection.\n\n\u003ci\u003elayer\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003elayer\u003c/i\u003e is not specified, the most recently added layer will be fit to the boundary of the parent element. If you wish to change the default behavior, you may specify a \u003ci\u003elayer\u003c/i\u003e as a string or a number corresponding to a layer that has already been added to the map, and Swiftmap will fit the specified layer's outer boundary to the parent element.\n\n\u003ca name=\"layerPoints\" href=\"#layerPoints\"\u003e#\u003c/a\u003e \u003ci\u003emap\u003c/i\u003e.\u003cb\u003elayerPoints\u003c/b\u003e([\u003ci\u003edata\u003c/i\u003e][, \u003ci\u003ekey\u003c/i\u003e][, \u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/layerPoints.js \"Source\")\n\nSets or gets a points layer. See [\u003ci\u003emap\u003c/i\u003e.polygons()](#polygons) for descriptions of the arguments.\n\n\u003ca name=\"drawLabels-points\" href=\"#drawLabels-points\"\u003e#\u003c/a\u003e \u003ci\u003epoints\u003c/i\u003e.\u003cb\u003edrawLabels\u003c/b\u003e(\u003ci\u003ekey\u003c/i\u003e[,\u003ci\u003eoffset\u003c/i\u003e][, \u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/drawLabels.js \"Source\")\n\nLabels the points. Labels are rendered as SVG `text` elements, can be accessed as D3 selections via `map.layers.\u003c layername \u003e.labels`, and can be styled with the CSS class `.label` or `.label-\u003c layername \u003e` or both.\n\n\u003ci\u003ekey\u003c/i\u003e\u003cbr /\u003e\nA \u003ci\u003ekey\u003c/i\u003e function tells Swiftmap how each datum should be labeled.\n\n```js\nvar key = d =\u003e d.properties.name;\n\nmap.drawLabels(key);\n```\n\n\u003ci\u003eoffset\u003c/i\u003e\u003cbr /\u003e\nBy default, labels are centered on the coordinates of the point. To offset the labels, you may specify the \u003ci\u003eoffset\u003c/i\u003e as `true`. If the label's point is on the left half of the map, the label will be placed to the left side of the point. If the label's point is on the right half of the map, the label will be placed to the right side of the point.\n\n\u003ci\u003elayer\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003elayer\u003c/i\u003e is not specified, the labels of the most recently added layer will be drawn by default. If you wish to change the default behavior, you may specify a \u003ci\u003elayer\u003c/i\u003e as a string or a number corresponding to a layer that has already been added to the map, and Swiftmap will draw or redraw the labels of the specified layer.\n\n\u003ca name=\"drawPoints-points\" href=\"#drawPoints-points\"\u003e#\u003c/a\u003e \u003ci\u003epoints\u003c/i\u003e.\u003cb\u003edrawPoints\u003c/b\u003e([\u003ci\u003eradius\u003c/i\u003e][, \u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/drawPoints.js \"Source\")\n\nDraws circles, located at each point's coordinates, to a layer. Points are rendered as SVG `circle` elements, can be accessed as D3 selections via `map.layers.\u003c layername \u003e.points`, and can be styled with the CSS class `.point` or `.point-\u003c layername \u003e` or both.\n\n\u003ci\u003eradius\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003eradius\u003c/i\u003e is specified, sets each point's radius in pixels. Defaults to `2`.\n\n\u003ci\u003elayer\u003c/i\u003e\u003cbr /\u003e\nIf \u003ci\u003elayer\u003c/i\u003e is not specified, the points of the most recently added layer will be drawn by default. If you wish to change the default behavior, you may specify a \u003ci\u003elayer\u003c/i\u003e as a string or a number corresponding to a layer that has already been added to the map, and Swiftmap will draw or redraw the points of the specified layer.\n\n\u003ca name=\"fit-points\" href=\"#fit-points\"\u003e#\u003c/a\u003e \u003ci\u003epoints\u003c/i\u003e.\u003cb\u003efit\u003c/b\u003e([\u003ci\u003elayer\u003c/i\u003e]) [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/map/fit.js \"Source\")\n\nSee [\u003ci\u003epolygons\u003c/i\u003e.fit()](#fit-polygons).\n\n### Schemes\n\nSchemes provide an interface for mapping values of your data to visual attributes, such as a choropleth map's color palette or the radii of circles in a bubble map. Schemes can be added to a map like so:\n\n```js\nmap.layers[0].style(\"fill\", schemeSequential);\nmap.layers[1].attr(\"r\", schemeContinuous);\nmap.layers[2].style(\"opacity\", schemeCategorical);\n```\n\n[See it in action](https://bl.ocks.org/harrystevens/2fb3dce0b9f4930be9141bc6f418994f).\n\n\u003ca name=\"schemeCategorical\" href=\"#schemeCategorical\"\u003e#\u003c/a\u003e swiftmap.\u003cb\u003eschemeCategorical\u003c/b\u003e() [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/scheme/schemeCategorical.js \"Source\")\n\nCategorical schemes are used to assign styles or attributes of layer elements, such as polygons' fill color, to non-numerical categories of data, such as political parties in an election.\n\n```js\nvar scheme = swiftmap.schemeCategorical()\n  .data(JSON, d =\u003e d.state)\n  .from(d =\u003e d.party)\n  .to({\n    \"Republican\": \"tomato\",\n    \"Democratic\": \"steelblue\"\n  })\n  .toOther(\"yellow\");\n```\n\n[See it in action](https://bl.ocks.org/HarryStevens/bc32fe303275b00a2aeea96328a3b143).\n\n\u003ca name=\"data-categorical\" href=\"#data-categorical\"\u003e#\u003c/a\u003e \u003ci\u003ecategorical\u003c/i\u003e.\u003cb\u003edata\u003c/b\u003e([\u003ci\u003edata\u003c/i\u003e][, \u003ci\u003ekey\u003c/i\u003e])\n\nAdds data to a scheme, where each datum corresponds to each element of a layer.\n\n\u003ci\u003edata\u003c/i\u003e\u003cbr /\u003e\nThe \u003ci\u003edata\u003c/i\u003e must be specified as a JSON array. If no \u003ci\u003edata\u003c/i\u003e is passed, returns the data associated with the scheme.\n\n\u003ci\u003ekey\u003c/i\u003e\u003cbr /\u003e\nEach datum will be assigned a key value returned by an optional \u003ci\u003ekey\u003c/i\u003e function. This key will be used to match each datum of tabular data to a corresponding datum of geospatial data when the scheme is passed to a style or attribute of a layer. If no \u003ci\u003ekey\u003c/i\u003e is specified, each datum will be assigned a key according to its index.\n\n\u003ca name=\"from-categorical\" href=\"#from-categorical\"\u003e#\u003c/a\u003e \u003ci\u003ecategorical\u003c/i\u003e.\u003cb\u003efrom\u003c/b\u003e(\u003ci\u003efunction\u003c/i\u003e)\n\nSets the values accessor to the specified \u003ci\u003efunction\u003c/i\u003e, allowing the scheme to interact with a layer's data. \n\n\u003ci\u003efunction\u003c/i\u003e\u003cbr /\u003e\nWhen the scheme is passed to a style or attribute of a layer, the \u003ci\u003efunction\u003c/i\u003e will be called for each datum in the layer's data array, being passed the datum `d`, the index `i`, and the array `data` as three arguments. For example, if you want your scheme to be based on each polygon's party:\n\n```js\nvar data = [\n  {party: \"Democratic\", state: \"California\"},\n  {party: \"Republican\", state: \"Texas\"},\n  ...\n];\n\nscheme\n  .data(data, d =\u003e d.state)\n  .from(d =\u003e d.party);\n\nmap.layers[0].polygons.style(\"fill\", scheme);\n```\n\n\u003ca name=\"to-categorical\" href=\"#to-categorical\"\u003e#\u003c/a\u003e \u003ci\u003ecategorical\u003c/i\u003e.\u003cb\u003eto\u003c/b\u003e([\u003ci\u003eobject\u003c/i\u003e])\n\nSpecifies how the scheme should visually render the values returned by \u003ci\u003ecategorical\u003c/i\u003e.from().\n\n\u003ci\u003eobject\u003c/i\u003e\u003cbr /\u003e\nIf an \u003ci\u003eobject\u003c/i\u003e is specified, it must be specified as an object where each property is one of the scheme's categories – that is, a value returned by \u003ci\u003ecategorical\u003c/i\u003e.from() – and each value is the visual style or attribute associated with that category.\n\n```js\nscheme.to({\n  \"Republican\": \"tomato\",\n  \"Democratic\": \"steelblue\"\n});\n```\n\nIf \u003ci\u003eobject\u003c/i\u003e is not specified, returns the object associated with the scheme.\n\n\u003ca name=\"toOther-categorical\" href=\"#toOther-categorical\"\u003e#\u003c/a\u003e \u003ci\u003ecategorical\u003c/i\u003e.\u003cb\u003etoOther\u003c/b\u003e([\u003ci\u003evalue\u003c/i\u003e])\n\nSets or gets an alternative value in the scheme.\n\n\u003ci\u003evalue\u003c/i\u003e\u003cbr /\u003e\nIf a \u003ci\u003evalue\u003c/i\u003e is specified, assigns values to those DOM elements whose category is not present among the properties of the object passed to \u003ci\u003ecategorical\u003c/i\u003e.to(). If \u003ci\u003evalue\u003c/i\u003e is not specified, returns the scheme's alternative value, which defaults to `null`.\n\n\u003ca name=\"schemeContinuous\" href=\"#schemeContinuous\"\u003e#\u003c/a\u003e swiftmap.\u003cb\u003eschemeContinuous\u003c/b\u003e() [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/scheme/schemeContinuous.js \"Source\")\n\nContinuous schemes are used to map values of data to corresponding visual attributes along a continuum. You can use a continuous scheme to make a [bubble map](https://bl.ocks.org/harrystevens/2fb3dce0b9f4930be9141bc6f418994f) where the radius of each bubbble corresponds to the magnitude of each datum. You can also use a continuous scheme to create [choropleth maps with a gradient scale](https://bl.ocks.org/harrystevens/4608d25b2f424a2e011d7ab9cc804f4e).\n\n```js\nvar scheme = swiftmap.schemeContinuous()\n  .data(JSON)\n  .from(d =\u003e d.value)\n  .to([2, 20]);\n```\n\n[See it in action](https://bl.ocks.org/HarryStevens/ab09e52c2d513ae7e6aa783cbd9dc1c3).\n\n\u003ca name=\"data-continuous\" href=\"#data-continuous\"\u003e#\u003c/a\u003e \u003ci\u003econtinuous\u003c/i\u003e.\u003cb\u003edata\u003c/b\u003e([\u003ci\u003edata\u003c/i\u003e][, \u003ci\u003ekey\u003c/i\u003e])\n\nSee [\u003ci\u003ecategorical\u003c/i\u003e.data()](#data-categorical).\n\n\u003ca name=\"from-continuous\" href=\"#from-continuous\"\u003e#\u003c/a\u003e \u003ci\u003econtinuous\u003c/i\u003e.\u003cb\u003efrom\u003c/b\u003e(\u003ci\u003efunction\u003c/i\u003e)\n\nSee [\u003ci\u003ecategorical\u003c/i\u003e.from()](#from-categorical).\n\n\u003ca name=\"to-continuous\" href=\"#to-continuous\"\u003e#\u003c/a\u003e \u003ci\u003econtinuous\u003c/i\u003e.\u003cb\u003eto\u003c/b\u003e([\u003ci\u003earray\u003c/i\u003e])\n\nSets or gets the minimum and maximum values of a visual attribute associated with the scheme.\n\n\u003ci\u003earray\u003c/i\u003e\u003cbr /\u003e\nIf a \u003ci\u003earray\u003c/i\u003e is specified, sets the sequence of values of the the visual attribute associate with the scheme. The array can contain as many items as you like, and the scheme will map data values returned by \u003ci\u003econtinuous\u003c/i\u003e.from() to corresponding values in the \u003ci\u003earray\u003c/i\u003e. If a \u003ci\u003earray\u003c/i\u003e is not specified, returns the array associated with the scheme, which defaults to `[0, 1]`.\n\n\u003ca name=\"toOther-continuous\" href=\"#toOther-continuous\"\u003e#\u003c/a\u003e \u003ci\u003econtinuous\u003c/i\u003e.\u003cb\u003etoOther\u003c/b\u003e([\u003ci\u003evalue\u003c/i\u003e])\n\nSee [\u003ci\u003ecategorical\u003c/i\u003e.toOther()](#toOther-categorical).\n\n\u003ca name=\"schemeSequential\" href=\"#schemeSequential\"\u003e#\u003c/a\u003e swiftmap.\u003cb\u003eschemeSequential\u003c/b\u003e() [\u003c\u003e](https://github.com/HarryStevens/swiftmap/tree/master/src/scheme/schemeSequential.js \"Source\")\n\nSequential schemes are used to assign styles or attributes of layer elements, such as polygons' fill color, to discrete ranges in a series of values that progress from low to high.\n\n```js\nvar scheme = swiftmap.schemeSequential()\n  .data(JSON)\n  .from(d =\u003e d.value)\n  .to([\"#ffffcc\", \"#a1dab4\", \"#41b6c4\", \"#2c7fb8\", \"#253494\"])\n  .breaks(\"q\");\n```\n\n[See it in action](https://bl.ocks.org/HarryStevens/4db2b695df4b02042bfa0c1ee6eac299).\n\n\u003ca name=\"breaks\" href=\"#breaks\"\u003e#\u003c/a\u003e \u003ci\u003esequential\u003c/i\u003e.\u003cb\u003ebreaks\u003c/b\u003e([\u003ci\u003ebreaktype\u003c/i\u003e | \u003ci\u003ebreaklist\u003c/i\u003e])\n\nComputes class breaks based on data. If no argument is passed, returns the scheme's \u003ci\u003ebreaklist\u003c/i\u003e – an array of numbers representing the breaks associated with the scheme.\n\n\u003ci\u003ebreaktype\u003c/i\u003e\u003cbr /\u003e\nIf a \u003ci\u003ebreaktype\u003c/i\u003e is specified, the scheme will compute the class breaks based on the values returned by the \u003ci\u003efunction\u003c/i\u003e passed to [\u003ci\u003esequential\u003c/i\u003e.from()](#from-sequential). The \u003ci\u003ebreaktype\u003c/i\u003e must be specified as a string, either `\"e\"`, `\"q\"`, `\"l\"` or `\"k\"`.\n- `\"e\"` specifies \u003cb\u003eequidistant\u003c/b\u003e breaks, where each break spans an equal numeric range.\n- `\"l\"` specifies \u003cb\u003elogarithmic\u003c/b\u003e breaks, which are just like equidistant breaks but on a logarithmic scale.\n- `\"q\"` specifies \u003cb\u003equantile\u003c/b\u003e breaks, where an equal number of data points are placed into each break.\n- `\"k\"` specifies \u003cb\u003ek-means\u003c/b\u003e breaks, which use a [\u003ci\u003ek\u003c/i\u003e-means clustering](https://en.wikipedia.org/wiki/K-means_clustering) algorithm to group similar data points with each other.\n\nThe \u003ci\u003ebreaktype\u003c/i\u003e will default to `\"q\"` if \u003ci\u003esequential\u003c/i\u003e.breaks() is not called.\n\n\u003ci\u003ebreaklist\u003c/i\u003e\u003cbr /\u003e\nIf you'd rather use custom breaks, you can specify a \u003ci\u003ebreaklist\u003c/i\u003e as an array of numbers. The length of the \u003ci\u003ebreaklist\u003c/i\u003e should be one greater than the length of the \u003ci\u003earray\u003c/i\u003e passed to [\u003ci\u003esequential\u003c/i\u003e.to()](#to-sequential), and its extent should span the range of values returned by the \u003ci\u003efunction\u003c/i\u003e passed to [\u003ci\u003esequential\u003c/i\u003e.from()](#from-sequential). \n\n```js\nvar scheme = swiftmap.schemeSequential()\n  .from(d =\u003e d.value)\n  .to([\"tomato\", \"lightblue\", \"steelblue\", \"darkblue\"])\n  .breaks([-.5, 0, 20, 25, 55]);\n```\n\n[See it in action](https://bl.ocks.org/HarryStevens/9d052eec2ab33d0a84a4475030ede896).\n\n\u003ca name=\"data-sequential\" href=\"#data-sequential\"\u003e#\u003c/a\u003e \u003ci\u003esequential\u003c/i\u003e.\u003cb\u003edata\u003c/b\u003e([\u003ci\u003edata\u003c/i\u003e][, \u003ci\u003ekey\u003c/i\u003e])\n\nSee [\u003ci\u003ecategorical\u003c/i\u003e.data()](#data-categorical).\n\n\u003ca name=\"from-sequential\" href=\"#from-sequential\"\u003e#\u003c/a\u003e \u003ci\u003esequential\u003c/i\u003e.\u003cb\u003efrom\u003c/b\u003e(\u003ci\u003efunction\u003c/i\u003e)\n\nSee [\u003ci\u003ecategorical\u003c/i\u003e.from()](#from-categorical). For example, if you want your scheme to be based on each polygon's population density:\n\n```js\nvar data = [\n  {population: \"15324\", area: \"124\", county: \"Foo\"},\n  {population: \"23540\", area: \"365\", county: \"Bar\"},\n  ...\n];\n\nscheme\n  .data(data, d =\u003e d.county)\n  .from(d =\u003e +d.population / +d.area);\n\nmap.layers[0].polygons.style(\"fill\", scheme);\n```\n\n\u003ca name=\"to-sequential\" href=\"#to-sequential\"\u003e#\u003c/a\u003e \u003ci\u003esequential\u003c/i\u003e.\u003cb\u003eto\u003c/b\u003e([\u003ci\u003earray\u003c/i\u003e])\n\nSpecifies the series of styles or attributes to which values should be assigned, such as a serious of color buckets in a choropleth map.\n\n\u003ci\u003earray\u003c/i\u003e\u003cbr /\u003e\nIf an \u003ci\u003earray\u003c/i\u003e is specified, the scheme will assign a series of values to each item in the \u003ci\u003earray\u003c/i\u003e. If \u003ci\u003earray\u003c/i\u003e is not specified, returns the array associated with the scheme.\n\nThe \u003ci\u003earray\u003c/i\u003e will default to `[]` if this method is not called.\n\n\u003ca name=\"toOther-sequential\" href=\"#toOther-sequential\"\u003e#\u003c/a\u003e \u003ci\u003esequential\u003c/i\u003e.\u003cb\u003etoOther\u003c/b\u003e([\u003ci\u003evalue\u003c/i\u003e])\n\nSee [\u003ci\u003ecategorical\u003c/i\u003e.toOther()](#toOther-categorical).\n\n## Contributing\n\n```bash\ngit clone https://github.com/HarryStevens/swiftmap # clone this repository\ncd swiftmap # navigate into the directory\nnpm install # install node modules\n```\n\nSwiftmap is compiled with [rollup](https://github.com/rollup/rollup). Each function can be found in the [`src` directory](https://github.com/HarryStevens/swiftmap/tree/master/lib).\n\n```bash\nnpm run rollup # compile the library\nnpm run minify # minify the library\nnpm run build # compile and minify the library\n```\n\nSwiftmap also uses a custom version of D3.js, which can be found in [`lib/d3`](https://github.com/HarryStevens/swiftmap/tree/master/lib/d3). If you need to update the bundle, do `cd lib/d3`, where you can install additional dependencies and update the [`index.js`](https://github.com/HarryStevens/swiftmap/blob/master/lib/d3/index.js) file. You will also have to update the `globals` object and the `only` array in the `resolve()` function in [`rollup.config.js`](https://github.com/HarryStevens/swiftmap/blob/master/rollup.config.js).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHarryStevens%2Fswiftmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHarryStevens%2Fswiftmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHarryStevens%2Fswiftmap/lists"}