Skip to main content
100%

React V16 + D3 + Force / 50% Less Render Calls

✓ Published0🌍 Public
FFasani
Last edited Aug 27, 2017
Created on Aug 27, 2017

This example shows a force-directed bubble chart rendered with React v16 and D3 v3, where the visualization updates only every other frame to reduce render calls by 50%. The code uses `d3.layout.force` to simulate particle positions with a negative charge, while React manages the SVG circle elements through `createReactClass` components. A custom `shouldComponentUpdate` and a `requestAnimationFrame` loop in the `DataSeries` component toggle rendering on alternating ticks, so the chart redraws only half as often. The visible result is a cluster of steel-blue bubbles that animate smoothly, with performance metrics logged to the console after the simulation ends.

AI-generated description

Original code from:

http://bl.ocks.org/JMStewart/f0dc27409658ab04d1c8

Now attempting to use D3 with React v16

forked from <a href='http://bl.ocks.org/Fasani/'>Fasani</a>'s block: <a href='http://bl.ocks.org/Fasani/cf5dc757f43f0c0bd88c07a93e1ab1f1'>React V16 + D3 + Force</a>

forked from <a href='http://bl.ocks.org/hshoff/'>hshoff</a>'s block: <a href='http://bl.ocks.org/hshoff/a11827a5cc6b05b9e177323861fe3fe6'>React V16 + D3 + Force</a>

forked from <a href='http://bl.ocks.org/hshoff/'>hshoff</a>'s block: <a href='http://bl.ocks.org/hshoff/358dbd3810cfa588fb9579306f9bec1f'>React V16 + D3 + Force</a>

Final solution is to render 50% less

mit Licensed

Similar vizzes