D3 Radio buttons

100%

D3 Radio buttons

✓ Published1🌍 Public

Last edited Jul 1, 2021

Created on Jul 1, 2021

This example shows a scatterplot of 200 randomly generated points, with radio buttons that filter points by their x-value. Selecting a threshold highlights points above that value in red while leaving the rest black. The code uses D3 v7 to create the SVG, scales, and axes, and attaches click handlers to the radio inputs. The transition method animates the fill color change over 500 milliseconds.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

D3 complex filtering

An interactive scatterplot demonstrates dynamic filtering of 200 random points using radio buttons to select preset filter modes: none, center, edges, or quadrants. Built with D3 v7, it uses scaleLinear for axes and axisBottom/axisLeft for rendering. Clicking a radio button applies a transition to recolor points based on geometric conditions relative to the midpoint (500, 500), highlighting central clusters, edge outliers, or quadrant-specific groups with schemeCategory10 colors, while rendering via SVG circles.

KKaustav Sen

84% match

Loading thumbnail…

D3 "each" custom filtering

A scatterplot of 200 random points in a 1000x1000 space demonstrates D3's `each` method for per-element operations. Clicking a button toggles between a "freak out" state where circles change color and grow, and a normal state where they return to black and small size, all with staggered elastic transitions. The example uses D3 7.0.0 with `scaleLinear`, `axisBottom`, `axisLeft`, and `schemeSet3` for color selection. SVG rendering with animation is achieved through `transition`, `delay`, `duration`, and `easeElasticOut`.

KKaustav Sen

75% match

Loading thumbnail…

Reusable scatter plot

This reusable scatter plot displays 200 randomly generated data points using D3.js v4, with interactive buttons that trigger animated transitions. The visualization initially renders normally distributed points as semi-transparent blue circles, while the "Change Data" button regenerates the dataset and smoothly transitions the circles to new positions with updated axes. The "Change Color" button toggles the circle fill between blue and red using D3's transition and ease functions. The example demonstrates reusable chart patterns with SVG rendering, including linear scales, axis generators, and data-binding techniques.

EEfratVil

75% match

Loading thumbnail…

D3 functions

This example demonstrates D3 data joins with interactive buttons that remove or modify circles in an SVG scatterplot. Clicking "Remove" pops the last item from an array of x/y coordinates, redrawing the remaining circles; clicking "Modify" replaces one random entry with new values. The code uses `select`, `scaleLinear`, and `max` from d3 v5, along with a custom `rand` utility, to update circle positions via enter/merge/exit selections. The visualization highlights how shared update logic handles both new and existing elements.

Llanphuonglenguyen

73% match

Loading thumbnail…

random generator

Ten randomly positioned orange circles on a grey scatter plot animate to new coordinates whenever a “change data” button is clicked. The circles pulse by expanding and contracting their radius, and their fill color briefly shifts to red during the transition. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.randomUniform` for generation, and chained `transition` calls with an `easeSin` easing function. All rendering is SVG with animated updates.

Bbart

73% match

Loading thumbnail…

CS 725 Information Visualization - VI3

This example shows how interactive buttons control two distinct D3.js visualizations on a single page: a scatterplot and a polygon. The scatterplot initially displays data points as circles, and clicking a button triggers a transition that enlarges their radii and applies color based on the data values. A separate button animates the polygon’s shape, position, and fill color, with a circle appearing at the end of the transition. The code uses D3’s `transition.attr` and `style` methods, alongside scale functions (`d3.scale.linear` and `d3.scale.ordinal`), to drive the animations.

CChristosT

73% match

Loading thumbnail…

D3: Transitioning points to randomized values

A scatterplot displays 50 randomly generated points, each shifting to new random coordinates when the user clicks on the text. The visualization updates the positions of existing circles without adding or removing elements, using a smooth 1000-millisecond transition. The code builds the chart with d3.scaleLinear for the x and y axes, d3.axisBottom and d3.axisLeft for the ticks, and binds the data to SVG circle elements. The click handler regenerates the dataset, rescales the domains, and calls transition().attr() on the selected circles to animate the movement.

深深度碎片

72% match

Loading thumbnail…

HTML Starter

This example presents three animated circle charts, each with its own dataset and button. Clicking a button cycles through data values, causing the corresponding circle’s radius to transition smoothly while its numeric label updates. The visualization uses D3 v4 with `d3.select`, `d3.scaleLinear` for mapping data to radius and color, and `transition().attr` to animate changes. Each circle’s fill shifts along a gradient, and buttons trigger the updates through custom click handlers.

Ssgalhamdani

72% match