{"id":13426092,"url":"https://github.com/susielu/d3-legend","last_synced_at":"2025-05-15T03:06:05.242Z","repository":{"id":33574058,"uuid":"37220403","full_name":"susielu/d3-legend","owner":"susielu","description":"A reusable d3 legend component. ","archived":false,"fork":false,"pushed_at":"2024-07-22T21:03:02.000Z","size":2457,"stargazers_count":725,"open_issues_count":14,"forks_count":104,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-14T02:21:52.239Z","etag":null,"topics":["d3","d3-legend","d3-module","legend"],"latest_commit_sha":null,"homepage":"http://d3-legend.susielu.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/susielu.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":"2015-06-10T20:19:36.000Z","updated_at":"2025-03-03T20:47:33.000Z","dependencies_parsed_at":"2024-10-25T09:25:14.284Z","dependency_job_id":null,"html_url":"https://github.com/susielu/d3-legend","commit_stats":{"total_commits":156,"total_committers":21,"mean_commits":7.428571428571429,"dds":0.2948717948717948,"last_synced_commit":"74043086842cf3edeb52ce6ca7be5f26e3d1d6f4"},"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susielu%2Fd3-legend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susielu%2Fd3-legend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susielu%2Fd3-legend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susielu%2Fd3-legend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/susielu","download_url":"https://codeload.github.com/susielu/d3-legend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264765,"owners_count":22041793,"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":["d3","d3-legend","d3-module","legend"],"created_at":"2024-07-31T00:01:26.155Z","updated_at":"2025-05-15T03:06:05.215Z","avatar_url":"https://github.com/susielu.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Utils"],"sub_categories":[],"readme":"# d3-legend\n\nFull documentation: [http://d3-legend.susielu.com](http://d3-legend.susielu.com)\n\n## Looking for compatibility with d3 v3?\n\n- You can see the code for the d3 legend that works with d3 v3 in the [v3 branch](https://github.com/susielu/d3-legend/tree/v3)\n- [Documentation](http://d3-legend-v3.susielu.com) for the v3 version of the legend\n\n## d3-legend v4 updates (npm version 2.0.0 and higher)\n\n- Flattened naming for accessing functions\n  - d3.legend.color =\u003e d3.legendColor\n  - d3.legend.size =\u003e d3.legendSize\n  - d3.legend.symbol =\u003e d3.legendSymbol\n- NPM package no longer binds to global d3, is now just an object with the three legend functions\n\n## Usage\n\n### Using just the minified file\n\nYou must include the [d3 library](http://d3js.org/) before including the legend file. Then you can simply add the compiled js file to your website:\n\n- d3-legend.min.js\n- d3-legend.js (Human readable version)\n\n### Using CDN\n\nYou can also add the latest version of [d3-legend hosted on cdnjs](https://cdnjs.com/libraries/d3-legend).\n\n### Using npm\n\nYou can add the d3 legend as a node module by running:\n\n`npm i d3-svg-legend -S`\n\nTo use the version compatible with d3v3 run:\n`npm i d3-svg-legend@1.x -S`\n\nUsing the import syntax `import legend from 'd3-svg-legend'` gives access to the three legend types as an object. You can also import them independently for example `import { legendColor } from 'd3-svg-legend'`\n\n```\nvar svg = d3.select(\"#svg-color-quant\");\n\nvar quantize = d3.scaleQuantize()\n    .domain([ 0, 0.15 ])\n    .range(d3.range(9).map(function(i) { return \"q\" + i + \"-9\"; }));\n\nsvg.append(\"g\")\n  .attr(\"class\", \"legendQuant\")\n  .attr(\"transform\", \"translate(20,20)\");\n\nvar colorLegend = d3.legendColor()\n    .labelFormat(d3.format(\".2f\"))\n    .useClass(true)\n    .scale(quantize);\n\nsvg.select(\".legendQuant\")\n  .call(colorLegend);\n\n```\n\n## Local development\n\nThis project uses npm and grunt, you will also need to run `npm install -g grunt-cli` for the scripts and watch commands to work.\n\n## Feedback\n\nThis library is in maintence mode, and I do not plan on adding any additional features.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsusielu%2Fd3-legend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsusielu%2Fd3-legend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsusielu%2Fd3-legend/lists"}