{"id":13481499,"url":"https://github.com/newsappsio/spam","last_synced_at":"2025-10-07T22:28:13.065Z","repository":{"id":33633687,"uuid":"37286029","full_name":"newsappsio/spam","owner":"newsappsio","description":"A D3 library to create maps with Canvas","archived":false,"fork":false,"pushed_at":"2022-09-29T23:46:35.000Z","size":6384,"stargazers_count":102,"open_issues_count":5,"forks_count":9,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-11-30T16:11:41.407Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/newsappsio.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":"2015-06-11T21:01:51.000Z","updated_at":"2024-10-13T20:57:57.000Z","dependencies_parsed_at":"2022-08-23T20:10:56.906Z","dependency_job_id":null,"html_url":"https://github.com/newsappsio/spam","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newsappsio%2Fspam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newsappsio%2Fspam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newsappsio%2Fspam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newsappsio%2Fspam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/newsappsio","download_url":"https://codeload.github.com/newsappsio/spam/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231918512,"owners_count":18445748,"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-31T17:00:52.340Z","updated_at":"2025-10-07T22:28:08.014Z","avatar_url":"https://github.com/newsappsio.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Maps"],"sub_categories":[],"readme":"# ![spam](https://cloud.githubusercontent.com/assets/1236790/14952933/3679edc8-1065-11e6-920a-207f8443f141.png)\n\nSpam is a small library to create modern [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) maps with [D3](https://github.com/mbostock/d3). It makes it easy to create static or zoomable maps with automatic projection and retina resolution.\n\nCustom projections, click/hover events,`d3.geo` path generators and multiple map features are supported.\n\nCheck the [API docs](https://github.com/newsappsio/spam/wiki/API) or continue reading for [examples](#examples).\n\n## Introduction\n\nWhen using Spam you are still in charge of painting everything. However the library creates the canvas boilerplate and tries to handle as much as possible without putting constraints on the user.\n\nIn order to improve performance, Spam uses two painting phases. The 'static' layer is created once (for every zoom level) and should contain the majority of operations. After these operations complete, the canvas is saved into a picture.\n\nNow every time the canvas needs a repaint (e.g. for hover effects), Spam enters the 'dynamic' painting phase. Here we provide the option to draw dynamic content, while painting the 'static' image in the background.\n\nIn order to get the most out of Spam, we encourage you to think about which parts of your map are static and dynamic beforehand and then use the appropriate callbacks. The more code runs in the 'static' functions, the faster Spam will become.\n\n## Getting started\n\nSpam depends on [D3](https://github.com/mbostock/d3) and [TopoJSON](https://github.com/mbostock/topojson) and it's available on npm and with a normal script tag.\n\nIf you use NPM, you can do `npm install spamjs` and include it in your project:\n\n```js\nimport Spam from \"spamjs\";\n```\n\nOtherwise, [download the latest release](https://github.com/newsappsio/spam/releases/download/v1.1.0/spam.zip) and add a script tag in your site (don't forget to include D3 and TopoJSON).\n\n```html\n\u003cscript src=\"https://d3js.org/d3.v5.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://d3js.org/topojson.v3.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"spam.js\"\u003e\u003c/script\u003e\n```\n\nHere's the most basic map you can do:\n\n```js\nd3.json(\"map.json\").then(d =\u003e {\n  topojson.presimplify(d);\n\n  const map = new Spam.StaticCanvasMap({\n    element: \"body\",\n    data: [\n      {\n        features: topojson.feature(d, d.objects[\"map\"]),\n        static: {\n          paintfeature: parameters =\u003e {\n            parameters.context.stroke();\n          }\n        }\n      }\n    ]\n  });\n\n  map.init();\n});\n```\n\nAnd that's it! A simple, static map in just a few lines of code! It will be automagically projected and centered in your container, nothing else needed.\n\n## Examples\n\nThe best way to start making maps with Spam is reading the examples. You can use the same structure in your maps and fork them with your own TopoJSON.\n\n- [Basic static map](http://bl.ocks.org/martgnz/c48aa019de720fcd86030d3b07990d8d)\n- [Basic zoomable map](http://bl.ocks.org/martgnz/fa8187c716c8a6d788eab7d51095b419)\n- [Static map with labels](http://bl.ocks.org/martgnz/e5c0387a5bb675b061a2c0a9f573f86a)\n- [Static data visualization](http://bl.ocks.org/martgnz/9023a67f080cca8b31ef5d6b1dcf4637)\n- [Custom projection](http://bl.ocks.org/martgnz/d8bc3d6c29e712e3255f095671a51967)\n- [Canvas globe](http://bl.ocks.org/martgnz/c1a5addfb6c2ec914f2d0bc9b3112b71)\n- [Static choropleth](http://bl.ocks.org/martgnz/56664c7ea8efef56f93ca948ef855d06)\n- [Zoomable choropleth](http://bl.ocks.org/martgnz/a61c2da0e45a108c857e)\n\n## API\n\nCheck the [API docs](https://github.com/newsappsio/spam/wiki/API) on the wiki for more information.\n\n## License\n\nMIT © Lukas Appelhans, Martín González.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewsappsio%2Fspam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnewsappsio%2Fspam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewsappsio%2Fspam/lists"}