{"id":13609186,"url":"https://github.com/e-/Multiclass-Density-Maps","last_synced_at":"2025-04-12T20:31:43.675Z","repository":{"id":57148417,"uuid":"122303323","full_name":"e-/Multiclass-Density-Maps","owner":"e-","description":"Multiclass Density Maps, Demo: ","archived":false,"fork":false,"pushed_at":"2020-02-12T01:10:05.000Z","size":89447,"stargazers_count":32,"open_issues_count":2,"forks_count":6,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-04T07:49:17.914Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jaeminjo.github.io/Multiclass-Density-Maps/","language":"TypeScript","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/e-.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-02-21T07:07:34.000Z","updated_at":"2023-08-28T03:59:44.000Z","dependencies_parsed_at":"2022-08-31T21:45:01.787Z","dependency_job_id":null,"html_url":"https://github.com/e-/Multiclass-Density-Maps","commit_stats":null,"previous_names":["e-/multiclassplots"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-%2FMulticlass-Density-Maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-%2FMulticlass-Density-Maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-%2FMulticlass-Density-Maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/e-%2FMulticlass-Density-Maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/e-","download_url":"https://codeload.github.com/e-/Multiclass-Density-Maps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248629582,"owners_count":21136276,"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-08-01T19:01:33.142Z","updated_at":"2025-04-12T20:31:38.666Z","avatar_url":"https://github.com/e-.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Multiclass Density Maps\n\n![teaser](https://raw.githubusercontent.com/e-/Multiclass-Density-Maps/master/teaser.png?raw=true)\n\n## What is This?\n\n\u003cimg src=\"https://github.com/e-/Multiclass-Density-Maps/blob/master/motivation.png?raw=true\" height=\"200\"\u003e\n\n\nDensity maps (also known as density plots, binned scatterplots, and heatmaps) are our best friend to scale scatterplots. However, it is nontrivial to visualize multiclass data on density maps. Actually, various designs have been used (see the picture above). In this work, we unified those various designs into a single model, *the Class Buffer Model*.\n\n## Interactive Demos\n\n- [A gallery of examples](https://jaeminjo.github.io/Multiclass-Density-Maps/) (this repo)\n- [An online editor](https://jaeminjo.github.io/Multiclass-Density-Map-Editor/) ([repo](https://github.com/e-/Multiclass-Density-Map-Editor))\n\n## Reference\n\nJ. Jo, F. Vernier, P. Dragicevic and J. Fekete, \"A Declarative Rendering Model for Multiclass Density Maps,\" in IEEE Transactions on Visualization and Computer Graphics. doi: 10.1109/TVCG.2018.2865141 [pdf (hal)](https://hal.inria.fr/hal-01848427/file/Multiclass_Density_Maps.pdf)\n\n## Integration with Your Code\n\nInstall via npm:\n\n```bash\nnpm install multiclass-density-maps --save\n```\n\nand import it in your code:\n\n```ts\nimport * as MDM from 'multiclass-density-maps';\n```\n\nParse and render a specification:\n\n```ts\nlet spec = // enter your JSON speficiation here.\n\nlet config = new MDM.Config(spec); // parse the specification\n\nconfig.load().then(() =\u003e { // load the data\n    let interp = new MDM.Interpreter(config); // create an interpreter\n\n    interp.interpret(); // interpret the specification\n\n    interp.render(document.getElementsByTagName('div')[0]); // render it to a div element.\n})\n```\n\nSee our wiki! \u003chttps://github.com/e-/Multiclass-Density-Maps/wiki\u003e\n\n## Development\n\nInstall NodeJS and NPM from https://nodejs.org/en/download/\n\nClone the repo:\n\n```bash\ngit clone https://github.com/e-/Multiclass-Density-Maps.git\ncd Multiclass-Density-Maps\n```\n\nInstall the dependencies:\n\n```bash\nnpm install\n```\n\nStart the dev server:\n\n```bash\nnpm start\n```\n\nOpen the address that the server gives and navigate to `index.html`.\n\n## FAQ\n\n1) Problems when installing `topojson`: Try `npm install topojson --no-bin-links`.\n\n2) How can I use my own data?: Here are some examples using different data sources: [https://github.com/e-/Multiclass-Density-Maps/tree/master/data](https://github.com/e-/Multiclass-Density-Maps/tree/master/data)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fe-%2FMulticlass-Density-Maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fe-%2FMulticlass-Density-Maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fe-%2FMulticlass-Density-Maps/lists"}