{"id":13481300,"url":"https://github.com/AnSavvides/d3act","last_synced_at":"2025-03-27T11:32:10.305Z","repository":{"id":34997358,"uuid":"39085563","full_name":"AnSavvides/d3act","owner":"AnSavvides","description":"d3 with React","archived":false,"fork":false,"pushed_at":"2017-05-24T00:58:02.000Z","size":184,"stargazers_count":297,"open_issues_count":9,"forks_count":26,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-03-03T07:46:51.177Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"laravel/framework","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnSavvides.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}},"created_at":"2015-07-14T16:06:42.000Z","updated_at":"2024-12-27T00:53:01.000Z","dependencies_parsed_at":"2022-09-17T15:14:54.643Z","dependency_job_id":null,"html_url":"https://github.com/AnSavvides/d3act","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnSavvides%2Fd3act","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnSavvides%2Fd3act/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnSavvides%2Fd3act/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnSavvides%2Fd3act/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnSavvides","download_url":"https://codeload.github.com/AnSavvides/d3act/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245836318,"owners_count":20680352,"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:50.598Z","updated_at":"2025-03-27T11:32:10.032Z","avatar_url":"https://github.com/AnSavvides.png","language":"JavaScript","funding_links":[],"categories":["Charts"],"sub_categories":[],"readme":"# d3act - d3 with React\n\n## Background\n\n[`d3`](http://d3js.org/) has been the de facto standard when it comes to data visualisations for a while now and [`React`](http://facebook.github.io/react/) has recently emerged as the go-to library for building user interfaces. `d3` and `React` are both data-centric libraries, making them a natural fit; `d3` takes a data-driven approach and `React` aims to solve the problem of data changing over time in the context of building large applications.\n\nIn recent months, there have been various approaches documented \u0026 implemented in order to showcase how to effectively use `d3` and `React` together, especially with a focus on letting `React` do the SVG rendering:\n- [\"D3 and React - the future of charting components?\" by 10consulting](http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/)\n- [\"ReactJS and D3 Part I: Layouts\" by Colin Megill](http://formidablelabs.com/blog/2015/05/21/react-d3-layouts/)\n- [\"react-d3 by Eric S. Bullington\"](https://github.com/esbullington/react-d3)\n- [\"react-d3-components by Neri Marschik\"](https://github.com/codesuki/react-d3-components)\n\n[Nicolas Hery's \"Integrating D3.js visualizations in a React app\"](http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/) talks about letting `d3` do all the work after React has finished rendering components in the DOM. `d3act` is inspired by [@nicolas_hery](https://twitter.com/nicolas_hery)'s approach; create a lightweight `React` component wrapper that maps `React`'s lifecycle methods `componentDidMount`, `componentDidUpdate` and `componentWillUnmount` into a `d3` chart's `create`, `update` and `unmount` methods respectively.\n\n`d3act` and the idea behind it was first presented at [ReactEurope 2015](https://www.react-europe.org/2015.html) as a five minute lightning talk; you can watch it [here](https://www.youtube.com/watch?v=6Pbf0n85HH8).\n\n## How does this improve DX?\n\nDuring the [keynote](https://www.youtube.com/watch?v=PAA9O4E1IM4) at ReactEurope 2015, [vjeux](https://twitter.com/vjeux) introduced the idea of DX (Developer Experience) - akin to UX (User Experience), but with a focus on enabling developers to build great UX with the best possible tools \u0026 technologies. Things like [Babel](babeljs.io), [Redux](https://github.com/gaearon/redux) and [Radium](https://github.com/FormidableLabs/radium) definitely tick the DX box.\n\nSo how does `d3act` improve DX? The need for creating `d3act` first emerged while building multiple `d3`-based visualisations to handle very large data sets in a single page in the context of a `React` app. Letting `React` manipulate and render `SVG` elements proved to slow things down - not by much, but at the scale of data that was being handled, this became a bottleneck.\n\nAt the same time, all existing visualisations were already written in the standard `d3` way which performed best - so in order to improve the DX let's wrap these existing `d3` visualisations in a lightweight `React` component that can extend to any such visualisations.\n\nAs a result, `d3act` aims to enable a better DX by enabling:\n- Use of existing `d3` visualisations\n- Keep creating `d3` visualisations using the same syntax\n- Don't worry about taking apart `d3`'s approach and reimplement the same things in `React`\n- Integrate seamlessly with `React` applications\n- Utilise what each library is best at\n\n## Getting Started\n\n```bash\nnpm install d3act\n```\n\n### Examples\n\n#### It's as simple as...\n\n```js\n\u003cChart\n    type={\"pie\"}\n    width={300}\n    height={300}\n    showTooltips={true}\n    data={\n        {\n            \"React\": 2,\n            \"Relay\": 12,\n            \"GraphQL\": 5,\n        }\n    }\n/\u003e\n```\n\n#### ...and you can use already existing charts\n\nEnsure your existing charts have `constructor`, `create`, `update` and `unmount` functions.\n\n```js\nclass PreExistingChart {\n    constructor(el, props) {\n        this.el = el;\n        this.props = props;\n    }\n\n    create(data) {\n        // Create your chart\n    }\n\n    update(data) {\n        // Update your chart\n    }\n\n    unmount() {\n        this.el.remove();\n    }\n}\n\n\u003cChart\n    type={\"custom\"}\n    customChart={PreExistingChart}\n    data={\n        {\n            \"React\": 2,\n            \"Relay\": 12,\n            \"GraphQL\": 5,\n        }\n    }\n/\u003e\n```\n\nTo see examples in action locally:\n\n```bash\nnpm install\nnpm run examples\n```\n\nHead to http://localhost:8080/ and see charts in action as below:\n\n![Bubble chart](bubble.png)\n![Bar chart](bar.png)\n![Pie chart](pie.png)\n\n### How do I update charts?\n\nJust update your `data` state and all else is handled for you.\n\n## What's next?\n\n- Improve API so that you can customise charts beyond just dimensions and margins\n- Better error handling\n- Manage state better\n- Improve tooltips \u0026 make them more extensible\n- Think about making expected data for each visualisation a little more uniform\n- Add tests\n\n## Is this the best way to combine `d3` and `React`?\n\nThis is one way of combining `d3` with `React`; there are plenty of other ways as already outlined - pick what works best for you. I don't think there is such a thing as a global 'best way' of combining `d3` with `React`, it very much comes down to what you want to do with it.\n\n## Contributing\n\nAll contributions are welcome; fork the repository, make your changes and open a pull request. Try to stick to the coding conventions that are already in place.\n\nTo build things locally, you can just `grunt watch` from the project's root directory. This will also lint code using [ESLint](http://eslint.org/); if you would like to just lint the code, you could also just use `grunt lint`.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAnSavvides%2Fd3act","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAnSavvides%2Fd3act","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAnSavvides%2Fd3act/lists"}