{"id":40484794,"url":"https://github.com/nconrad/hotmap","last_synced_at":"2026-01-20T18:42:59.016Z","repository":{"id":39551580,"uuid":"162336667","full_name":"nconrad/hotmap","owner":"nconrad","description":"WebGL Heatmap Viewer for Big Data and Bioinformatics","archived":false,"fork":false,"pushed_at":"2023-01-14T00:36:52.000Z","size":16379,"stargazers_count":13,"open_issues_count":20,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T23:26:49.597Z","etag":null,"topics":["big-data","bioinformatics","charts","data-analysis","data-visualization","dataviz","heatmap","pixijs","webgl"],"latest_commit_sha":null,"homepage":"https://nconrad.github.io/hotmap/demo/","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/nconrad.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":"2018-12-18T19:34:32.000Z","updated_at":"2022-04-14T14:50:07.000Z","dependencies_parsed_at":"2023-02-09T18:16:35.431Z","dependency_job_id":null,"html_url":"https://github.com/nconrad/hotmap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nconrad/hotmap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nconrad%2Fhotmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nconrad%2Fhotmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nconrad%2Fhotmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nconrad%2Fhotmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nconrad","download_url":"https://codeload.github.com/nconrad/hotmap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nconrad%2Fhotmap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28609155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T16:10:39.856Z","status":"ssl_error","status_checked_at":"2026-01-20T16:10:39.493Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["big-data","bioinformatics","charts","data-analysis","data-visualization","dataviz","heatmap","pixijs","webgl"],"created_at":"2026-01-20T18:42:58.203Z","updated_at":"2026-01-20T18:42:59.003Z","avatar_url":"https://github.com/nconrad.png","language":"JavaScript","readme":"# Hotmap\n\n\u003cimg src=\"demo/logo.png\" width=\"400\"\u003e\n\n\nA WebGL Heatmap Viewer for Bioinformatics and Big Data, written in vanilla JS and built with [pixi.js](http://www.pixijs.com/).\n\n[demo](https://nconrad.github.io/hotmap/demo/)\n\n\n## Some Features\n\n- panning, scaling, zoom, and resizing\n- drag and drop rows/columns\n- SVG download\n- various color/binning options [to be extended]\n- search\n- cell/row/column selection\n- meta/categorical data display\n- update API\n- flip axes\n- customizable tooltips\n- fullscreen button\n\n\n\n## Why?\n\nI wanted to create a heatmap viewer that is easy to use and scales to millions of cells.\n\n\n## Prototype Usage\n\n#### Global\n\nAdd the required CSS/JS:\n\n```\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"dist/hotmap.css\"\u003e\n\u003cscript src=\"dist/hotmap.js\"\u003e\u003c/script\u003e\n```\n\n#### ES6\n\nAdd required CSS, and import JS:\n\n```\n\u003clink href=\"dist/hotmap.css\" rel=\"stylesheet\" type=\"text/css\"\u003e\n```\n\n```\nimport Hotmap from 'dist/hotmap';\n```\n\n#### AMD\n\nAdd required required CSS, and require:\n\n```\n\u003clink href=\"dist/hotmap.css\" rel=\"stylesheet\" type=\"text/css\"\u003e\n```\n\n```javascript\nrequirejs.config({\n    baseUrl: 'dist',\n});\n\nrequirejs(['hotmap'], function(Hotmap) {\n    ...\n})\n```\n\n### Basic Example Config\n\n```javascript\n    let hotmap = new Hotmap({\n        ele: document.getElementById('hotmap'),\n        rows: [{...}],\n        cols: [{...}],\n        matrix: [[1, 2, 3], [2, 5.3, 0], ...],\n        // note the following configs are optional\n        color: {\n            bins: ['=0', '=1', '=2', '\u003c20', '\u003e=20'],\n            colors: [0xffffff, 0xfbe6e2, 0xffadad, 0xff6b6b, 0xff0000]\n        },\n        onHover: info =\u003e `\u003cdiv\u003e\u003cb\u003eGenome:\u003c/b\u003e ${info.yLabel}\u003c/div\u003e`\n    })\n```\n\n### Config\n\n| Param                 | Type                              | Required? | Default                       |\n|-----------------------|-----------------------------------|-----------|-------------------------------|\n| [rows](#rows)         | list of `row` objects (see below) | \u0026check;   | -                             |\n| [cols](#cols)         | list of `col` objects (see below) | \u0026check;   | -                             |\n| matrix                | matrix of numbers                 | \u0026check;   | -                             |\n| rowsLabel             | string                            | -         | 'Rows'                        |\n| colsLabel             | string                            | -         | 'Columns'                     |\n| rowMetaLabels         | list of strings                   | -         | []                            |\n| colMetaLabels         | list of strings                   | -         | []                            |\n| color                 | string \\|\\| object                | -         | 'gradient'                    |\n| [defaults](#defaults) | Object                            | -         | computed based on window size |\n| [options](#options)   | Object                            | -         | -                             |\n\n\n### Event Callbacks\n\n| Param       | Type                  | Required? | Default                                                     |\n|-------------|-----------------------|-----------|-------------------------------------------------------------|\n| onHover     | function(Object) {}   | -         | Displays row, column, and matrix value in tooltip on hover. |\n| onSelection | function([Object]) {} | -         | -                                                           |\n| onClick     | function(Object) {}   | -         | -                                                           |\n\n### API Methods\n\n| Method      | Definition                                      | Description                                                |\n|-------------|-------------------------------------------------|------------------------------------------------------------|\n| update      | update({rows, cols, matrix})                    | Given object with rows, columns, and matrix, updates chart |\n| getState    | getState()                                      | Returns current rows, columns and matrix                   |\n| flipAxis    | flipAxis()                                      | Swaps rows, cols, labels, and scaling                      |\n| downloadSVG | downloadSVG({fileName = 'hotmap.svg', full: false}) | Downloads chart as SVG.  \"full\" will include all data.     |\n\n\n\n##### rows\n```javascript\n[\n    {\n        name: 'some label',\n        meta: ['cat 1', 'some meta info']\n    },\n    ...\n]\n```\n\n##### cols\n```javascript\n[\n    {\n        name: 'some label',\n        meta: ['cat foo', 'cat bar']\n    },\n    ...\n]\n```\n\n##### defaults\n```javascript\n{\n    cellWidth: \u003cinitial_width_of_cell_(integer)\u003e,\n    cellHeight: \u003cinitial_height_of_cell_(integer)\u003e\n}\n```\n\n##### options\n```javascript\n{\n    maxFontSize: \u003cint\u003e          // in pixels\n    hideLegend: false,\n    legend: \u003csome_html\u003e,\n    hideOptions: false,\n    theme: 'dark' | 'light',\n    showVersion: false,         // shows version top-right\n    maxFontSize: \u003cint\u003e,         // in pixels\n    waitForFont: false,         // useful if custom fonts are used\n    rowLabelEllipsisPos: \u003cint\u003e, // position to places ellipsis (0-indexed)\n    colLabelEllipsisPos: \u003cint\u003e\n}\n```\n\n\n## Development\n\n### Local Installation\n\n```\nnpm install\n```\n\n\n### Development\n\n```\nnpm start\n```\n\n\n### Build\n\n```\nnpm run build\n```\n\n\n## Author(s)\n\n[nconrad](https://github.com/nconrad)\n\n\n## Citation\n\nPlease cite this repo in the meantime:\n\nN. Conrad, A WebGL Heatmap Viewer for Bioinformatics and Big Data, (2019), GitHub repository, https://github.com/nconrad/hotmap\n\n\n## License\n\nReleased under [the MIT license](https://github.com/nconrad/hotmap/blob/master/LICENSE).\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnconrad%2Fhotmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnconrad%2Fhotmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnconrad%2Fhotmap/lists"}