The document discusses using React, Redux, and d3 together for data visualization. It describes wrapping d3 charts in React components to manage state and declarative updating. This allows building complex interactive visualizations with React and Redux handling UI and state, while leveraging d3 for data processing and drawing capabilities. A demo is shown with a bar chart component connected to a Redux store to update based on selected mode. Styling is done with CSS modules.

1. React + Redux + d3
Teemu Kurppa, ŌURA

2. teemu@ouraring.com
www.ouraring.com
the world's first wellness ring
Head of Cloud
I work at

3. • Declarative UI Library
• Battle-tested by Facebook
• Component-based
• Inline HTML with JSX

4. • Predictable state management for JS Apps
• Great tooling: logging, hot loading, time travel,…

5. d3.js

6. d3 - a lot of good stuff
• Handling data: Scales, Interpolators, Time Intervals, Time & Number formats
• Drawing: Paths, Areas, Shapes, Curves, Axes
• Data Structures for Visualization: Voronoi, Stack, Quadtrees, Polygons
• Drawing maps: Projections, Spherical Math, Geopaths
• Animations and Behaviour: Transitions, Easing, Zooming, Dragging, Forces

7. d3 - problems
• No components: code gets unwieldy very quickly
• State management mixed with UI code

9. d3 class pattern
class D3SeriesBarChart {
constructor(el, props, state) {
// setup code
}
update(el, props, state) {
// data-dependent code
}
}

10. React wrapper for d3
class SeriesBarChart extends Component {
componentDidMount() {
this.chart = new D3SeriesBarChart(this.svg,
this.props,
this.state);
}
componentDidUpdate() {
this.chart.update(this.svg, this.props, this.state);
}
render() {
return (
<svg ref={svg => this.svg = svg}
width={this.props.width}
height={this.props.height}>
</svg>
);
}
}

11. React wrapper for d3
class SeriesBarChart extends Component {
componentDidMount() {
this.chart = new D3SeriesBarChart(this.svg,
this.props,
this.state);
}
componentDidUpdate() {
this.chart.update(this.svg, this.props, this.state);
}
render() {
return (
<svg ref={svg => this.svg = svg}
width={this.props.width}
height={this.props.height}>
</svg>
);
}
}

12. React wrapper for d3
var T = React.PropTypes;
SeriesBarChart.propTypes = {
width: T.number.isRequired,
height: T.number.isRequired,
data: T.shape({
x: T.arrayOf(T.number),
y: T.arrayOf(T.arrayOf(T.number)),
}).isRequired,
mode: T.string.isRequired
}

13. Demo Component
class Demo extends Component {
render() {
return (
<div className={classNames(styles.demo)}>
<form>
{this.makeRadio('grouped', this.props.onSelectGrouped)}
{this.makeRadio('stacked', this.props.onSelectStacked)}
</form>
<SeriesBarChart width={960} height={500}
data={this.props.data}
mode={this.props.mode}/>
<div>
<button onClick={this.props.onGenerateData}>
Generate Data
</button>
</div>
</div>
);
}
// …
}

14. Demo Component
class Demo extends Component {
// …
makeRadio(mode, onChange) {
return (
<label><input type=“radio"
name=“mode"
value={mode}
onChange={onChange}
checked={this.props.mode === mode}/>
{mode}
</label>
)
}
}

15. Redu Reducer
// reducers.js
const initialState = {
data: createData(),
mode: 'grouped'
};
function demo(state = initialState, action) {
switch (action.type) {
case CHANGE_MODE:
return { ...state, mode: action.mode };
case GENERATE_DATA:
return { ...state, data: createData() };
default:
return state;
}
}
const rootReducer = combineReducers({
demo,
});
export default rootReducer;

16. Component CSS
// SeriesBarChart.jsx
import classNames from 'classnames';
const styles = require('./SeriesBarChart.scss');
class SeriesBarChart extends Component {
render() {
return (
<svg className={classNames(styles.seriesbarchart)}
ref={svg => this.svg = svg}
width={this.props.width}
height={this.props.height}>
</svg>
);
}
}

17. Component CSS
// SeriesBarChart.scss
.seriesbarchart {
:global {
.axis text {
fill: blue;
}
}
}

18. Thanks! Questions?
We are hiring:
Python backend developers
web front-end developers
Follow @teemu on Twitter to stay in touch.
Email: teemu@ouraring.com