Skip to main content
SimilarExport ZIP
100%

[06] Responsive Chart Components with ResizeObserver - Using React Hooks with D3

✓ Published2🌍 Public
Ggjonor
Last edited Feb 22, 2020
Created on Feb 19, 2020

A bar chart demonstrates responsive sizing with React and D3, using a custom `useDimensions` hook with `ResizeObserver` to track container dimensions. The component re-renders axes and bars whenever the wrapper resizes, computing `scaleBand` and `scaleLinear` scales from the observed width and height. Interactive buttons adjust, filter, or append data, while the chart animates transitions via D3's `transition` method. A draggable button resizes the container, triggering the observer. Styling uses inline SVG with CSS transforms, and tooltips appear on hover with `mouseenter` events.

AI-generated description

2020-w08-6

Tutorial serie:

The Muratorium: Using React (Hooks) with D3

  • [06] Responsive Chart Components with ResizeObserver
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of [06] Responsive Chart Components with ResizeObserver - Using React Hooks with D3

A responsive bar chart built with React and D3 v5 updates its axes and bar geometry whenever the container resizes, using a custom `useDimensions` hook with `ResizeObserver`. The chart reads dimensions from the wrapper’s `contentRect`, then redraws with `scaleBand`, `scaleLinear`, `axisBottom`, and `axisRight`, animating bar heights via `transition`. D3’s `join` binds data for mouseenter tooltips and color scales. A draggable resize control adjusts the root width, triggering live updates.

Llusinetsatinyan
91% match
Loading thumbnail…

Responsive chart

A responsive bar chart built with React and D3 v5 updates its layout and axes to match the container’s dimensions via a custom `useResizeObserver` hook and the `ResizeObserver` API. Three buttons control the data: incrementing each value, filtering out values above 50, and appending random numbers. Bars render as SVG `rect` elements with smooth transitions, while hover tooltips appear as text. Axes are generated using `axisBottom` and `axisLeft`.

JJunyanL
88% match
Loading thumbnail…

[05] Interactivity - Using React Hooks with D3

This interactive bar chart demonstrates how React hooks and D3 v5 work together to create a dynamic, animated visualization. The example uses `useState` and `useEffect` to manage a mutable data array, while D3's `scaleBand`, `scaleLinear`, and `join` method handle the rendering of SVG bars and tooltips. On mouseenter, a tooltip text element appears with data binding, positioned using the band scale’s index value, and animates its opacity and y-position via `transition()`. Buttons trigger data updates—increment, decrement, filter, or append—which re-render the chart through the React state change. The code also demonstrates axis generation with `axisBottom` and `axisRight`, applying a color scale to bar fills based on value.

Ggjonor
83% match
Loading thumbnail…

[04] Animated bar chart - Using React Hooks with D3

This example shows an interactive animated bar chart where users can increment, decrement, filter, or append values to a dataset, with bars flipping vertically and transitioning smoothly to new heights. Built with React Hooks and D3 v5, it uses `scaleBand` for the categorical x-axis, `scaleLinear` for y and color interpolation, and `selection.transition()` to animate bar heights and fill colors based on a clamped color scale. The SVG rendering uses `transform: scale(1, -1)` to flip bars, with axes positioned via `axisBottom` and `axisRight`.

Ggjonor
82% match
Loading thumbnail…

Fork of [07] Gauge Chart - Using React Hooks with D3

This example demonstrates a gauge chart built with React Hooks and D3 v5, where users can resize a video element and a draggable container while buttons adjust, filter, or append data values. The gauge renders as an animated SVG arc using `d3.arc` and `d3.pie`, transitioning between states via `transition.attrTween` with `d3.interpolate`. A separate bar chart uses D3 scales and axes with a `ResizeObserver` custom hook to handle dynamic container dimensions. Data updates trigger React state changes, which re-render both visualizations.

AAleex94
81% match
Loading thumbnail…

D3 and React

Two React components render D3 visualizations side-by-side. A bar chart maps an array of values to SVG rectangles and text labels, using D3's data join with `selectAll`, `enter`, and attribute setters, with colors via HSL strings and classes for high/low values. A second component demonstrates React's managed rendering alongside unmanaged D3 updates, appending HTML elements, merging enter/update selections, and animating appended spans with `transition().duration().delay()`. Both components use `useRef` and `useEffect` to access the DOM, with data generated by `d3.range`.

Ggjonor
79% match
Loading thumbnail…

[03] Axes and scales - Using React Hooks with D3

This example shows a line chart of an array of numeric values rendered as a smooth, cardinal-curved path with labeled axes. The code uses React Hooks with `useState` and `useRef` to manage data and the SVG element, while D3 v5’s `scaleLinear`, `axisBottom`, `axisRight`, and `line` with `curveCardinal` construct the visualization. Buttons update or filter the data, triggering a re-render that redraws the line and axes against a fixed 900×400 SVG viewport.

Ggjonor
78% match
Loading thumbnail…

[07] Gauge Chart - Using React Hooks with D3

A gauge chart shows a single dynamic value as a two-part donut arc, with the current proportion displayed as a text label. The chart responds to controls that adjust, filter, or append to the data array. The code uses React hooks (`useRef`, `useEffect`) to manage the D3.js SVG rendering, with D3's `arc` and `pie` functions calculating the arc paths. Animated updates are handled via `transition.attrTween`, interpolating between previous and new arc data. The `d3.drag` API allows the user to horizontally drag a button to resize the container, triggering the gauge to update reactively.

Ggjonor
78% match