{"id":20420416,"url":"https://github.com/nswamy14/visual-heatmap","last_synced_at":"2025-04-08T04:19:56.553Z","repository":{"id":47966772,"uuid":"194242042","full_name":"nswamy14/visual-heatmap","owner":"nswamy14","description":"Heatmap : Open source javascript module for high performance, large scale heatmap rendering.","archived":false,"fork":false,"pushed_at":"2024-09-25T18:31:43.000Z","size":4167,"stargazers_count":69,"open_issues_count":4,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T18:11:22.132Z","etag":null,"topics":["datavisualisation","heat-maps","heatmap","heatmap-visualization","javascipt","typescipt","visual-heatmap","visualheatmap","visualisation","visualizations","webgl-library"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nswamy14.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-28T08:59:59.000Z","updated_at":"2025-03-20T07:08:04.000Z","dependencies_parsed_at":"2024-06-01T19:52:52.756Z","dependency_job_id":"0d7bd30f-ada6-40de-975d-0a92e7cf587b","html_url":"https://github.com/nswamy14/visual-heatmap","commit_stats":{"total_commits":87,"total_committers":5,"mean_commits":17.4,"dds":"0.10344827586206895","last_synced_commit":"c4626bd82e66e7703adb3dc324608901c317d921"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nswamy14%2Fvisual-heatmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nswamy14%2Fvisual-heatmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nswamy14%2Fvisual-heatmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nswamy14%2Fvisual-heatmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nswamy14","download_url":"https://codeload.github.com/nswamy14/visual-heatmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773878,"owners_count":20993658,"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":["datavisualisation","heat-maps","heatmap","heatmap-visualization","javascipt","typescipt","visual-heatmap","visualheatmap","visualisation","visualizations","webgl-library"],"created_at":"2024-11-15T06:42:54.624Z","updated_at":"2025-04-08T04:19:56.515Z","avatar_url":"https://github.com/nswamy14.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Visual-Heatmap Js [![npm](https://img.shields.io/npm/v/visual-heatmap.svg)](https://www.npmjs.com/package/visual-heatmap) [![Downloads](https://img.shields.io/npm/dm/visual-heatmap.svg)](https://www.npmjs.com/package/visual-heatmap)\nVisual Heatmap, an open-source JavaScript module, emerges as a powerful tool designed to render large-scale heatmaps with exceptional performance. This framework is based on advanced graphical rendering - WebGL/Shaders. It can render 500,000+ data points with a good framerate.\n\n### Examples:\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html\"\u003e \u003clabel\u003eClick\u003clabel\u003e\u003cimg src=\"https://nswamy14.github.io/visual-heatmap/snaps/snap3.png\" width=1200\u003e \u003c/a\u003e\n\u003ca href=\"https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html\"\u003e \u003clabel\u003eClick\u003clabel\u003e\u003cimg src=\"https://nswamy14.github.io/visual-heatmap/snaps/snap1.png\" width=1200\u003e\u003c/a\u003e\n\u003ca href=\"https://nswamy14.github.io/visual-heatmap/demo/heatmap2.html\"\u003e \u003clabel\u003eClick\u003clabel\u003e\u003cimg src=\"https://nswamy14.github.io/visual-heatmap/snaps/snap2.png\" width=1200\u003e \u003c/a\u003e\n\u003ca href=\"https://nswamy14.github.io/visual-heatmap/demo/heatmapWithLabels.html\"\u003e \u003clabel\u003eClick\u003clabel\u003e\u003cimg src=\"https://nswamy14.github.io/visual-heatmap/snaps/snap4.png\" width=1200\u003e \u003c/a\u003e\n\u003c/p\u003e\n\n# Installing\n\nnpm\n```\nnpm i visual-heatmap --save\n```\nOr Download the source code from the below links\n\n* [visualHeatmap.min.js](https://raw.githubusercontent.com/nswamy14/visual-heatmap/master/dist/visualHeatmap.min.js)\n* [visualHeatmap.js](https://raw.githubusercontent.com/nswamy14/visual-heatmap/master/dist/visualHeatmap.js)\n* [visualHeatmap.esm.js](https://raw.githubusercontent.com/nswamy14/visual-heatmap/master/dist/visualHeatmap.esm.js)\n\n\n# Usage\n\n### Importing\nVisual-Heatmap offers both ES6 and UMD modules, making it possible to integrate the module into applications as needed.\n\n```\nimport Heatmap from 'visual-heatmap'\n```\n\n### Instance Creation API\nvisualHeatmap provides an API to create heatmap instances. API accepts container/containerId and config as an input. A context element will be created under the provided Div #containerId.\n```Javascript\nlet instance = Heatmap('#containerId', {\n        size: 30.0,  //Radius of the data point, in pixels. Default: 20\n        max: 100,  // if not set, will be derived from data\n        min: 0,  // if not set, will be derived from data\n        intensity: 1.0, \n        backgroundImage: {\n            url: \"urlPath\",  // image url\n            width: 100, // if not set, viewport width of the image will be considered\n            height: 100, // if not set, viewport height of the image will be considered\n            x: 0,\n            y: 0\n        },\n        gradient: [{\n            color: [0, 0, 255, 1.0],\n            offset: 0\n        }, {\n            color: [0, 0, 255, 1.0],\n            offset: 0.2\n        }, {\n            color: [0, 255, 0, 1.0],\n            offset: 0.45\n        }, {\n            color: [255, 255, 0, 1.0],\n            offset: 0.85\n        }, {\n            color: [255, 0, 0, 1.0],\n            offset: 1.0\n        }]\n    });\n```\n**Container/ContainerId** : The container div element or a string CSS Query selector that identifies the container.\n\n**Config Object** :\n```\n{\n     size : Radius of the data point, in pixels. Default: 20\n     max : Max data Value for relative gradient computation. if not set, will be derived from data.\n     min : Min data Value for relative gradient computation. if not set, will be derived from data.\n     intensity : intensity factor. Default: 1.0\n     opacity : Opacity factor. Default: 1.0\n     rotationAngle : Rotation angle. Default: 0\n     translate : translate vector [x, y]. Default: [0,0]\n     zoom : Zoom Factor. Default: 1.0\n     gradient : Color Gradient, an array of objects with color value and offset.\n     backgroundImage: To set the background for the heatMap. Value : { url: , x: , y: , height: , width: }\n}\n```\n\n## Adding Data API\n\n### instance.renderData([])\nAccepts an array of data points with 'x', 'y' and 'value'.  [Demo](https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html)\n```Javascript\ninstance.renderData([{x: , y: , value: }])\n```\n\n### instance.addData([], transformationIntactflag);\nAccepts an array of data points with 'x', 'y', and 'value' and a boolean flag to specify to apply existing heatmap transformations on the newly added data points. After adding data points, need to invoke the `.render()` method to update the heatmap.\nTry [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)\n```Javascript\ninstance.addData([{x: , y: , value: }],transformationIntactflag)\n```\n\n## Render API\nMethod to re-render the heatmap. This method needs to be invoked as and when configurations get changed. [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html)\n```Javascript\ninstance.render()\n```\n\n## Configuration Setting API\n\n### instance.setMax(number)\nTo set max data value, for relative gradient calculations.\n\n### instance.setMin(number)\nTo set min data value, for relative gradient calculations.\n\n### instance.setTranslate([number, number])\nApi to perform translate transformation on the canvas. Accepts array[x, y] as an input.\nTry [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)\n\n### instance.setZoom(number)\nApi to perform zoom transformation on the canvas. Accepts float value as an input.\nTry [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)\n\n### instance.setRotationAngle(number)\nApi to perform rotation transformation on the canvas. Accepts angle in radians.\nTry [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)\n\n### instance.setSize(number)\nApi to set point radius. Accepts float value as an input.\nTry [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)\n\n### instance.setGradient(gradient)\nApi to set color gradient. Accepts array of objects with color value and offset.\n\n### instance.setIntensity(number)\nApi to set the Intensity factor. Accepts float value as an input.\nTry [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)\n\n### instance.setOpacity(number)\nApi to set Opacity factor. Accepts float value as an input.\nTry [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)\n\n### instance.setBackgroundImage({ url: , x: , y: , height: , width: })\nApi to set Background image. Accepts Object with { Url, height, width, x, and y} properties as input\nTry [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)\n\n### instance.projection({x: , y: })\nApi to get projected co-ordinates relative to the heatmap layer.\nTry [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmapWithLabels.html)\n\n### instance.resize()\nApi to rerender heatmap on parent container resizes.\n\n### instance.clear()\nApi to clear canvas.\n\n\n## ⭐️ Show Your Support\n\nPlease give a ⭐️ if this project helped you!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnswamy14%2Fvisual-heatmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnswamy14%2Fvisual-heatmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnswamy14%2Fvisual-heatmap/lists"}