Skip to main content
SimilarExport ZIP
100%

Spinner with d3-component

✓ Published0🌍 Public
CCurran Kelleher
Last edited Jul 13, 2019
Created on Feb 28, 2017

This example demonstrates how to display a spinner while data is loading and replace it with a bar chart after a simulated fetch. It uses d3-component’s conditional rendering to switch between components, with a local timer driving the spinner’s rotation based on elapsed time. The visualization is rendered as SVG, using D3 transitions with a bounce ease to animate bar heights.

AI-generated description

This example demonstrates usage of d3-component to create a spinner component, and render it conditionally while something is loading. After loading finishes, the spinner goes away and is replaced by another component.

How often have you seen a data visualization show nothing but a blank screen while the data is loading? Showing a spinner with D3 and hiding it after data is loaded is not as easy as it seems. Here's a solution for doing this, feel free to use it in your projects!

This demonstrates the following patterns supported by d3-component:

  • Use of local state and lifecycle hooks (spinner timer).
  • Composition of components with conditional rendering (app component).

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/fc8f6989901628e2e79d6374849453ed'>Posts with D3 Component</a>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/20e0f0bfb3e1c20c6535'>Spinny Loading Icon</a>

<!-- Start of SimpleHitCounter Code --> <div align="center"><img src="http://simplehitcounter.com/hit.php?uid=2240082&f=16777215&b=0" border="0" height="18" width="83"></a></div> <!-- End of SimpleHitCounter Code -->
mit Licensed

Similar vizzes

Loading thumbnail…

Spinny

This example visualizes a classic “spinny” loading icon using D3.js version 3. It shows a rotating ring of ten small circles that continuously spin around the center of the screen. The circles are positioned using sine and cosine functions based on a linear angle scale, with their radii varying from larger to smaller around the ring. The animation is driven by `d3.timer`, which updates the rotation attribute of a group element each frame, incrementing the angle by a fixed amount. The visualization uses SVG for rendering and relies on D3’s data join to bind an array of numbers to the circles.

CCurran Kelleher
79% match
Loading thumbnail…

D3 spinner

This example shows a minimalist loading spinner rendered as a single animated arc that rotates continuously around a circular track on a pale green background. The animation uses D3 transitions with a 20-second duration, where `transition.attrTween` interpolates the arc’s `endAngle` from 0 to 2π, and an `on("end")` callback restarts the spin indefinitely. The code builds the shape with `d3.arc()`, setting outer and inner radii relative to the container size, and positions it via an SVG `<g>` transform.

SSubhendu Karmakar
77% match
Loading thumbnail…

Fork of D3 spinner - 2

A circular loading spinner animation comprises ten evenly spaced blue dots arranged around a light blue SVG canvas. The dots rotate positions and vary their radius and opacity based on a rotating array of angles, creating a wave-like pulse effect. The code uses D3.js selection methods, including `data` joins with enter and update handling, alongside `d3.interval` to trigger periodic rotation of the dataset. All rendering is done via SVG, with parametric circle equations computing each dot’s coordinates.

SSubhendu Karmakar
74% match
Loading thumbnail…

Rainbow spinner

Animated SVG loading spinner renders 181 rainbow-colored arc segments using D3's `d3.arc` and `d3.interpolateRainbow`. The 960×500 canvas orbits the spinner around its center via `d3.timer`, while a clip path continuously stretches a plain arc's angle using `transition.attrTween`, alternating between expanding and contracting to mimic an Android-style loader.

FFrissAnalytics
73% match
Loading thumbnail…

Hello React + D3!

This example demonstrates a reusable React component that integrates with D3 to render animated SVG graphics. Dynamic data updates every second, repositioning circles while diagonal lines are redrawn to follow the resizing viewport. The code uses D3 v4 transitions for smooth attribute changes, React's lifecycle methods (`componentDidMount`, `componentWillUnmount`) for setup and cleanup, and a `setInterval` to update the visualization. It also responds to window resizing and keyboard input to toggle the graphic's visibility.

CCurran Kelleher
70% match
Loading thumbnail…

Untitled

This example displays an interactive 3D bar chart built with D3.js v2 and jQuery. It renders an SVG-based visualization where bars are grouped by categorical x-axis values, with drop shadows applied via SVG filters to create a 3D effect. The chart uses ordinal and linear scales to map data, and includes custom axis tick formatting for captions. The code initializes on document ready, transforming input data and building the chart within a scrollable container.

Sskambhore04
70% 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
70% match
Loading thumbnail…

Propeller2

A rotating three-blade propeller is visualized with D3.js, rendered as SVG shapes over a grey background. The visualization shows a central black hub with three silver blades and yellow tips spinning continuously. The rotation is achieved using D3’s `transition.attrTween` with a linear easing function, updating the group’s `transform` attribute by incrementing the rotation angle by 360 degrees per cycle and recursively restarting the animation on end. The code uses D3 v6 to append circle and rectangle elements, constructing the propeller geometry via explicit coordinate attributes.

AAsrar Al Qassem
69% match