{"id":13481172,"url":"https://github.com/d3plus/d3plus","last_synced_at":"2026-04-09T03:32:13.841Z","repository":{"id":6278232,"uuid":"7512098","full_name":"d3plus/d3plus","owner":"d3plus","description":"A javascript library that extends D3.js to enable fast and beautiful visualizations.","archived":false,"fork":false,"pushed_at":"2025-04-02T20:59:46.000Z","size":40475,"stargazers_count":1620,"open_issues_count":275,"forks_count":187,"subscribers_count":80,"default_branch":"main","last_synced_at":"2025-05-09T06:01:52.484Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","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/d3plus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2013-01-09T00:26:58.000Z","updated_at":"2025-04-30T23:18:48.000Z","dependencies_parsed_at":"2023-02-14T10:20:55.011Z","dependency_job_id":"8f9d2c12-cc90-477e-ae81-4f384b82b05b","html_url":"https://github.com/d3plus/d3plus","commit_stats":{"total_commits":2671,"total_committers":23,"mean_commits":116.1304347826087,"dds":"0.15911643579183832","last_synced_commit":"b2c16bdca96365ce8b3f4d08d126d15a4f886be2"},"previous_names":["alexandersimoes/d3plus"],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3plus%2Fd3plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3plus%2Fd3plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3plus%2Fd3plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3plus%2Fd3plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d3plus","download_url":"https://codeload.github.com/d3plus/d3plus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254027934,"owners_count":22002140,"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-07-31T17:00:49.355Z","updated_at":"2026-04-09T03:32:13.834Z","avatar_url":"https://github.com/d3plus.png","language":"HTML","readme":"# d3plus\n\nD3plus is an open-source visualization library, written in JavaScript, that streamlines the creation of SVG data visualizations. After providing a configuration object that details the specifics of the data at hand, D3plus will create a visualization that includes all of the repeatable, generic things out of the box, such as setting up tooltips, color assignments, and label placements. Full documentation and examples can be found on [d3plus.org](https://d3plus.org/).\n\n## ES Modules\n\nUnder the hood, D3plus is broken out into multiple packages based on the functionality offered by the exported code. These packages include:\n\n* [@d3plus/react](https://www.npmjs.com/package/@d3plus/react)\n* [@d3plus/core](https://www.npmjs.com/package/@d3plus/core)\n* [@d3plus/color](https://www.npmjs.com/package/@d3plus/color)\n* [@d3plus/data](https://www.npmjs.com/package/@d3plus/data)\n* [@d3plus/dom](https://www.npmjs.com/package/@d3plus/dom)\n* [@d3plus/export](https://www.npmjs.com/package/@d3plus/export)\n* [@d3plus/format](https://www.npmjs.com/package/@d3plus/format)\n* [@d3plus/locales](https://www.npmjs.com/package/@d3plus/locales)\n* [@d3plus/math](https://www.npmjs.com/package/@d3plus/math)\n* [@d3plus/text](https://www.npmjs.com/package/@d3plus/text)\n\nFor example, if you are interested in using the `formatAbbreviate` function used internally for prettifying numbers:\n\n```sh\nnpm install @d3plus/format\n```\n\nYou can then import named functions and classes as ES modules:\n\n```js\nimport {formatAbbreviate} from \"@d3plus/format\";\n```\n\n## React Components\n\nWhile the underlying library is written in JavaScript, we supply a wrapper package for rendering charts and components in a React environment:\n\n```sh\nnpm install @d3plus/react\n```\n\nAn _Object_ containing configuration information about the data and visual representation at hand then needs to be passed to the `config` prop of every visualization. The options available in this configuration _Object_ vary by visualization type, and the most commonly used methods are shown in the examples on this site. Full documentation of all available methods is available in each packages README file.\n\n```jsx\nimport {Treemap} from \"@d3plus/react\";\n\nconst methods = {\n  data: [\n    {id: \"alpha\", value: 29},\n    {id: \"beta\",  value: 10}\n  ],\n  groupBy: \"id\",\n  size: \"value\"\n};\n\n\u003cTreemap config={methods} /\u003e\n```\n\nAdditionally, a global set of styles can be set using the `D3plusContext` Provider. This allows you to set base styles on all of your visualizations in one place, often in an external file. A component's `config` set by props will override global defaults key-by-key using a deep cloning function.\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport {D3plusContext} from \"@d3plus/react\";\nimport App from \"src/App.jsx\";\n\nconst globalConfig = {\n  title: \"Shared Title for All Visualizations\"\n};\n\nReactDOM.createRoot(document.getElementById(\"viz\")).render(\n  \u003cReact.StrictMode\u003e\n    \u003cD3plusContext.Provider value={globalConfig}\u003e\n      \u003cApp /\u003e\n    \u003c/D3plusContext.Provider\u003e\n  \u003c/React.StrictMode\u003e\n);\n```\n\n## Script Tags\n\nAdditionally, each module is available from a CDN for vanilla JavaScript environments (bundled with all dependencies):\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@d3plus/core\"\u003e\u003c/script\u003e\n```\n\nA global `d3plus` object is exported, which contains all of the available methods and classes:\n\n```html\n\u003cscript\u003e\n  new d3plus.Treemap()\n    .config({\n      data: [\n        {id: \"alpha\", value: 29},\n        {id: \"beta\",  value: 10}\n      ],\n      groupBy: \"id\",\n      size: \"value\"\n    })\n    .render();\n\u003c/script\u003e\n```\n","funding_links":[],"categories":["Charts","JavaScript","📊 Data \u0026 Analytics"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd3plus%2Fd3plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd3plus%2Fd3plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd3plus%2Fd3plus/lists"}