Giter Club home page Giter Club logo

reactd3resources's Introduction

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

reactd3resources's People

Contributors

chroth7 avatar tmcw avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

Forkers

kod3r te-565

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.