Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shoot Straight - React with D3 Transitions

Public visualization

Shoot Straight - React with D3 Transitions

0 stars2🌍 Public
WWill Carter
Last edited Oct 3, 2019
Created on Oct 2, 2019

This example shows a scatterplot of a custom dataset, where each point animates from a central "firing" position to its final coordinate. The visualization combines React components with D3.js version 5 to manage the SVG rendering and the transition animations. The `Mark` component uses a D3 selection and the `transition` method with a delay to animate each circle's `cx` and `cy` attributes, while `AxisBottom` and `AxisLeft` render linear scales using `scaleLinear`. The data is generated in `useData` using a greatest common denominator calculation.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed