Shoot straight!

100%

Shoot straight!

✓ Published0🌍 Public

Last edited Sep 20, 2019

Created on Sep 20, 2019

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

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.

WWill Carter

86% match

Loading thumbnail…

Transition each

This visualization animates a scatterplot of a numeric sequence, transitioning each point from a centralized starting position to its final (n, a) coordinate, where the sequence is generated by a recursive GCD-based rule. The animation uses D3 v4’s `transition` with staggered delays, while also randomizing each circle’s radius, opacity, and fill color from a categorical palette. Points are rendered as SVG circles via `d3.selectAll('circle')`, with axes added using `d3.axisBottom` and `d3.axisLeft`. The data is computed in code, referencing the Numberphile and OEIS A133058 sources.

WWill Carter

77% match

Loading thumbnail…

Shoot Straight - React

This interactive scatterplot displays data points that animate outward from a central origin toward their final positions. Each circle begins at the midpoint of the axes, then transitions to its assigned coordinates with a progressively increasing delay, creating a sequential "shooting" effect. The visualization uses React components to render SVG circles, while D3 v5 handles the linear scaling and transitions via `transition().delay()`. Axes are drawn with custom `AxisBottom` and `AxisLeft` components, and data loading is managed through a custom `useData` hook.

WWill Carter

74% match

Loading thumbnail…

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.

WWill Carter

71% match

Loading thumbnail…

connect the dots

This animated scatterplot visualizes a time series of 50 data points, connecting them in chronological order with a smooth line. Each dot represents a moment in time, with its vertical position encoding the "rate" value while the x-axis maps temporal progression. The visualization uses D3 v4's SVG rendering to draw a continuously-updating path that links each point to the next, creating the sense of drawing a connected line through the data. As time advances, the line extends to incorporate new points while earlier segments remain visible, producing a dynamic "connect-the-dots" effect. The animation highlights the temporal flow and changing values across the dataset, with the line's movement revealing patterns in the rate changes over time. The visualization uses a minimal, uncluttered aesthetic that focuses attention on the trajectory of the data points.

EEranM6

69% match

Loading thumbnail…

Large number of points

A scatterplot displays 50,000 generated points, with color and radius encoding each point’s position in the lower, core, or upper quartile range. Built with D3 v4, the visualization uses SVG circles and an animated transition to update the points when the user edits the quantile, color, or radius values. The x-axis maps the point index, while the y-axis shows the generated normal distribution values, with scales recalculated via the `d3.scaleLinear` and `d3.quantile` APIs.

CCJKraenzle

68% match

Loading thumbnail…

Scatter Plot

This scatter plot displays ten randomly generated data points distributed across a two-dimensional plane, with each circle’s position determined by linear scales mapping the data range to pixel coordinates and its radius scaled proportionally. The visualization uses D3 v4 to create an SVG, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The code applies `d3.scaleLinear` for both x and y positioning, `d3.scaleOrdinal` with `d3.schemeCategory20` for coloring each circle, and a separate radius scale. The data originates from `d3.range(10).map(Math.random)`, producing a simple, uncluttered chart that highlights basic scatter plot construction without external data files.

BBerengerCunillera

67% match

Loading thumbnail…

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.

WWill Carter

67% match