{"id":22582628,"url":"https://github.com/quazardous/activity-heatmap","last_synced_at":"2025-04-10T19:25:09.839Z","repository":{"id":62532039,"uuid":"260832792","full_name":"quazardous/activity-heatmap","owner":"quazardous","description":"A(nother) d3 heatmap for representing time series data similar to github's contribution chart","archived":false,"fork":false,"pushed_at":"2020-05-06T15:00:42.000Z","size":84,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T17:01:49.844Z","etag":null,"topics":["d3js","d3v5","data-visualization","heatmap","javascript","js"],"latest_commit_sha":null,"homepage":null,"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/quazardous.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-03T05:11:38.000Z","updated_at":"2024-12-22T10:07:35.000Z","dependencies_parsed_at":"2022-11-02T14:45:34.820Z","dependency_job_id":null,"html_url":"https://github.com/quazardous/activity-heatmap","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quazardous%2Factivity-heatmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quazardous%2Factivity-heatmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quazardous%2Factivity-heatmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quazardous%2Factivity-heatmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quazardous","download_url":"https://codeload.github.com/quazardous/activity-heatmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248281388,"owners_count":21077423,"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":["d3js","d3v5","data-visualization","heatmap","javascript","js"],"created_at":"2024-12-08T06:11:54.571Z","updated_at":"2025-04-10T19:25:09.819Z","avatar_url":"https://github.com/quazardous.png","language":"JavaScript","readme":"# Activity heatmap\n\nA(nother) [d3.js](https://d3js.org/) heatmap representing time series data. Inspired by Github's contribution chart\n\nInspired by the excellent [DKirwan's Calendar Heatmap](https://github.com/DKirwan/calendar-heatmap).\n\nReworked for [d3.js](https://d3js.org/) v5 + ES6 class style.\n\n## Screenshot\n\nYearly profile.\n\n![Reusable D3.js Calendar Heatmap chart](yearly.png)\n\nMonthly profile.\n\n![Reusable D3.js Calendar Heatmap chart](monthly.png)\n\n## Features \u0026 specs\n\n* Heatmap\n* Histogram\n* Labels and scales\n* Free time granularity\n* Clean coding... (well tell me)\n* Easy to tweak with options and profiles\n* Fully localizable (uses only `moment.format()`)\n  \n\n## Dependencies\n\n* [d3.js](https://d3js.org/) v5\n* [moment.js](http://momentjs.com/)\n\n## Usage\n\n1. Add `d3.js` and `moment.js`\n\n2. Include `activity-heatmap.js`\n`\u003cscript src=\"path/to/activity-heatmap.js\"\u003e\u003c/script\u003e` or `\u003cscript src=\"path/to/activity-heatmap.min.js\"\u003e\u003c/script\u003e`\n\n3. Add style stuff for tooltips\n\n```CSS\n.heatmap-tooltip {\n  position: absolute;\n  z-index: 9999;\n  padding: 5px 9px;\n  color: #bbbbbb;\n  font-size: 12px;\n  background: rgba(0, 0, 0, 0.85);\n  border-radius: 3px;\n  text-align: center;\n}\n```\n\n4. Add some container\n`\u003cdiv id=\"my-heatmap\"\u003e\u003c/div\u003e`\n\n5. Create the heatmap with some data\n\n```js\n  d3.json(\"url/to/my-data.json\").then(function(data) {\n    // do your AJAX stuff here\n    data.forEach(function(d) {\n      // final data items should have at least a JS Date date...\n      d.date = new Date(d.timestamp);\n      // ...and a Number value.\n      d.value = +d.value;\n    });\n\n    const map = new ActivityHeatmap(data, 'yearly', '#my-heatmap');\n    map.render();\n  });\n```\n\n## Options\n\nThe second arg is a profile hint that will tweak options. You can override the tweaked options after instantiation.\n\nThe third arg can be an extensive options object.\n\n```js\nconst options = {\n  selector: '#my-heatmap'\n};\nconst map = new ActivityHeatmap(data, 'yearly', options);\nmap.options.period.from = new Date('2020-01-01');\n```\n\nFinal computations will be done at render time.\n\nHere is some common options:\n\n```js\nconst options = {\n  debug: false,\n  selector: \"#monthly\",\n  legend: true,\n  histogram: true,\n  frame: true,\n  colors: {\n    separator: \"#AAAAAA\",\n    frame: \"#AAAAAA\",\n    scale: [\"#D8E6E7\", \"#218380\"]\n  }\n};\n```\n\n## Inline render()\n\n`render()` can be use without arguments or you can pass your own `SVG` object.\n\n```js\n...\nconst heatmap = map.render(mySvg, 100, 50);\n...\n```\n\nIt returns a SVG group with the whole heatmap.\n\n## Example\n\nOpen `examples/ex1.html`.\n\nNB: if you open `ex1.html` as local file, you may need to bypass `CORS` (With FF: `about:config` \u003e `privacy.file_unique_origin` =\u003e **false**).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquazardous%2Factivity-heatmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquazardous%2Factivity-heatmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquazardous%2Factivity-heatmap/lists"}