{"id":13426634,"url":"https://github.com/markmarkoh/datamaps","last_synced_at":"2025-05-13T00:34:11.229Z","repository":{"id":5438432,"uuid":"6631214","full_name":"markmarkoh/datamaps","owner":"markmarkoh","description":"Customizable SVG map visualizations for the web in a single Javascript file using D3.js","archived":false,"fork":false,"pushed_at":"2023-04-25T04:38:01.000Z","size":73907,"stargazers_count":3794,"open_issues_count":226,"forks_count":1006,"subscribers_count":136,"default_branch":"master","last_synced_at":"2025-05-02T01:38:04.521Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://datamaps.github.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"platformio/platformio","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markmarkoh.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,"governance":null}},"created_at":"2012-11-10T19:04:40.000Z","updated_at":"2025-04-25T03:36:58.000Z","dependencies_parsed_at":"2022-09-15T02:02:40.663Z","dependency_job_id":"f4db94ea-a776-44cc-9e9d-1bfdc83a9619","html_url":"https://github.com/markmarkoh/datamaps","commit_stats":{"total_commits":257,"total_committers":49,"mean_commits":5.244897959183674,"dds":0.357976653696498,"last_synced_commit":"c05d20014a480bd1bd8750a6ee9ba57023daf8c4"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmarkoh%2Fdatamaps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmarkoh%2Fdatamaps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmarkoh%2Fdatamaps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmarkoh%2Fdatamaps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markmarkoh","download_url":"https://codeload.github.com/markmarkoh/datamaps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252145020,"owners_count":21701438,"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:39.652Z","updated_at":"2025-05-13T00:34:11.165Z","avatar_url":"https://github.com/markmarkoh.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","👨‍💻 JavaScript Libraries","others","Web Map Development","Maps","JavaScript tools"],"sub_categories":["Mapping","Maps"],"readme":"\u003e ## :warning: If you are interested in being added as a maintainer for Datamaps, please get in touch with me over email: mark dimarco at gmail\n\n\nDatamaps\n======\n\n\n[![Join the chat at https://gitter.im/markmarkoh/datamaps](https://badges.gitter.im/markmarkoh/datamaps.svg)](https://gitter.im/markmarkoh/datamaps?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n#### Interactive maps for data visualizations. Bundled into a single Javascript file.\n\nDatamaps is intended to provide some data visualizations based on geographical data. It's SVG-based, can scale to any screen size, and includes everything inside of 1 script file.\nIt heavily relies on the amazing [D3.js](https://github.com/mbostock/d3) library.\n\nOut of the box it includes support for choropleths and bubble maps (see [demos](http://datamaps.github.io)), but it's not limited to just that. Its new plugin system allows for the addition of any type of visualization over the map.\n\n##### For feature requests, open an issue!\n\n##### [Contribution Guideliness](#contributing-guidelines)\n\n#### Demos at http://datamaps.github.io\n\n---\n\nDownloads:\n\n - [World map (94kb, 36.7kb gzip'd)](http://datamaps.github.io/scripts/0.4.4/datamaps.world.min.js)\n - [USA only (35kb, 13.9kb gzip'd)](http://datamaps.github.io/scripts/0.4.4/datamaps.usa.min.js)\n - [USA \u0026 World (131kb, 47.1kb gzip'd)](http://datamaps.github.io/scripts/0.4.4/datamaps.all.min.js)\n - [No preset topojson (6.8kb, 2.3kb gzip'd)](http://datamaps.github.io/scripts/0.4.4/datamaps.none.min.js)\n\n\n### Documentation\n\n#### Getting Started\n\n1. Include D3.js and Topojson on your page\n2. Include Datamaps.js on your page\n3. Add a container, set the height and width and position to relative\n4. Create a `new Datamaps(options)`, passing in at least an `element` option\n\nExample:\n```html\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/datamaps.world.min.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"container\" style=\"position: relative; width: 500px; height: 300px;\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    var map = new Datamap({element: document.getElementById('container')});\n\u003c/script\u003e\n```\n\nThis should render a new world map with a standard projection.\n\n#### via [NPM](https://www.npmjs.com/package/datamaps)\n1. `npm install datamaps`\n2. Refer to file in `dist` directory, like:\n\n```html\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"node_modules/datamaps/dist/datamaps.world.min.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"container\" style=\"position: relative; width: 500px; height: 300px;\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    var map = new Datamap({element: document.getElementById('container')});\n\u003c/script\u003e\n```\n\n#### via Bower\n\n1. `bower install datamaps`\n2. Refer to file in `dist` directory, like:\n\n```html\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bower_components/datamaps/dist/datamaps.world.min.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"container\" style=\"position: relative; width: 500px; height: 300px;\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    var map = new Datamap({element: document.getElementById('container')});\n\u003c/script\u003e\n```\n\n#### USA Only Map\nA map of the USA with an Albers based projection will be default if you only include `datamaps.usa.min.js`, but in case you include `datamaps.all.min.js`:\n```html\n\u003cscript\u003e\n    var map = new Datamap({\n        element: document.getElementById('container'),\n        scope: 'usa'\n    });\n\u003c/script\u003e\n```\n\n#### Changing the default fill colors\n```html\n\u003cscript\u003e\n    var map = new Datamap({\n        element: document.getElementById('container'),\n        fills: {\n            defaultFill: 'rgba(23,48,210,0.9)' // Any hex, color name or rgb/rgba value\n        }\n    });\n\u003c/script\u003e\n```\n\n#### Disabling popup or hover effects\n```html\n\u003cscript\u003e\n    var map = new Datamap({\n        element: document.getElementById('container'),\n        geographyConfig: {\n            highlightOnHover: false,\n            popupOnHover: false\n        }\n    });\n\u003c/script\u003e\n```\n\n#### Using custom maps\n```html\n\u003cscript\u003e\n    var map = new Datamap({\n        element: document.getElementById('container'),\n        geographyConfig: {\n            dataUrl: '/custom.json'\n        },\n        scope: 'custom',\n        setProjection: function(element, options) {\n            var projection, path;\n            projection = d3.geo.albersUsa()\n                .center([long, lat])\n                .scale(element.offsetWidth)\n                .translate([element.offsetWidth / 2, element.offsetHeight / 2]);\n}\n            path = d3.geo.path()\n                .projection( projection );\n\n            return {path: path, projection: projection};\n        }\n    });\n\u003c/script\u003e\n```\n\nBy specifying a `dataUrl`, Datamaps will attempt to fetch that resource as TopoJSON.\n\nIf you are using a custom map, you'll probably want to specify your own `setProjection` method as well.\n\n`setProjection` takes 2 arguments, `element` as a DOM element, `options` as the original options you passed in. It should return an object with two properties: `path` as a `d3.geo.path`, `projection` as a `d3.geo.projection`\n\nThe example above will result in albersUsa projection.\n\n![custom UK based data](http://datamaps.github.io/images/custom.png)\n\n[Read about other D3.js projections](https://github.com/mbostock/d3/wiki/Geo-Projections)\n\n[Read more about TopoJSON](https://github.com/mbostock/topojson/wiki)\n\n### You can create any country's map using custom maps.\nFollow the below steps:-\n1. Find the {xyz}.topo.json file for you country xyz. You can find from https://github.com/markmarkoh/datamaps/tree/master/dist.\n2. Extract Datamap.prototype.{xyz}Topo json and save it file named {xyz}.topo.json\n3. If the state codes contains dot(.) in the topo json, then you need to remove the dot from the code e.g, if your state code is CA.AL, remove CA. part to get 2-digit ISO code AL. If the states code are already in 2-digit ISO or do't have dot(.) then don't do any modification follow next steps.\n4. Objects country name in {xyz}.topo.json should be same as you declared in the Datamap scope. e.g, for Canada, in canada.topo.json we have {\"type\":\"Topology\",\"objects\":{\"can\":{\"type\":\"GeometryCollection\"}}} and we have provided scope as 'canada' in the canada.html page. So this case 'can' in canada.topo.json must be as 'canada' i.e {\"type\":\"Topology\",\"objects\":{\"canada\":{\"type\":\"GeometryCollection\"}}}.\n5. You need to override setProjection method, which is explained above three countires. You can refer any one.\n6. Done\n\nHere are the some examples of different countries maps.\n\n### 1. Bubble map on India Geographical region\n![india bubble map](https://github.com/Anujarya300/bubble_maps/blob/master/images/india.jpg)\n\n[india.html](https://github.com/Anujarya300/bubble_maps/blob/master/india.html)\n```\n var bubble_map = new Datamap({\n            element: document.getElementById('india'),\n            scope: 'india',\n            geographyConfig: {\n                popupOnHover: true,\n                highlightOnHover: true,\n                borderColor: '#444',\n                borderWidth: 0.5,\n                dataUrl: 'https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/india.topo.json'\n                //dataJson: topoJsonData\n            },\n            fills: {\n                'MAJOR': '#306596',\n                'MEDIUM': '#0fa0fa',\n                'MINOR': '#bada55',\n                defaultFill: '#dddddd'\n            },\n            data: {\n                'JH': { fillKey: 'MINOR' },\n                'MH': { fillKey: 'MINOR' }\n            },\n            setProjection: function (element) {\n                var projection = d3.geo.mercator()\n                    .center([78.9629, 23.5937]) // always in [East Latitude, North Longitude]\n                    .scale(1000);\n                var path = d3.geo.path().projection(projection);\n                return { path: path, projection: projection };\n            }\n});\n```\n###### Set the correct projection for India map on world map with the help of Longitude and Latitute of India (you can google it India Longitude and Latitute)\nPlease use **india.toto.json** for India geopraphy json data from https://github.com/Anujarya300/bubble_maps/blob/master/data/geography-data/india.topo.json, otherwise your map wont work. (I have truncated IND. from all state ISO code(2-digit ISO code), e.g IND.JH for Jharkhand state truncated to JH)  \n\nPlease note in setProjection method, I have set [78.9629, 23.5937] to locate center point for India in the world map. That means\nLatitude = 78.9629 E and Longitude = 23.5937 N. Remember Latitute and Longitude are always East and North. For western countries, Latitude are in West so make it convert as Negative of East. e.g 102.3421 W ==\u003e -102.3421 E.\n\n### 2. Bubble map on Canada Geographical region\n![canada bubble map](https://github.com/Anujarya300/bubble_maps/blob/master/images/canada.jpg)\n\n[canada.html](https://github.com/Anujarya300/bubble_maps/blob/master/canada.html)\n```\nvar bubble_map = new Datamap({\n            element: document.getElementById('canada'),\n            scope: 'canada',\n            geographyConfig: {\n                popupOnHover: true,\n                highlightOnHover: true,\n                borderColor: '#444',\n                borderWidth: 0.5,\n                dataUrl: 'https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/canada.topo.json'\n                //dataJson: topoJsonData\n            },\n            fills: {\n                'MAJOR': '#306596',\n                'MEDIUM': '#0fa0fa',\n                'MINOR': '#bada55',\n                defaultFill: '#dddddd'\n            },\n            data: {\n                'JH': { fillKey: 'MINOR' },\n                'MH': { fillKey: 'MINOR' }\n            },\n            setProjection: function (element) {\n                  var projection = d3.geo.mercator()\n                .center([-106.3468, 68.1304]) // always in [East Latitude, North Longitude]\n                .scale(250)\n                .translate([element.offsetWidth / 2, element.offsetHeight / 2]);\n\n                var path = d3.geo.path().projection(projection);\n                return { path: path, projection: projection };\n            }\n        });\n```\n###### Set the correct projection for Canada map on world map with the help of Longitude and Latitute of Canada (you can google it Canada Longitude and Latitute)\n\nPlease use **canada.toto.json** for India geopraphy json data from https://github.com/Anujarya300/bubble_maps/blob/master/data/geography-data/canada.topo.json, otherwise your map wont work. (I have truncated CA. from all state ISO code(2-digit ISO code), e.g CA.TN to TN)\n        \nPlease note in setProjection method, I have set [-106.3468, 68.1304] to locate center point for Canada in the world map. That means\nLatitude = 106.3468 W and Longitude = 68.1304 N. Remember Latitute and Longitude are always East and North. For western countries, Latitude are in West so make it convert as Negative of East. e.g 102.3421 W ==\u003e -102.3421 E.\n\n*You can adjust this latitude and longitude co-ordinates by minor changing. \ne.g, if your map is not showing full view of North then you can change 68.1304 N to 70.3200 N or 71.3200 etc.\n     if your map is not showing full view of East then you can change 32.1304 E to 70.3200 E or 30.3200 etc.*\n     \n[More about other countries maps](https://github.com/Anujarya300/bubble_maps)\n\n#### Creating a Choropleth\n\nProbably the most common type of map visualization, where different states or countries are color coded.\n![US election map, example of a choropleth](http://datamaps.github.io/images/choropleth.png)\n\nYou'll need to know the 2 letter state code ('NY' for New York) or the 3 letter country code ('SCT' for Scotland) to fill in areas.\n```html\n\u003cscript\u003e\n    var map = new Datamap({\n        element: document.getElementById('container'),\n        fills: {\n            HIGH: '#afafaf',\n            LOW: '#123456',\n            MEDIUM: 'blue',\n            UNKNOWN: 'rgb(0,0,0)',\n            defaultFill: 'green'\n        },\n        data: {\n            IRL: {\n                fillKey: 'LOW',\n                numberOfThings: 2002\n            },\n            USA: {\n                fillKey: 'MEDIUM',\n                numberOfThings: 10381\n            }\n        }\n    });\n\n    // Draw a legend for this map\n    map.legend();\n\u003c/script\u003e\n```\n\nThis will draw a world map and fill in IRL (Ireland) with the corresponding `fills.LOW` and USA with `fills.MEDIUM`.\n\nYou can also use `fill: color` for each state if you don't want to define a `fillKey`.\n\nColors will be applied in this order: `fillKey`, `fill`, `defaultFill`.\n\n#### Updating a choropleth after initial drawing\n```javascript\nmap.updateChoropleth({\n   USA: {fillKey: 'LOW'},\n   CAN: '#0fa0fa'\n});\n```\n\nYou can specify either a literal color (as a string), or an object with a fillKey property.\n\n\n#### Resetting a choropleth to `defaultFill`\n\nThe following will reset the entire map to the `defaultFill` and update `CA` to be filled green.\n```js\nmap.updateChoropleth({CA: 'green'}, {reset: true})\n```\n\nThe following will reset the entire map to `defaultFill`\n```js\nmap.updateChoropleth(null, {reset: true})\n```\n\nThe following will reset the entire map to `defaultFill`, but update the corresponding data of NY.\n```js\nmap.updateChoropleth({NY: {numberOfVoters: 55452}}, {reset: true})\n```\n\nYou can also add a map legend with the `legend` plugin (used above)\n\n#### Choropleth with auto-calculated color\n\nExample [highmaps_world.html](src/examples/highmaps_world.html) explains how to create colorized map based on some quantity of things, [Live Demo](http://jsbin.com/kuvojohapi/1/edit?html,output)\n\nExample result:\n\n![auto calculated color](/src/screenshots/datamap_highmap_exmaple.jpg)\n\n#### Custom popup on hover\n\nExpanding on the previous example of using `data`, any property passed into `data` will be sent to the `popupTemplate` function, which can be override to display custom messages.\n```html\n\u003cscript\u003e\n    var map = new Datamap({\n        element: document.getElementById('container'),\n        fills: {\n            HIGH: '#afafaf',\n            LOW: '#123456',\n            MEDIUM: 'blue',\n            UNKNOWN: 'rgb(0,0,0)',\n            defaultFill: 'green'\n        },\n        data: {\n            IRL: {\n                fillKey: 'LOW',\n                numberOfThings: 2002\n            },\n            USA: {\n                fillKey: 'MEDIUM',\n                numberOfThings: 10381\n            }\n        },\n        geographyConfig: {\n            popupTemplate: function(geo, data) {\n                return ['\u003cdiv class=\"hoverinfo\"\u003e\u003cstrong\u003e',\n                        'Number of things in ' + geo.properties.name,\n                        ': ' + data.numberOfThings,\n                        '\u003c/strong\u003e\u003c/div\u003e'].join('');\n            }\n        }\n    });\n\u003c/script\u003e\n```\n\n`geographyConfig.popupTemplate`, `bubblesConfig.popupTemplate` and `arcConfig.popupTemplate` just needs to return an HTML string, so feel free to use [Handlebars](https://github.com/wycats/handlebars.js/) or [Underscore](http://underscorejs.org/#template) templates (instead of the terrible Array.join method above).\n\n\n#### Bubbles\nBubbles in a core plugin that will render circles('bubbles') on different parts of the map. Each of these bubbles can be color coded in the same way a choropleth is color coded (see above 'Choropleth' example).\n```js\nvar bombMap = new Datamap({\n    element: document.getElementById('map_bombs'),\n    scope: 'world',\n    geographyConfig: {\n        popupOnHover: false,\n        highlightOnHover: false\n    },\n    fills: {\n        'USA': '#1f77b4',\n        'RUS': '#9467bd',\n        'PRK': '#ff7f0e',\n        'PRC': '#2ca02c',\n        'IND': '#e377c2',\n        'GBR': '#8c564b',\n        'FRA': '#d62728',\n        'PAK': '#7f7f7f',\n        defaultFill: '#EDDC4E'\n    },\n    data: {\n        'RUS': {fillKey: 'RUS'},\n        'PRK': {fillKey: 'PRK'},\n        'PRC': {fillKey: 'PRC'},\n        'IND': {fillKey: 'IND'},\n        'GBR': {fillKey: 'GBR'},\n        'FRA': {fillKey: 'FRA'},\n        'PAK': {fillKey: 'PAK'},\n        'USA': {fillKey: 'USA'}\n    }\n});\n\n     var bombs = [{\n        name: 'Joe 4',\n        radius: 25,\n        yield: 400,\n        country: 'USSR',\n        fillKey: 'RUS',\n        significance: 'First fusion weapon test by the USSR (not \"staged\")',\n        date: '1953-08-12',\n        latitude: 50.07,\n        longitude: 78.43\n      },{\n        name: 'RDS-37',\n        radius: 40,\n        yield: 1600,\n        country: 'USSR',\n        fillKey: 'RUS',\n        significance: 'First \"staged\" thermonuclear weapon test by the USSR (deployable)',\n        date: '1955-11-22',\n        latitude: 50.07,\n        longitude: 78.43\n\n      },{\n        name: 'Tsar Bomba',\n        radius: 75,\n        yield: 50000,\n        country: 'USSR',\n        fillKey: 'RUS',\n        significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%',\n        date: '1961-10-31',\n        latitude: 73.482,\n        longitude: 54.5854\n      }\n    ];\n//draw bubbles for bombs\nbombMap.bubbles(bombs, {\n    popupTemplate: function (geo, data) {\n            return ['\u003cdiv class=\"hoverinfo\"\u003e' +  data.name,\n            '\u003cbr/\u003ePayload: ' +  data.yield + ' kilotons',\n            '\u003cbr/\u003eCountry: ' +  data.country + '',\n            '\u003cbr/\u003eDate: ' +  data.date + '',\n            '\u003c/div\u003e'].join('');\n    }\n});\n```\n\n![bubble map](http://datamaps.github.io/images/bubbles.png)\n\nThe first parameter to `bubbles` should be an array of objects, each with **at least** 3 properties:\n\n  - `latitude`\n  - `longitude`\n  - `radius`\n\nOptionally, pass in `fillKey` to color code the bubble, and pass in any other data you want to render in a popup template which can be overridden in the options parameter.\n\nFor further customization, you can set these properties on each bubble to override the options parameter (or default options):\n\n  - `borderColor`\n  - `borderWidth`\n  - `borderOpacity`\n  - `fillOpacity`\n\nThe second parameter is the `options` param, where you can override any of the default options (documented below)\n\n\n#### Live updating of bubbles\nYou can continue to call `bubbles` on the same map instance and the map will auto update itself. Any bubble previously drawn that's **not included** in subsequent calls will be removed from the UI.\n\n`map.bubbles([])` will erase all bubbles.\n\n\n#### Labels\n\nFor USA maps you can add 2 letter (*i.e., NY, TX*) labels to each state. To add labels, after created the map:\n\n```javascript\nmap.labels();\n```\n\nThe following options are allowed:\n\n  - `labelColor` // Font color, default: #000\n  - `lineWidth` // Line width for New England states, default: 1\n  - `fontSize` // Font size, default: 10\n  - `fontFamily` // Font family, default: 'Verdana'\n  - `customLabelText` // Replaces 2 letter labels with custom\n\nAn example for using the options:\n\n```javascript\nmap.labels({labelColor: 'blue', fontSize: 12});\n```\n\nAn example for using the customLabelText\n\nThis accepts an object whose keys are uppercase 2 letter state codes.\nValues will be substituted for default label text\nAny missing values default to 2 state letters\n```javascript\nnewLabels = {'AK':'Alaska', 'AL':'123',.......};\nmap.labels({'customLabelText': newLabels});\n```\nExample [custom-labels.html](src/examples/custom-labels.html) for using the customLabelText\n\n![custom labels](/src/screenshots/datamap_custom_label_example.png)\n\n#### Zooming\n\nYou can override the default projection by setting your own `setProjection(element)` function.\n[Example here](http://datamaps.github.io#zoom)\n\n```javascript\nvar map = new Datamap({\n  scope: 'world',\n  element: document.getElementById('container1'),\n  setProjection: function(element) {\n    var projection = d3.geo.equirectangular()\n      .center([19, -3])\n      .rotate([4.4, 0])\n      .scale(400)\n      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);\n    var path = d3.geo.path()\n      .projection(projection);\n\n    return {path: path, projection: projection};\n  },\n```\n\n#### Using with jQuery\nIf jQuery is present on the page when the Datamaps library loads, it'll automatically create a jQuery plugin called `datamaps` that can be used like:\n```html\n    \u003cscript\u003e\n        $(\"#container\").datamaps(options);\n    \u003c/script\u003e\n```\n\n#### Events\nAll events are bubbled up to the root `svg` element and to listen to events, use the `done` callback.\n\n```html\n\u003cscript\u003e\n    var map = new Datamap({\n        element: document.getElementById('container'),\n        done: function(datamap) {\n            datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {\n                alert(geography.properties.name);\n            });\n        }\n    });\n\u003c/script\u003e\n```\n\n#### Responsive Maps\nSet `responsive` to `true` and then listen for `resize` events on `window`, and call `Datamaps.prototype.resize`.\n\nAvoid setting the height and width of the `container` with hard pixel values, instead use percent values. (use `50%` instead of `500px`.\n\nIf the aspect ratio of your custom map is not the default `16:9` (`0.5625`), you should use the `aspectRatio` option to set it appropriately (eg. `0.3` for a `3:1` aspect ratio).\n\n```html\n\u003cdiv id=\"container\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    var map = new Datamap({\n        element: document.getElementById('container'),\n        responsive: true\n    });\n\n    // Pure JavaScript\n    window.addEventListener('resize', function() {\n        map.resize();\n    });\n\n    // Alternatively with d3\n    d3.select(window).on('resize', function() {\n        map.resize();\n    });\n\n    // Alternatively with jQuery\n    $(window).on('resize', function() {\n       map.resize();\n    });\n\u003c/script\u003e\n```\n---\n\n#### Default Options\n```js\n  {\n    scope: 'world', // Currently supports 'usa' and 'world', however with custom map data you can specify your own\n    setProjection: setProjection, // Returns a d3 path and projection functions\n    projection: 'equirectangular', // Style of projection to be used. try \"mercator\"\n    height: null, // If not null, datamaps will grab the height of 'element'\n    width: null, // If not null, datamaps will grab the width of 'element',\n    responsive: false, // If true, call `resize()` on the map object when it should adjust it's size\n    done: function() {}, // Callback when the map is done drawing\n    fills: {\n      defaultFill: '#ABDDA4' // The keys in this object map to the \"fillKey\" of [data] or [bubbles]\n    },\n    dataType: 'json', // For use with dataUrl, currently 'json' or 'csv'. CSV should have an `id` column\n    dataUrl: null, // If not null, datamaps will attempt to fetch this based on dataType ( default: json )\n    geographyConfig: {\n        dataUrl: null, // If not null, datamaps will fetch the map JSON (currently only supports topojson)\n        hideAntarctica: true,\n        hideHawaiiAndAlaska : false,\n        borderWidth: 1,\n        borderOpacity: 1,\n        borderColor: '#FDFDFD',\n        popupTemplate: function(geography, data) { // This function should just return a string\n          return '\u0026lt;div class=\"hoverinfo\"\u0026gt;\u0026lt;strong\u0026gt;' + geography.properties.name + '\u0026lt;/strong\u0026gt;\u0026lt;/div\u0026gt;';\n        },\n        popupOnHover: true, // True to show the popup while hovering\n        highlightOnHover: true,\n        highlightFillColor: '#FC8D59',\n        highlightBorderColor: 'rgba(250, 15, 160, 0.2)',\n        highlightBorderWidth: 2,\n        highlightBorderOpacity: 1\n    },\n    bubblesConfig: {\n        borderWidth: 2,\n        borderOpacity: 1,\n        borderColor: '#FFFFFF',\n        popupOnHover: true, // True to show the popup while hovering\n        radius: null,\n        popupTemplate: function(geography, data) { // This function should just return a string\n          return '\u003cdiv class=\"hoverinfo\"\u003e\u003cstrong\u003e' + data.name + '\u003c/strong\u003e\u003c/div\u003e';\n        },\n        fillOpacity: 0.75,\n        animate: true,\n        highlightOnHover: true,\n        highlightFillColor: '#FC8D59',\n        highlightBorderColor: 'rgba(250, 15, 160, 0.2)',\n        highlightBorderWidth: 2,\n        highlightBorderOpacity: 1,\n        highlightFillOpacity: 0.85,\n        exitDelay: 100, // Milliseconds\n        key: JSON.stringify\n    },\n    arcConfig: {\n      strokeColor: '#DD1C77',\n      strokeWidth: 1,\n      arcSharpness: 1,\n      animationSpeed: 600, // Milliseconds\n      popupOnHover: false, // True to show the popup while hovering\n      popupTemplate: function(geography, data) { // This function should just return a string\n        // Case with latitude and longitude\n        if ( ( data.origin \u0026\u0026 data.destination ) \u0026\u0026 data.origin.latitude \u0026\u0026 data.origin.longitude \u0026\u0026 data.destination.latitude \u0026\u0026 data.destination.longitude ) {\n          return '\u003cdiv class=\"hoverinfo\"\u003e\u003cstrong\u003eArc\u003c/strong\u003e\u003cbr\u003eOrigin: ' + JSON.stringify(data.origin) + '\u003cbr\u003eDestination: ' + JSON.stringify(data.destination) + '\u003c/div\u003e';\n        }\n        // Case with only country name\n        else if ( data.origin \u0026\u0026 data.destination ) {\n          return '\u003cdiv class=\"hoverinfo\"\u003e\u003cstrong\u003eArc\u003c/strong\u003e\u003cbr\u003e' + data.origin + ' -\u003e ' + data.destination + '\u003c/div\u003e';\n        }\n        // Missing information\n        else {\n          return '';\n        }\n      }\n    }\n  }\n```\n---\n\n#Contributing Guidelines\n\n* Do not run the `grunt build` task or submit any built files in your PR.\n* Have an example in `src/examples` if adding a new feature. Copy an existing feature `.html` file to start.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmarkoh%2Fdatamaps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkmarkoh%2Fdatamaps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmarkoh%2Fdatamaps/lists"}