└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # React <-> D3 Resources 2 | 3 | This is a incomplete list of resources on how to link react & d3. 4 | 5 | These approaches mostly differ as to 'who' has control over the dom and does the transitions etc. 6 | That distinction either requires the user to know more about react or d3, vice versa. Some of the approaches (like react-d3 or react-d3-components) include prebuilt charts, other just provide frameworks to place your charts in. 7 | 8 | The following list tries to summarize some of the approaches, hopefully there will be some convergence to a (set of) standard(s), at one point. 9 | 10 | Also, I included a short section on charting libraries in react, mostly based on d3, for which you don't have to write D3 yourself. 11 | 12 | This list is **UNSORTED**. 13 | 14 | **PLEASE** let me know of any other links that should be included here ... PRs very welcome 15 | 16 | ## Chat 17 | There is a D3 slack community, get your account here: https://d3-slackin.herokuapp.com 18 | Make sure to join #react! 19 | 20 | ## HOWTO/Tutorials/Articles 21 | (find the author's contacts on the respective pages) 22 | 23 | [10consulting](http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/) 24 | 25 | [formidable labs, Colin Megill: d3js for Math, React for rendering](http://formidablelabs.com/blog/2015/05/21/react-d3-layouts/) 26 | --> see below: Victory library 27 | 28 | [Video for Victory, at ReactiveConf](https://www.youtube.com/watch?v=n8TwLWsR40Y) 29 | 30 | [Nicolas Hery, let d3 do the charting work](http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/) 31 | 32 | [siftblog](http://blog.siftscience.com/blog/2015/4/6/d-threeact-how-sift-science-made-d3-react-besties) 33 | 34 | [A.Sharif](http://busypeoples.github.io/post/d3-with-react-js/) 35 | 36 | [Shirley Wu Medium Blog post](https://medium.com/@sxywu/on-d3-react-and-a-little-bit-of-flux-88a226f328f3) 37 | 38 | [Shirley Wu Dec15 at #wafflejs](http://slides.com/shirleywu/deck#/) 39 | 40 | [Oliver Caldwell](http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/) 41 | ./. 42 | [source](https://github.com/Olical/react-faux-dom) 43 | 44 | [Swizec Teller: d3 Enter & Exit transitions in React](https://github.com/Swizec/react-d3-enter-exit-transitions) 45 | 46 | [d4 - Declarative Data-Driven Documents](https://github.com/joelburget/d4) 47 | 48 | [Mixing d3 and React](http://www.macwright.org/2016/10/11/d3-and-react.html) and [Animating d3 and React with react-motion](http://www.macwright.org/2016/10/28/animating-react-and-d3.html) - approach of letting React manage the DOM. 49 | 50 | 51 | 52 | ### Videos 53 | [Benjamin Malley at Midwest JS 2015: Interactive Data Visualization with React and D3](https://www.youtube.com/watch?v=nBwm48eM1iY) 54 | 55 | [D3 with React | Andreas Savvides | Reactive 2015](https://www.youtube.com/watch?v=NFTWq10bYcs) 56 | 57 | 58 | 59 | ## github sources/libraries and examples 60 | 61 | [d3act, motivated by Nicolas' approach, see above](https://github.com/AnSavvides/d3act); this even [...has a youtube motivation](https://www.youtube.com/watch?v=6Pbf0n85HH8) 62 | 63 | [react-d3, library including charts](https://github.com/esbullington/react-d3) 64 | 65 | [react-d3-components](https://github.com/codesuki/react-d3-components) 66 | 67 | [link highlights using reflux](https://github.com/pbeshai/linked-highlighting-react-d3-reflux) 68 | 69 | [Polar Charts "react-polar-gg"](https://github.com/widged/react-polar-gg) 70 | 71 | [react-d3-library](http://react-d3-library.github.io) 72 | 73 | [d3-component by Curran Kelleher](https://github.com/curran/d3-component) 74 | 75 | [vx](https://github.com/hshoff/vx) 76 | 77 | 78 | 79 | #### Concrete implementations of d3 charts as react components 80 | 81 | [d3 force implementation for react](https://github.com/uber/react-vis-force) 82 | 83 | 84 | 85 | ## Wrappers & standalone react-charting libraries (NOT necessarily directly linked to D3) 86 | 87 | [Victory, of FormidableLabs](https://github.com/FormidableLabs/victory) again [with video](https://www.youtube.com/watch?v=n8TwLWsR40Y) 88 | 89 | [react-highcharts](https://github.com/kirjs/react-highcharts) 90 | 91 | [recharts](http://recharts.org) 92 | 93 | [react-vis, by Uber](https://github.com/uber/react-vis) 94 | 95 | [Orama.JS](http://oramajs.com) 96 | 97 | 98 | 99 | ## Blocks. Various approaches 100 | 101 | [React, D3, TopoJSON](http://bl.ocks.org/herrstucki/9204795) 102 | 103 | [Force, React, D3, Part 1](http://bl.ocks.org/sxywu/61a4bd0cfc373cf08884) 104 | 105 | [Force, React, D3, Part 2](http://bl.ocks.org/sxywu/1db896c1a38d89ae71b4) 106 | 107 | [Force, React, D3, Part 3](http://bl.ocks.org/sxywu/fcef0e6dac231ef2e54b) 108 | 109 | [Sparkline](http://bl.ocks.org/milroc/aacdb75156d51d9dbe4d) 110 | 111 | [Bar Chart and React/Flux (not redux), part of a series](http://bl.ocks.org/milroc/d22bbf92231876505e5d) 112 | 113 | 114 | 115 | ---------- 116 | 117 | ### my own approach 118 | 119 | [d3-react-squared, a framework for reusable, linked charts](https://github.com/bgrsquared/d3-react-squared) 120 | 121 | [live example](http://bgrsquared.com/dogs/) 122 | 123 | [blog post](https://medium.com/@ilikepiecharts/about-using-d3-react-squared-an-example-8cc5e5a6b58e#.lrnxtf7to) 124 | 125 | [d3-react-squared-c3-loader, loads c3 charts](https://github.com/bgrsquared/d3-react-squared-c3-loader) 126 | 127 | [adding d3-version4 in react, playground](https://medium.com/@ilikepiecharts/playing-with-d3-version-4-react-react-motion-3d04c6eb21c9#.a9v0sze5p) 128 | --------------------------------------------------------------------------------