{"id":13436525,"url":"https://github.com/bgrsquared/d3-react-squared","last_synced_at":"2025-05-07T15:22:00.368Z","repository":{"id":31577847,"uuid":"35142605","full_name":"bgrsquared/d3-react-squared","owner":"bgrsquared","description":"Lightweight event system for (d3) charts and other components for ReactJS.","archived":false,"fork":false,"pushed_at":"2016-09-20T13:42:24.000Z","size":1963,"stargazers_count":177,"open_issues_count":3,"forks_count":13,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-03-31T11:21:13.619Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://bgrsquared.com/DR2/","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/bgrsquared.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-05-06T06:16:39.000Z","updated_at":"2025-02-03T03:25:51.000Z","dependencies_parsed_at":"2022-08-24T06:50:27.481Z","dependency_job_id":null,"html_url":"https://github.com/bgrsquared/d3-react-squared","commit_stats":null,"previous_names":[],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrsquared%2Fd3-react-squared","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrsquared%2Fd3-react-squared/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrsquared%2Fd3-react-squared/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrsquared%2Fd3-react-squared/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bgrsquared","download_url":"https://codeload.github.com/bgrsquared/d3-react-squared/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252902767,"owners_count":21822307,"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-31T03:00:49.515Z","updated_at":"2025-05-07T15:22:00.346Z","avatar_url":"https://github.com/bgrsquared.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","UI Components","Demos"],"sub_categories":["Uncategorized","Chart"],"readme":"[--\u003e Demos, Examples, Playground, Docu](http://bgrsquared.com/DR2/)\n\n[--\u003e d3-react-squared-c3-loader](https://github.com/bgrsquared/d3-react-squared-c3-loader)\n\n[--\u003e New live example](http://bgrsquared.com/dogs/)\n\n[--\u003e New blog post, based on live example](https://medium.com/@ilikepiecharts/about-using-d3-react-squared-an-example-8cc5e5a6b58e#.jso6use4q)\n\n### Notes\n--\u003e v0.6.0 and later require d3 v4!\n\n--\u003e v0.3.0 and later require React 0.14!\n\n### c3\n\nDocumentation is still missing, sorry!\n\n#### v0.3.6 and newer\nStarting in 0.3.6, c3 charts are loaded using [d3-react-squared-c3-loader](https://github.com/bgrsquared/d3-react-squared-c3-loader)\n\n#### v0.2.7 through v0.3.5:\nPlease note that this is still 'beta'. So far, there is no docu on the docu page.\n--\u003e please check out the c3example.js in the source (./examples).\n\n# d3-react-squared\n[![npm version](https://badge.fury.io/js/d3-react-squared.png)](http://badge.fury.io/js/d3-react-squared)\n\nFeedback, ideas, PRs, etc. very welcome!\n\n## Why yet another d3-react component?\nThere are already some great solutions out there, combining React and D3, e.g.:\n\n[A gist with some links here](https://gist.github.com/chroth7/a56fafed1efc43737d11) \n\nMost of these articles/code aims to combine/add d3 into the lifecycle methods to\ngenerate charts that way. Have a look at them, great ideas there.\n\nSee docu page for some details about my approach. I don't want to bore you with details here -\njust contact us (contacts on docu page). I am very happy to discuss ideas/concepts!\n\nSome keywords:\n- Use D3 charts 'directly', maybe very limited adjustments needed (just think [examples](https://github.com/mbostock/d3/wiki/Gallery)!)\n- Provide viewboxes etc. to get responsive graphs\n- Make chart modular (a.k.a. reusable)\n- Provide a clean API to create and update charts (from ANY component!).\n- Parametrize charts\n- Be lightweight\n- Provide a way to share events between charts (and using a wrapper: any component!)\n- Provide access to a charts library (we currently offer [c3js](http://c3js.org), as of v0.2.7)\n- Provide a limited set of examples in this repo and make it easy to the users to add their own custom charts\n\nWe believe that especially the last bullet is helpful to teams separate concerns and have maintainable solutions.\nWhy? The chart generating code is in its own module and the interaction designer doesn't really have to care about React (maybe he should, but that's another story...).\n\nDetails?\n\n[See also here](http://bgrsquared.com/DR2/)\n(click on DR2 in top right navigation!)\n\n\n## Documentation\n[--\u003e See here](http://bgrsquared.com/DR2/)\n(click on DR2 in top right navigation!)\n\nThe documentation is still somewhat basic. Definitely check out the examples in the repo!\n\nBut hey, writing docu is sooooo time consuming...\n\n## Stand-alone example\nThis repo now includes a stand-alone example. Simply:\n\n```\nnpm install\n```\n\nand then \n\n```\nnpm run dev\n```\n\nand it should be running on `localhost:8080`.\n\n### Requirements\nAs far as I know, you shouldn't need anything fancy.\n\nWe run it in a babel/webpack/react setup, plain vanilla, so to speak (plenty of setup guides out there),\nand it works. \n\nAlso: we have bootstrap, no other css/sass/... (actually: we love [react-bootstrap](https://react-bootstrap.github.io))\n(Note: you could, if you wanted, to use SASS to style your graphs, must require the files where and when needed; you know how.).\n \n# Thanks\nHuge thanks to all the people involved in providing awesome tools such as:\n* [ReactJS](https://facebook.github.io/react/)\n* [D3](http://d3js.org)\n* [webpack](http://webpack.github.io)\n* [BabelJS](https://babeljs.io)\n* [Reflux (no longer using it, thanks anyway!)](https://github.com/spoike/refluxjs)\n* [redux (replaces Reflux)](https://github.com/rackt/redux)\n* [c3.js](http://c3js.org)\n\nand many others...\n\n### Some screenshots\n\n#### New Docu-Page \n![DocuPage](https://github.com/bgrsquared/d3-react-squared/blob/master/img/dr2overview.png)\n\n#### Playground ([--\u003e See here](http://bgrsquared.com/DR2/)) to learn about parameters:\n![Playground](https://github.com/bgrsquared/d3-react-squared/blob/master/img/explPlayground2.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbgrsquared%2Fd3-react-squared","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbgrsquared%2Fd3-react-squared","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbgrsquared%2Fd3-react-squared/lists"}