{"id":13481518,"url":"https://github.com/react-d3/react-d3-basic","last_synced_at":"2025-03-27T12:30:57.217Z","repository":{"id":88121064,"uuid":"42750644","full_name":"react-d3/react-d3-basic","owner":"react-d3","description":"Basic d3 charts in React.js, only include: line, bar, pie, scatter, area charts.","archived":false,"fork":false,"pushed_at":"2021-08-26T08:54:41.000Z","size":13571,"stargazers_count":221,"open_issues_count":25,"forks_count":117,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-10-30T15:50:52.379Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://reactd3.org/docs/basic","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-d3.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-09-18T22:52:01.000Z","updated_at":"2024-03-05T12:32:19.000Z","dependencies_parsed_at":"2024-01-17T05:13:32.687Z","dependency_job_id":"59130b47-6de0-4a30-af79-4e539ae05964","html_url":"https://github.com/react-d3/react-d3-basic","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-d3%2Freact-d3-basic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-d3%2Freact-d3-basic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-d3%2Freact-d3-basic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-d3%2Freact-d3-basic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-d3","download_url":"https://codeload.github.com/react-d3/react-d3-basic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245844840,"owners_count":20681789,"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:52.487Z","updated_at":"2025-03-27T12:30:56.817Z","avatar_url":"https://github.com/react-d3.png","language":"JavaScript","readme":"# react-d3-basic\n\n[![Dependency Status](https://gemnasium.com/react-d3/react-d3-basic.svg)](https://gemnasium.com/react-d3/react-d3-basic)\n\nreact-d3 basic charts, charts that we support:\n\n- Line Chart\n- Multiple Line Chart\n- Scatter Plot\n- Area Chart\n- Area Stack Chart\n- Bar Chart\n- Bar Group Chart\n- Bar Stack Chart\n- Bar Horizontal Chart\n- Bar Group Horizontal Chart\n- Bar Stack Horizontal Chart\n- Pie Chart\n- Donut Chart\n\n## Quick example\n\n#### With webpack build tool\n\n- Line Chart\n\n```js\n\"use strict\";\n\nvar React = require('react');\nvar ReactDOM = require('react-dom');\nvar LineChart = require('react-d3-basic').LineChart;\n\n(function() {\n\n  var generalChartData = require('./data/user.json');\n\n  var chartSeries = [\n      {\n        field: 'age',\n        name: 'Age',\n        color: '#ff7f0e',\n        style: {\n          \"stroke-width\": 2,\n          \"stroke-opacity\": .2,\n          \"fill-opacity\": .2\n        }\n      }\n    ],\n    x = function(d) {\n      return d.index;\n    }\n\n  ReactDOM.render(\n    \u003cLineChart\n      width= {600}\n      height= {300}\n      data= {generalChartData}\n      chartSeries= {chartSeries}\n      x= {x}\n    /\u003e\n  , document.getElementById('data_line')\n  )\n})()\n\n```\n\n#### In browser (without build tools)\n\nClone code `react-d3-basic.js` or minify js `react-d3-basic.min.js` and include the script in your HTML.\n\nYou'll also need `react`, `react-dom`, `d3`\n\n- Line Chart\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003e\n      Line Chart example\n    \u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"data_line\"\u003e\u003c/div\u003e\n    \u003cscript src=\"https://fb.me/react-0.14.2.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://fb.me/react-dom-0.14.2.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"../react-d3-basic.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\"\u003e\n      var LineChart = ReactD3Basic.LineChart;\n      var data = [\n          {\n              \"age\": 39,\n              \"index\": 0\n          },\n          {\n              \"age\": 38,\n              \"index\": 1\n          },\n          {\n              \"age\": 34,\n              \"index\": 2\n          },\n          {\n              \"age\": 12,\n              \"index\": 3\n          }\n      ];\n\n      var chartSeries = [\n          {\n            field: 'age',\n            name: 'Age',\n            color: '#ff7f0e',\n            style: {\n              \"stroke-width\": 2,\n              \"stroke-opacity\": .2,\n              \"fill-opacity\": .2\n            }\n          }\n        ],\n        x = function(d) {\n          return d.index;\n        }\n\n      ReactDOM.render(\n        \u003cLineChart width= {600} height= {300} data= {data} chartSeries= {chartSeries} x= {x} /\u003e\n      , document.getElementById('data_line')\n      )\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Install\n\n```\nnpm install --save react-d3-basic\n```\n\n## LIVE DEMO\n\nhttp://reactd3.org/docs/basic\n\n## Docs\n\n\n### Charts\n\nBuilding Charts.\n\n- [Line Chart](./docs/charts/line_chart.md)\n- [Area Chart](./docs/charts/area_chart.md)\n- [Area Stack Chart](./docs/charts/area_stack_chart.md)\n- [Bar Chart](./docs/charts/bar_chart.md)\n- [Bar Group Chart](./docs/charts/bar_group_chart.md)\n- [Bar Stack Chart](./docs/charts/bar_stack_chart.md)\n- [Scatter Plot](./docs/charts/scatter_chart.md)\n- [Pie Chart](./docs/charts/pie_chart.md)\n- [Donut Chart](./docs/charts/donut_chart.md)\n- [Bar Horizontal](./)\n- [Bar Stack Horizontal](./)\n- [Bar Group Horizontal](./)\n\n## Gallery\n\n![img](http://www.reactd3.org/img/basic/cover.png)\n\n## Develop\n\n```\n$ npm install\n$ node devServer.js\n```\n\nOpen `localhost:5000/example`\n\n\nBuild production `js`, `min.js` code\n\n```\n$ npm run prod\n```\n\n### Docs\n\nIf you want to modify the docs file, please modify `docs_pre` folder.\n\nAfter you finish, remember to install [smash-md](https://github.com/Canner/smash-md) first, then run `sh doc.sh` to compile the readme.\n\nYour new readme would show in `docs` folder.\n\n## History\n\n#### Before v1.6.x ...\n  \n  - Initial release\n  - Babel 5\n  - D3 3.0\n\n#### 2016 / 3 / 3, v1.6.0\n  \n  - Move to Babel 6.\n  - D3 4.0.\n  - improve example folder.\n\n\n## License\n\nApache 2.0\n","funding_links":[],"categories":["Maps"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-d3%2Freact-d3-basic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-d3%2Freact-d3-basic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-d3%2Freact-d3-basic/lists"}