{"id":13481186,"url":"https://github.com/heavysixer/d4","last_synced_at":"2025-10-22T19:53:52.521Z","repository":{"id":13594665,"uuid":"16287509","full_name":"heavysixer/d4","owner":"heavysixer","description":"A friendly reusable charts DSL for D3","archived":false,"fork":false,"pushed_at":"2020-04-11T20:53:40.000Z","size":2573,"stargazers_count":433,"open_issues_count":18,"forks_count":42,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-08-27T22:22:40.178Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/heavysixer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-27T18:04:54.000Z","updated_at":"2025-04-09T14:47:35.000Z","dependencies_parsed_at":"2022-08-30T16:11:40.221Z","dependency_job_id":null,"html_url":"https://github.com/heavysixer/d4","commit_stats":null,"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"purl":"pkg:github/heavysixer/d4","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heavysixer%2Fd4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heavysixer%2Fd4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heavysixer%2Fd4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heavysixer%2Fd4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heavysixer","download_url":"https://codeload.github.com/heavysixer/d4/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heavysixer%2Fd4/sbom","scorecard":{"id":459281,"data":{"date":"2025-08-11","repo":{"name":"github.com/heavysixer/d4","commit":"04b8a71c8ddf99277ce6b07a5e0b3e81bfd1a899"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":1,"reason":"Found 4/24 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE-MIT:0","Info: FSF or OSI recognized license: MIT License: LICENSE-MIT:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 10 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-19T10:40:10.177Z","repository_id":13594665,"created_at":"2025-08-19T10:40:10.177Z","updated_at":"2025-08-19T10:40:10.177Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280503193,"owners_count":26341693,"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","status":"online","status_checked_at":"2025-10-22T02:00:06.515Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-07-31T17:00:49.512Z","updated_at":"2025-10-22T19:53:52.476Z","avatar_url":"https://github.com/heavysixer.png","language":"JavaScript","funding_links":[],"categories":["Data Visualization","JavaScript","Charts","Data Visualization [🔝](#readme)","数据可视化"],"sub_categories":["Runner","运行器","运行器e2e测试"],"readme":"## D4\n\nD4 is a friendly charting DSL for D3. The goal of D4 is to allow developers\nto quickly build data-driven charts with little knowledge of the internals of D3.\n\n### Quick Start\n* * *\n\nFor the bleeding edge version of d4 download it directly from the [github](https://github.com/heavysixer/d4) repository. If you prefer a more stable release you can install the latest released tag using a package manager like bower.\n\n    $ bower install d4\n    or\n    $ npm install d4\n\nOnce you have a local copy of d4 simply include it **after** d3 in your source file.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003c!-- sensible defaults for styles --\u003e\n  \u003clink href=\"d4.css\" rel=\"stylesheet\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  ...\n\u003cscript src=\"d3.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"d4.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n##### Hello World\nHere is the most basic example, which uses many of the preset defaults provided by d4.\n\n```javascript\nvar data = [\n  { x : '2010', y : 5 },\n  { x : '2011', y : 15 },\n  { x : '2012', y : 20 }\n];\nvar columnChart = d4.charts.column();\n\nd3.select('someDomElement')\n  .datum(data)\n  .call(columnChart);\n```\n##### Getting Fancy\nd4 allows you to quickly build up sophisticated charts using a declarative and highly contextual API that allows you to mixin\nor mixout features from your chart.\n\n```javascript\nvar data = [\n  { x : '2010', y : 5 },\n  { x : '2011', y : 15 },\n  { x : '2012', y : 20 }\n];\n\n// Create a column chart without a yAxis, but with a grid in the background.\nvar columnChart = d4.charts.column()\n.mixout('yAxis')\n.mixin({ 'name' : 'grid', 'feature' : d4.features.grid, 'index' : 0 })\n\nd3.select('someDomElement')\n  .datum(data)\n  .call(columnChart);\n```\n\n##### Additional Examples\n\nThere are **many** more examples of d4 in the examples site inside the source code repository. Simply clone the repo and\nopen the `examples/` folder in your favorite web browser.\n\nYou can find a hosted version of the example site here: http://visible.io/\n\nYou can find a quick-start presentation on d4 [here](http://www.slideshare.net/heavysixer/d4-and-friendly-charting-dsl-for-d3).\n\n### Philosophy\n* * *\n\nMany charting libraries do a poor job when it comes to separations of concerns.\nThey attempt to be an all-in-one tool, which is at odds with how modern\napplications are built. Developers do not want a monolith that owns\nthe data transformation, visual aesthetics, and interactivity. This leads to\nenormous libraries with huge config files, where every minutia about the chart\nmust be decided upon beforehand. This typically means developers must first\nlearn a specialized API in order to control even the most basic aspects of the chart.\nd4 believes many of these responsibilities would be better delegated to other technologies.\nIf developers were woodworkers then d4 would be a jig, which allows complex cuts to be made\nin fraction of the time it would normally take.\n\n#### CSS is for styling\n\nMany charting libraries make internal decisions on visual aesthetics, which may\nremove control from the graphic designer, who may or may not understand JavaScript let\nalone a specialized charting API. Choices on visual design like the colors for data series and font\nsizes are best made in CSS. d4 exposes convenient hooks in the generated markup\nto allow visual designer to get precise control over the look and feel without\nneeding deep knowledge of d4.\n\n#### The chart does not own the data\n\nData is a stand-alone object, which can be relied upon by many other scripts on\nthe page. Therefore, a charting library should not change the data object. It can make non-permanent\ntransformations.\n\n#### Context over configuration\n\nThere is a software design concept called \"convention over configuration,\" which states that software should specify a collection of opinionated defaults for the developer. The goal of this approach is to lessen the number of obvious choices a developer must make before they are able to use the software. Instead, configuration should be saved for instances where the defaults do not apply. d4 extends this concept a bit and suggests that configuration should also be highly contextual to the object the developer needs changed. Instead of making choices in some abstract config file, developers instead use a highly declarative API to make changes directly to the object they want augment.\n\n#### Terminology\n* * *\n\nd4 uses specific terms to describe the components of a chart.\n\n__Chart__ - The data rendered by d3 into a graphical representation.\n\n__Feature__ - A visual component of a chart, which helps convey meaning in the data.\n\n__Dimension__ - A segment of the data described by the chart.\n\n__Parser__ - A parser prepares the data for a chart.\n\n#### Base Charts\n\n* Area Chart (Coming Soon)\n* [Column Chart](http://visible.io/charts/column/basic.html)\n* [Donut Chart](http://visible.io/charts/donut/basic.html)\n* [Grouped Column Chart](http://visible.io/charts/grouped-column/basic.html)\n* [Grouped Row Chart](http://visible.io/charts/grouped-column/grouped-row.html)\n* [Line Chart](http://visible.io/charts/line/basic.html)\n* [Row Chart](http://visible.io/charts/row/basic.html)\n* [Scatter Chart](http://visible.io/charts/scatter/basic.html)\n* [Stacked Column Chart](http://visible.io/charts/stacked-column/basic.html)\n* [Stacked Row Chart](http://visible.io/charts/stacked-column/stacked-row.html)\n* Waterfall Chart (both [horizontal](http://visible.io/charts/waterfall/horizontal.html) and [vertical](http://visible.io/charts/waterfall/basic.html))\n\n#### Chart Features (Mixins)\n\n* [Arc Labels](https://github.com/heavysixer/d4/blob/master/src/features/arc-labels.js)\n* [Arc Series](https://github.com/heavysixer/d4/blob/master/src/features/arc-series.js)\n* [Arrows](https://github.com/heavysixer/d4/blob/master/src/features/arrow.js)\n* [Brush](https://github.com/heavysixer/d4/blob/master/src/features/brush.js)\n* [Column Labels](https://github.com/heavysixer/d4/blob/master/src/features/column-labels.js)\n* [Grid](https://github.com/heavysixer/d4/blob/master/src/features/grid.js)\n* [Grouped Column Series](https://github.com/heavysixer/d4/blob/master/src/features/grouped-column-series.js)\n* [Line Series Labels](https://github.com/heavysixer/d4/blob/master/src/features/line-series-labels.js)\n* [Line Series](https://github.com/heavysixer/d4/blob/master/src/features/line-series.js)\n* [Reference Lines](https://github.com/heavysixer/d4/blob/master/src/features/reference-line.js)\n* [Stacked Column Connectors](https://github.com/heavysixer/d4/blob/master/src/features/stacked-column-connectors.js)\n* [Stacked Labels](https://github.com/heavysixer/d4/blob/master/src/features/stacked-labels.js)\n* [Stacked Circle Series](https://github.com/heavysixer/d4/blob/master/src/features/stacked-shapes-series.js#L100)\n* [Stacked Ellipse Series](https://github.com/heavysixer/d4/blob/master/src/features/stacked-shapes-series.js#L167)\n* [Stacked Rect Series](https://github.com/heavysixer/d4/blob/master/src/features/stacked-shapes-series.js#L238)\n* [Trend Line](https://github.com/heavysixer/d4/blob/master/src/features/trend-line.js)\n* [Waterfall Column Connectors](https://github.com/heavysixer/d4/blob/master/src/features/waterfall-connectors.js)\n* [X Axis](https://github.com/heavysixer/d4/blob/master/src/features/x-axis.js)\n* [Y Axis](https://github.com/heavysixer/d4/blob/master/src/features/y-axis.js)\n\n#### Contributing\n\nIf you make improvements to d4, please share with others.\n\nFork the project on GitHub.\n\nMake your feature addition or bug fix.\n\nCommit with Git.\n\nSend @heavysixer a pull request.\n\n#### Inspiration\nWhere possible d4 follows existing d3 community best-practices. The inspiration of D4's modular and declarative structure came from\n[Mike Bostock's](http://bost.ocks.org/mike/chart/) article on writing reusable\ncharts in d3. d4 also follows the [general update pattern](http://bl.ocks.org/mbostock/3808234) too. (mostly)\n\n#### Other Projects using d4\n[d4-rails](https://github.com/gouravtiwari/d4-rails)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheavysixer%2Fd4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheavysixer%2Fd4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheavysixer%2Fd4/lists"}