React <-> D3 Resources

This is a incomplete list of resources on how to link react & d3.

These approaches mostly differ as to 'who' has control over the dom and does the transitions etc. 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.

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.

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.

This list is UNSORTED.

PLEASE let me know of any other links that should be included here ... PRs very welcome

Chat

There is a D3 slack community, get your account here: https://d3-slackin.herokuapp.com Make sure to join #react!

HOWTO/Tutorials/Articles

(find the author's contacts on the respective pages)

10consulting

formidable labs, Colin Megill: d3js for Math, React for rendering --> see below: Victory library

Video for Victory, at ReactiveConf

Nicolas Hery, let d3 do the charting work

siftblog

A.Sharif

Shirley Wu Medium Blog post

Shirley Wu Dec15 at #wafflejs

Oliver Caldwell ./. source

Swizec Teller: d3 Enter & Exit transitions in React

d4 - Declarative Data-Driven Documents

Mixing d3 and React and Animating d3 and React with react-motion - approach of letting React manage the DOM.

Videos

Benjamin Malley at Midwest JS 2015: Interactive Data Visualization with React and D3

D3 with React | Andreas Savvides | Reactive 2015

github sources/libraries and examples

d3act, motivated by Nicolas' approach, see above; this even ...has a youtube motivation

react-d3, library including charts

react-d3-components

link highlights using reflux

Polar Charts "react-polar-gg"

react-d3-library

d3-component by Curran Kelleher

vx

Concrete implementations of d3 charts as react components

d3 force implementation for react

Wrappers & standalone react-charting libraries (NOT necessarily directly linked to D3)

Victory, of FormidableLabs again with video

react-highcharts

recharts

react-vis, by Uber

Orama.JS

Blocks. Various approaches

React, D3, TopoJSON

Force, React, D3, Part 1

Force, React, D3, Part 2

Force, React, D3, Part 3

Sparkline

Bar Chart and React/Flux (not redux), part of a series

my own approach

d3-react-squared, a framework for reusable, linked charts

live example

blog post

d3-react-squared-c3-loader, loads c3 charts

adding d3-version4 in react, playground