{"id":21186602,"url":"https://github.com/fetchte/firemap","last_synced_at":"2025-03-14T20:18:15.752Z","repository":{"id":57236781,"uuid":"94402100","full_name":"fetchTe/firemap","owner":"fetchTe","description":"Heatmap By Inverse Distance Weighting","archived":false,"fork":false,"pushed_at":"2017-06-15T19:15:31.000Z","size":160,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-08T22:33:23.464Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://firemap.netlify.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fetchTe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-15T05:12:02.000Z","updated_at":"2023-07-02T12:32:30.000Z","dependencies_parsed_at":"2022-08-26T15:10:10.783Z","dependency_job_id":null,"html_url":"https://github.com/fetchTe/firemap","commit_stats":null,"previous_names":["fetchte/firemap","artisin/firemap"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetchTe%2Ffiremap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetchTe%2Ffiremap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetchTe%2Ffiremap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetchTe%2Ffiremap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fetchTe","download_url":"https://codeload.github.com/fetchTe/firemap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243639555,"owners_count":20323511,"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-11-20T18:24:37.576Z","updated_at":"2025-03-14T20:18:15.730Z","avatar_url":"https://github.com/fetchTe.png","language":"JavaScript","readme":"# FireMap\n\n[![npm](https://img.shields.io/npm/l/firemap.svg)](https://github.com/artisin/firemap/blob/master/LICENSE.txt)\n[![npm](https://img.shields.io/npm/v/firemap.svg)](https://www.npmjs.com/package/firemap)\n[![David](https://img.shields.io/david/artisin/firemap.svg)](https://github.com/artisin/firemap/blob/master/package.json)\n\nFireMap is a refinement on the typical \"heatmap\" to help better visualize mouse position data through Inverse Distance Weighting. I created a companion website to display various FireMap example outputs along with some additional detail you can check out here: [https://firemap.netlify.com/](https://firemap.netlify.com/)\n\nCompared to [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/?utm_source=gh) and other heatmap libraries there are two major differences. FireMap uses a standardized GIS algorithm compared to heatmap.js and others that use a density equation of some sort? This was the primary reason for creating FireMap since I thought it would be advantageous to employ a deterministic algorithm. Secondly, due to the calculation intensive nature of FireMap it's not intended to be used in real-time, although, it does have said capability.\n\n# Install\n\nYou can install FireMap either through npm:\n\n```bash\n   npm install --save-dev firemap\n```\n\nAlternatively, you can manually download FireMap through the Github repository here: [github.com/artisin/firemap/dist/](https://github.com/artisin/firemap/dist)\n\n\n# Initialize\n\nThe FireMap class instance is exported through: `export default`;\n\n__ECMAScript 6 Module Syntax__\n```js\nimport FireMap from 'firemap';\n```\n\n__CommonJS Syntax__\n```js\nconst FireMap = require('firemap').default;\n```\n\n__Create a New Instance__\n\nFireMap is a Class, and as such, you must initialize it. The FireMap `constructor` accepts an option object argument to set the initial/default options.\n\n```js\n// option-less\nconst firemap = new FireMap();\n\n// options\nconst firemap = new FireMap({\n  // if no canvas element is passed it defauls to the\n  // first getElementsByTagName('canvas')\n  canvas: document.getElementById('my-canvas-element'),\n  // changes sampling DOM area\n  area: 10\n});\n```\n\n## Data Structure\n\nTypically you'll use FireMap in a post-event fashion using tracking data you've collected. However, you can draw a semi-real-time heatmap using the `realTime` method. There are two data types, `dataPoints` (mousemove) and `clickPoints` (pointerdown) that are either passed to the initial Class `constructor` or the `draw` method.\n\n__`dataPoints` → Mouse Position Data__\n\n```js\nfiremap.draw({\n  dataPoints: [{ x: 10, y: 15, value: 5}, ...]\n})\n```\n\n__`clickPoints` → Mouse Click Data__\n\n```js\nfiremap.draw({\n  clickPoints: [{ x: 20, y: 150}, ...]\n})\n```\n\n__Both__\n\n```js\nfiremap.draw({\n  dataPoints: [{ x: 10, y: 15, value: 5}, ...],\n  clickPoints: [{ x: 20, y: 150}, ...]\n})\n```\n\n\n## Class Methods\n\n### Class Instance → `constructor(options = {})`\n\nCreates a `FireMap` instance — many of these options can also be passed to the `draw` method.\n\n+ `options.dataPoints`  = {arr} → user data points for mouse (mousemove) \n+ `options.clickPoints` = {arr} → user data points for clicks (pointerdown)\n+ `options.area`        = {num} → sampling area that clusters all points within its area into a single cluster default is 10 so 10px by 10px sample area\n+ `options.canvas`      = {dom} → canvas dom element to draw map on\n+ `options.cleanEdges`  = {bln} → cleans edges of polygon to remove rough edges to make it look pretty, only used if corners is false\n+ `options.clickColor`  = {str} → color of the click point data stars\n+ `options.clickSize`   = {num} → size of the click point data stars\n+ `options.corners`    = {num}  → creates pseudo data points for corner of the window so heatmap spans the entire screen\n+ `options.height`      = {num} → height of canvas || screen height\n+ `options.hue`         = {num} → color hue for map default is 0.5 green, 0.8 violet, 3.5 rgbiv and no non-point color\n+ `options.interval`    = {num} → interpolation interval of unknown points, the lower the number the more points calculated - computation time increase by O(n2) where n is the number of data points\n+ `options.limit`       = {num} → search neighborhood limit, higher number the smoother blend of map colors - has a minor increase in computation time\n+ `options.maxValue`    = {num} → used for color, and the default is 100, so any value above 100 is going to be the same color\n+ `options.mesh`        = {bln} → to create a mesh-like map rather then a solid map\n+ `options.opacity`     = {num} → opacity of canvus fill\n+ `options.points`      = {bln} → to draw data marker point coordinates\n+ `options.pointSize`   = {num} → font-size of points in px\n+ `options.styles`      = {obj} → custom CSS canvas styles\n+ `options.subscribe`   = {fnc} → a subscribe function that is invoked on the mouse tracking \u0026 click event, passes the event and binded to this\n+ `options.threshold`   = {num} → point label value threshold, if a values does not meet threshold no point label will be generated\n+ `options.throttle`    = {num} → mouse tracker throttle\n+ `options.width`       = {num} → width of canvas, defaults to current screen width\n\n### Draws/create Map → `draw(options = {})`\n\nDraws/creates a heatmap for the canvas element using either passed in `dataPoints` or real-time data points through the invocation of the `draw` method or automatically through the `realTime` method.\n\n__IMPORTANT__: In all likelihood you don’t want data sets of over 1000+ data points because the computation time is O(n2) where n is the number of data points. With 1000-1500 points with an `interval` of `8` it takes 20-40 seconds to compute 1000-1500 data points and if you want a high quality render with an `interval` of `4` there will be two times as many calculations. If you are using FireMap to gather data points you can reduce data points by increasing the `area` (recommended) or increasing the `throttle`.\n\n__Options__\nThese options can also be passed into the initial `constructor`. \n\n+ `options.dataPoints` = {arr} → user data points for mouse (mousemove) \n+ `options.clickPoints`= {arr} → user data points for clicks (pointerdown)\n+ `options.clickSize`  = {num} → size of the click point data stars\n+ `options.clickColor` = {str} → color of the click point data stars\n+ `options.cb`         = {fnc} → Callback function invoked upon completion and binded to instance with the first arg being the canvas context (ctx)\n+ `options.hue`        = {num} → color hue for map default is 0.5 green, 0.8 violet, 3.5 rgbiv and no non-point color\n+ `options.interval`   = {num} → interpolation interval of unknown points, the lower the number the more points calculated - computation time increase by O(n2) where n is the number of data poi\n+ `options.limit`      = {num} → search neighborhood limit, higher num smoother blend of map colors\n+ `options.mesh`       = {bln} → to create a mesh-like map rather then a solid map\n+ `options.opacity`    = {num} → opacity of canvus fill\n+ `options.points`     = {bln} → to draw data marker point coordinates\n+ `options.pointSize`  = {num} → font-size of points\n+ `options.threshold`  = {num} → point values has to be higher than threshold\n\n\n### Get/Format Data → `getData()`\n\nThe `getData` method converts the raw tracking data matrix into valid/formatted tracking data to be used by the `draw` method. However, you'll first need to initialize the tracking feature through the `init` method in order to generate said data to be formatted. The data is returned in an array that consists of objects `{x: \u003cnum\u003e, y: \u003cnum\u003e, value: \u003cnum\u003e}`.\n\n\n### Initialize Mouse \u0026 Click Tracking → `init(subscribe = fnc)`\n\nTo use FireMaps built-in mouse position and click logging feature you need to invoke the `init` method. There're two primary ways to \"log\" this data to send to your server. You can dump the data via the `getData` method either on a leave event or poll event. Or you can subscribe to the raw event data through the `subscribe` function. If you choose the latter, you can pass a `subscribe` function to the `init` method or declare it via the `option` object in the class constructor. The `subscribe` function is binded to the instance so that you can access the internals through `this`. Additionally, the `subscribe` function is passed two arguments, the first is the raw event and the second is the type of event which will be a string of `'mousemove'` or `'pointerdown'`.\n\n\n### Real Time Drawing → `realTime(drawInterval = 10)`\n\nFireMap can also draw in real-time, but unlike [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/?utm_source=gh), FireMap is not intended to draw in real time. The `drawInterval` determines how often the map should re-draw and the default is set at `10`, so that it re-draws every `10` new data points.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffetchte%2Ffiremap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffetchte%2Ffiremap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffetchte%2Ffiremap/lists"}