Shoot Straight - React

Shoot Straight - React with D3 Transitions

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.

95% match

Animated Bars

This example animates a scatter plot where each point transitions from a shared origin to its final position, revealing the distribution of a generated dataset. The data is computed in the browser, creating a sequence of 851 points using a greatest common denominator algorithm. Built with React and D3 v5, the visualization uses SVG circles rendered through a custom `Mark` component. Transitions are handled by D3's imperative API via `d3.select` and the `.transition()` method, animating the `cx` and `cy` attributes with a per-point delay to create a cascading effect.

77% match

Shoot Straight - HTML/D3

This example visualizes the recursive integer sequence A133058, where each term depends on the greatest common divisor (GCD) of its index and the previous term, producing a pattern of scattered points across 850 iterations. A dark circle marks each (n, a) pair, with all points initially converging at the chart’s center before animating outward to their final positions via staggered transitions. The visualization uses D3 v5 with linear scales and SVG circles, computing the GCD with a custom Euclidean algorithm function to generate the data. Axis generation relies on `d3.axisBottom` and `d3.axisLeft`, while the animation applies chained `.transition()` and `.delay()` methods.

76% match

Scatter Plot

This example renders a scatter plot of data points within an SVG using React. It leverages D3.js v5 to manage the visualization logic, while the rendering is handled through SVG elements defined in the JSX. The plot displays individual circles positioned on a 960 by 500 canvas, with a simple, uncluttered design. The code integrates D3 scales and axes to map data values to screen coordinates, though the specific dataset is not defined in the visible files.

Ppillliarun79

75% match

Shooting Data Working Copy

This interactive scatterplot visualizes fatal police shootings in the United States, plotting individual incidents by rank along both axes while allowing users to filter by flee status through a dropdown menu. The visualization loads CSV data from the Washington Post’s Fatal Police Shootings Database, using React hooks for state management and dropdown interactions. D3’s scaleBand and scaleLinear map the racial categories and data points, while custom React components render SVG axes and circles with tooltips, all styled with the Poppins font.

MMartin Blatz

Shoot straight!

The visualization depicts a sequence of 851 points, each representing a term in a number series defined by a greatest-common-divisor rule, where each value either divides the previous term or adds the current index. It shows the resulting scatterplot of sequence values against their index, with points animating from the top-right corner down to their correct positions. The code uses D3 v4 to bind data to SVG circles, applying a linear scale for both axes and a staggered transition with a 10-millisecond delay per point. The data is generated programmatically, referencing the Numberphile video and OEIS A133058 as sources.

Transition D3 Scatter plot

This example demonstrates an animated scatter plot of the Iris dataset, cycling through different numerical columns as the x-axis variable every three seconds. Each transition smoothly moves the existing SVG circles to their new positions over two seconds, with the axes updating accordingly. The visualization uses D3.js v7 with the `transition()` API to animate circle positions and axis scales, while the React framework handles the component structure. Data is loaded via `d3.csv` from a remote GitHub gist.

WWasanta Pruttisarikorn

Sserebryanaya.n@gmail.com

d3 Slection

This example demonstrates a dynamic scatter plot of animated circles whose vertical positions oscillate sinusoidally over time. It uses React and the D3.js v7 library, specifically `select`, `range`, `data`, and the `join` API to create and update SVG circles each frame. The visualization runs on a 60Hz interval, recomputing data with the sine of a time variable to produce smooth, continuous motion across the screen.