{"_id":"@bluehalo/leaflet-d3","_rev":"4-7c1d8802f78e9ff2922c7266f08ce0b1","name":"@bluehalo/leaflet-d3","dist-tags":{"latest":"6.1.3"},"versions":{"6.1.0":{"name":"@bluehalo/leaflet-d3","version":"6.1.0","author":{"name":"BlueHalo"},"license":"MIT","_id":"@bluehalo/leaflet-d3@6.1.0","maintainers":[{"name":"reblace","email":"reblace@gmail.com"},{"name":"ekdeveloper","email":"eugene.koon@bluehalo.com"},{"name":"ashin-bluehalo","email":"andrew.shin@bluehalo.com"},{"name":"shane-bh","email":"shane.oneill@bluehalo.com"},{"name":"rodmercad","email":"rnmercado@gmail.com"}],"homepage":"https://github.com/bluehalo/leaflet-d3#readme","bugs":{"url":"https://github.com/bluehalo/leaflet-d3/issues"},"dist":{"shasum":"141641e6cfbc75cf184d2788bb6b6b611214aa4b","tarball":"https://registry.npmjs.org/@bluehalo/leaflet-d3/-/leaflet-d3-6.1.0.tgz","fileCount":27,"integrity":"sha512-lRDsg7KIwmQB01eUDA0FykpWlKvqoeBX2REatqkYBDFHU8ys10Fsvy3//y1Zeg8nxN1ijiLUga4YWftdJnFWew==","signatures":[{"sig":"MEUCIQC5RdhwsNa8+JMr5I4xaD/Ym9whYPE1Ap3PNRlCongOwgIgeat1vd7uuO3i//rxHkYDt9kDoEU/CJDVZWTPfvWvW/Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":185506},"main":"dist/leaflet-d3.js","module":"src/js/index.js","gitHead":"0e2fc76eef07634935301fec5222e0bd78110692","scripts":{"lint":"eslint 'src/**/*.js'","build":"npm run bundle","watch":" watch 'npm run build' ./src","bundle":"npm run rollup && npm run uglify","rollup":"rollup -c rollup.config.js","uglify":"uglifyjs --comments 'license' -o ./dist/leaflet-d3.min.js -- ./dist/leaflet-d3.js","prepare":"npm run build","prebuild":"npm run lint"},"typings":"index.d.ts","_npmUser":{"name":"reblace","email":"reblace@gmail.com"},"copyright":"Copyright (c) 2007-2026 BlueHalo","moduleName":"leafletD3","repository":{"url":"git+https://github.com/bluehalo/leaflet-d3.git","type":"git"},"_npmVersion":"10.9.7","description":"Custom d3 layers for leaflet","directories":{},"_nodeVersion":"22.22.2","artifactName":"leaflet-d3","_hasShrinkwrap":false,"devDependencies":{"d3":"7","watch":"1","eslint":"8","rollup":"2","leaflet":"1.7","@types/d3":"7","d3-hexbin":"0.2","uglify-js":"3","@types/leaflet":"1.7"},"peerDependencies":{"d3":"7","leaflet":"1","d3-hexbin":"0.2"},"_npmOperationalInternal":{"tmp":"tmp/leaflet-d3_6.1.0_1775861338268_0.8412573987384593","host":"s3://npm-registry-packages-npm-production"}},"6.1.1":{"name":"@bluehalo/leaflet-d3","version":"6.1.1","author":{"name":"BlueHalo"},"license":"MIT","_id":"@bluehalo/leaflet-d3@6.1.1","maintainers":[{"name":"reblace","email":"reblace@gmail.com"},{"name":"ekdeveloper","email":"eugene.koon@bluehalo.com"},{"name":"ashin-bluehalo","email":"andrew.shin@bluehalo.com"},{"name":"shane-bh","email":"shane.oneill@bluehalo.com"},{"name":"rodmercad","email":"rnmercado@gmail.com"}],"homepage":"https://github.com/bluehalo/leaflet-d3#readme","bugs":{"url":"https://github.com/bluehalo/leaflet-d3/issues"},"dist":{"shasum":"7f4dcdf3802df2f873e7ff7d4a5a94ed6baa994f","tarball":"https://registry.npmjs.org/@bluehalo/leaflet-d3/-/leaflet-d3-6.1.1.tgz","fileCount":47,"integrity":"sha512-YRR9qeyGiaPbXixkde72KXRfSFQuSzeIsOvTdFb6QtgItzGjYdEstIWzcT9dCZSE4MI9W8wMFyAkpd7hg1qpJg==","signatures":[{"sig":"MEUCIDPIbIPIe94KKeX2QSa32wBVbJv3NEGrYqOCFT0UTGllAiEA3np4l/umyIx8tC7+t/WveQvF0T4apDwG4MfxKPU/h28=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":402120},"main":"dist/leaflet-d3.js","module":"src/js/index.js","gitHead":"bf767f812ec1758f5543b3edf828e8b566d4604c","scripts":{"lint":"eslint 'src/**/*.js'","test":"vitest run","build":"npm run bundle","watch":" watch 'npm run build' ./src","bundle":"npm run rollup && npm run uglify","rollup":"rollup -c rollup.config.js","uglify":"uglifyjs --comments 'license' -o ./dist/leaflet-d3.min.js -- ./dist/leaflet-d3.js","prepare":"npm run build","prebuild":"npm run lint","test:coverage":"vitest run --coverage"},"typings":"index.d.ts","_npmUser":{"name":"reblace","email":"reblace@gmail.com"},"copyright":"Copyright (c) BlueHalo LLC","moduleName":"leafletD3","repository":{"url":"git+https://github.com/bluehalo/leaflet-d3.git","type":"git"},"_npmVersion":"10.9.7","description":"Custom d3 layers for leaflet","directories":{},"_nodeVersion":"22.22.2","artifactName":"leaflet-d3","_hasShrinkwrap":false,"devDependencies":{"d3":"7","jsdom":"^26.1.0","watch":"1","eslint":"8","rollup":"2","vitest":"^3.2.4","leaflet":"1.7","@types/d3":"7","d3-hexbin":"0.2","uglify-js":"3","@types/leaflet":"1.7","@vitest/coverage-v8":"^3.2.4"},"peerDependencies":{"d3":"7","leaflet":"1","d3-hexbin":"0.2"},"_npmOperationalInternal":{"tmp":"tmp/leaflet-d3_6.1.1_1776121952671_0.028708156887445435","host":"s3://npm-registry-packages-npm-production"}},"6.1.2":{"name":"@bluehalo/leaflet-d3","version":"6.1.2","author":{"name":"BlueHalo"},"license":"MIT","_id":"@bluehalo/leaflet-d3@6.1.2","maintainers":[{"name":"reblace","email":"reblace@gmail.com"},{"name":"ekdeveloper","email":"eugene.koon@bluehalo.com"},{"name":"ashin-bluehalo","email":"andrew.shin@bluehalo.com"},{"name":"shane-bh","email":"shane.oneill@bluehalo.com"},{"name":"rodmercad","email":"rnmercado@gmail.com"}],"homepage":"https://github.com/bluehalo/leaflet-d3#readme","bugs":{"url":"https://github.com/bluehalo/leaflet-d3/issues"},"dist":{"shasum":"7b9759d57e29395736914422dc241a0d6e306098","tarball":"https://registry.npmjs.org/@bluehalo/leaflet-d3/-/leaflet-d3-6.1.2.tgz","fileCount":11,"integrity":"sha512-JVxx6nZzfOyy8UqbGRC+isKHZdiYMCAupvo9uyfyETJtckzxugIM784jH/YFVh0cmY8hUOZE3FsP/RfiSHq6ag==","signatures":[{"sig":"MEUCIDiTq7vKwvYch1u9IRRni6x/4oKNeWooZhgx50C1Os5LAiEAhTOeJy9VehLgBDXUhD1sN+jtBV6tVb/2A+KjAyqKpew=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":158819},"main":"dist/leaflet-d3.js","module":"src/js/index.js","gitHead":"aa61735d1e7c101becfb52e0b329d4733d35e87a","scripts":{"lint":"eslint 'src/**/*.js'","test":"vitest run","build":"npm run bundle","watch":" watch 'npm run build' ./src","bundle":"npm run rollup && npm run uglify","rollup":"rollup -c rollup.config.js","uglify":"uglifyjs --comments 'license' -o ./dist/leaflet-d3.min.js -- ./dist/leaflet-d3.js","prepare":"npm run build","prebuild":"npm run lint","test:coverage":"vitest run --coverage"},"typings":"index.d.ts","_npmUser":{"name":"reblace","email":"reblace@gmail.com"},"copyright":"Copyright (c) BlueHalo LLC","moduleName":"leafletD3","repository":{"url":"git+https://github.com/bluehalo/leaflet-d3.git","type":"git"},"_npmVersion":"10.9.7","description":"Custom d3 layers for leaflet","directories":{},"_nodeVersion":"22.22.2","artifactName":"leaflet-d3","_hasShrinkwrap":false,"devDependencies":{"d3":"7","jsdom":"^26.1.0","watch":"1","eslint":"8","rollup":"2","vitest":"^3.2.4","leaflet":"1.7","@types/d3":"7","d3-hexbin":"0.2","uglify-js":"3","@types/leaflet":"1.7","@vitest/coverage-v8":"^3.2.4"},"peerDependencies":{"d3":"7","leaflet":"1","d3-hexbin":"0.2"},"_npmOperationalInternal":{"tmp":"tmp/leaflet-d3_6.1.2_1776122008560_0.27685438339355883","host":"s3://npm-registry-packages-npm-production"}},"6.1.3":{"name":"@bluehalo/leaflet-d3","artifactName":"leaflet-d3","moduleName":"leafletD3","description":"Custom d3 layers for leaflet","version":"6.1.3","author":{"name":"BlueHalo"},"copyright":"Copyright (c) BlueHalo LLC","license":"MIT","scripts":{"build":"npm run bundle","prebuild":"npm run lint","bundle":"npm run rollup && npm run uglify","lint":"eslint 'src/**/*.js'","prepare":"npm run build","rollup":"rollup -c rollup.config.js","test":"vitest run","test:coverage":"vitest run --coverage","uglify":"uglifyjs --comments 'license' -o ./dist/leaflet-d3.min.js -- ./dist/leaflet-d3.js","watch":"rollup -c rollup.config.js --watch"},"main":"dist/leaflet-d3.js","module":"src/js/index.js","typings":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/bluehalo/leaflet-d3.git"},"peerDependencies":{"d3":"7","d3-hexbin":"0.2","leaflet":"1"},"devDependencies":{"@types/d3":"7","@types/leaflet":"1.7","@vitest/coverage-v8":"^3.2.4","d3":"7","d3-hexbin":"0.2","eslint":"8","jsdom":"^26.1.0","leaflet":"1.7","rollup":"2","uglify-js":"3","vitest":"^3.2.4"},"_id":"@bluehalo/leaflet-d3@6.1.3","gitHead":"1117e74aa4e29187b791f39e7f9881ae40f9d6b0","bugs":{"url":"https://github.com/bluehalo/leaflet-d3/issues"},"homepage":"https://github.com/bluehalo/leaflet-d3#readme","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-YX8d5PP2+fU4cfjaConlISE4yidIf/T7bVveg8GjQCpCJw0DIQgROlNm9VhO4hFw0aQ4pAFzJ+A86ZQDQJ3LTg==","shasum":"f81fb254333f03438fd491fb483e6307ec001e25","tarball":"https://registry.npmjs.org/@bluehalo/leaflet-d3/-/leaflet-d3-6.1.3.tgz","fileCount":11,"unpackedSize":144799,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD0pnIqvkDOcExbZaMAKq5x9Kc8nRxYo4XOuTbcQh8TBAIgG3OqsItDs48podtTgnDhpfQTahpRevMdDepFTpjb/qw="}]},"_npmUser":{"name":"reblace","email":"reblace@gmail.com"},"directories":{},"maintainers":[{"name":"reblace","email":"reblace@gmail.com"},{"name":"ekdeveloper","email":"eugene.koon@bluehalo.com"},{"name":"ashin-bluehalo","email":"andrew.shin@bluehalo.com"},{"name":"shane-bh","email":"shane.oneill@bluehalo.com"},{"name":"rodmercad","email":"rnmercado@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/leaflet-d3_6.1.3_1778077647904_0.7324890233958785"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T22:48:58.171Z","modified":"2026-05-06T14:27:28.248Z","6.1.0":"2026-04-10T22:48:58.440Z","6.1.1":"2026-04-13T23:12:32.827Z","6.1.2":"2026-04-13T23:13:28.694Z","6.1.3":"2026-05-06T14:27:28.059Z"},"bugs":{"url":"https://github.com/bluehalo/leaflet-d3/issues"},"author":{"name":"BlueHalo"},"license":"MIT","homepage":"https://github.com/bluehalo/leaflet-d3#readme","repository":{"type":"git","url":"git+https://github.com/bluehalo/leaflet-d3.git"},"description":"Custom d3 layers for leaflet","maintainers":[{"name":"reblace","email":"reblace@gmail.com"},{"name":"ekdeveloper","email":"eugene.koon@bluehalo.com"},{"name":"ashin-bluehalo","email":"andrew.shin@bluehalo.com"},{"name":"shane-bh","email":"shane.oneill@bluehalo.com"},{"name":"rodmercad","email":"rnmercado@gmail.com"}],"readme":"# @bluehalo/leaflet-d3\n\n[![CI](https://github.com/bluehalo/leaflet-d3/actions/workflows/ci.yml/badge.svg)](https://github.com/bluehalo/leaflet-d3/actions/workflows/ci.yml)\n[![Code Coverage](https://codecov.io/gh/bluehalo/leaflet-d3/graph/badge.svg)](https://codecov.io/gh/bluehalo/leaflet-d3)\n\n> Leaflet D3\n> Provides a collection of [D3.js](http://d3js.org) based visualization plugins for [Leaflet](http://leafletjs.com/).\n> Supports D3 v7\n\n## Table of Contents\n- [Install](#install)\n- [Usage](#usage)\n- [Hexbins API](docs/API.md#hexbins-api)\n- [Pings API](docs/API.md#pings-api)\n- [Changelog](#changelog)\n- [Contribute](#contribute)\n- [License](#license)\n- [Credits](#credits)\n\n\n## Install\nInstall the package and its peer dependencies via npm:\n```\nnpm install @bluehalo/leaflet-d3 d3 d3-hexbin leaflet\n```\n\nIf you want to grab the source files directly without using npm, or you want to run the examples, you can build the dist files directly.\nSimply check out the repository, and then build it with the following commands:\n```\ngit clone git@github.com:bluehalo/leaflet-d3.git\ncd leaflet-d3\nnpm install\nnpm run build\n```\n\n## Usage\n\n### Hexbins\nCreate dynamic hexbin-based heatmaps on Leaflet maps.\nThis plugin is based on [the work of Steven Hall](https://gist.github.com/sghall/8167665).\nThe primary difference is that this plugin leverages the data-binding power of d3 to allow you to dynamically update the data and visualize the transitions.\n\n<img src=\"https://cloud.githubusercontent.com/assets/480701/4594707/d995541a-5091-11e4-9955-5938b1cb977a.png\" alt=\"map with hexbins\"/>\n\nLive Demo: [JSFiddle](http://jsfiddle.net/acjnbu8t/embedded/result/)\n\nTo use, simply declare a hexbin layer and add it to your map.\nYou can then add data to the layer.\n\n```js\n// Create the hexbin layer and set all of the accessor functions\nvar hexLayer = L.hexbinLayer().addTo(map);\n\n// Set the data (can be set multiple times)\nhexLayer.data([[lng1, lat1], [lng2, lat2], ... [lngN, latN]]);\n\n```\n\n#### Styling\n\nYou will likely want to apply your own styles to the hexbin hexagons themselves. To do so, use the ```hexbin-hexagon``` class.\nSee the following example:\n\n```css\n.hexbin-hexagon {\n\tstroke: #000;\n\tstroke-width: .5px;\n}\n```\n\n#### Tooltips\n\nYou have a couple options when it comes to providing tooltips for your users.\nFirst, you can register for the appropriate hover events and manually access/manipulate the dom to show/hide tooltips.\nSecond, you can leverage the built-in hover handlers, which try to encapsulate a lot of this behavior.\n\n```\nvar hexLayer = L.hexbinLayer()\n\t.hoverHandler(L.HexbinHoverHandler.tooltip());\n```\n\nThis handler, combined with CSS, can be used to show a tooltip and highlight the hovered hexbin.\nIn the following example, we change the stroke color and show a tooltip.\n\n```\n.hexbin-container:hover .hexbin-hexagon {\n\ttransition: 200ms;\n\tstroke: orange;\n\tstroke-width: 1px;\n\tstroke-opacity: 1;\n}\n\n.hexbin-tooltip {\n\tpadding: 8px;\n\tborder-radius: 4px;\n\tborder: 1px solid black;\n\tbackground-color: white;\n}\n```\n\nThere's more documentation on how to customize the behavior of the hover handlers in the [API docs](docs/API.md#hexbins-api).\n\n\n#### Special Notes\n\n**Applying Durations:**\nIf your data is transforming faster than the transition duration, you may encounter unexpected behavior.\nThis is an artifact of how transitions interact with and cancel each other.\nYou should reduce the transition duration or eliminate it entirely if you are going to be using this plugin in a realtime manner.\n\n**Color Scales:**\nTo use a polylinear color scale, simply provide more than two colors in the range. The domain cardinality will be adjusted automatically.\nA minimum of two values is required in the color range, but a single-color range is possible by using `['blue', 'blue']` for example.\nSee the examples to see how diverging and discrete color scales can be used.\n\n\n### Pings\nCreate realtime animated drops/pings/blips on a map.\nThis plugin can be used to indicate a transient event, such as a real-time occurrance of an event at a specific geographical location.\n\n<img src=\"https://cloud.githubusercontent.com/assets/480701/4890582/5b6781ae-63a0-11e4-8e45-236eb7c75b85.gif\" alt=\"map with pings\"/>\n\n**Live Demo:** [JSFiddle](http://jsfiddle.net/reblace/7jfhLgnq/embedded/result/)\n\nTo use, simply declare a ping layer and add it to your map.\nYou can then add data by calling the ping() method.\n\n```js\n// Create the ping layer and add it to the map\nvar pingLayer = L.pingLayer().addTo(map);\n\n// Submit data so that it shows up as a ping with an optional per-ping css class\npingLayer.ping([ 38.991709, -76.886109 ], 'myCustomCssClass');\n\n```\n\n#### Styling\n\nYou will likely want to apply your own styles to the pings themselves. To do so, use the ```ping``` class.\nSee the following example:\n\n```css\n.ping {\n\tfill: steelblue;\n\tstroke: #222;\n\tstroke-width: .5px;\n}\n```\n\n\n## Hexbins API\n\nFull API documentation is in [docs/API.md](docs/API.md#hexbins-api). It covers:\n- `L.hexbinLayer(options)` — layer creation and all configuration options\n- Accessor methods: `data()`, `radius()`, `opacity()`, `duration()`, color/radius scales and domains, `lng()`/`lat()`, `colorValue()`/`radiusValue()`, `fill()`, `dispatch()`\n- `L.HexbinHoverHandler` — built-in `tooltip`, `resizeFill`, `resizeScale`, `compound` handlers, and the custom handler interface\n\n\n## Pings API\n\nFull API documentation is in [docs/API.md](docs/API.md#pings-api). It covers:\n- `L.pingLayer(options)` — layer creation and all configuration options\n- Accessor methods: `ping()`, `duration()`, `fps()`, `radiusRange()`, `opacityRange()`, radius/opacity scales, `radiusScaleFactor()`, `lng()`/`lat()`, `data()`, `getActualFps()`\n\n\n## Changelog\n\nSee [CHANGES.md](CHANGES.md) for the full version history.\n\n\n## Contribute\nPRs accepted. Please make contributions on feature branches and open a pull request against `master`.\n\n\n## License\nSee [LICENSE](LICENSE) for details.\n\n\n## Credits\nThe hexbin portion of this plugin was based on [the work of Steven Hall](https://gist.github.com/sghall/8167665) ([@sghall](https://github.com/sghall)).\n\nD3.js was created by the legendary [Mike Bostock](https://github.com/mbostock).\n\n[Leaflet](http://leafletjs.com/) is maintained by [lots of cool people](https://github.com/Leaflet/Leaflet/graphs/contributors).\n","readmeFilename":"README.md"}