D3 complex filtering

100%

D3 complex filtering

✓ Published1🌍 Public

Last edited Jul 4, 2021

Created on Jul 1, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Radio buttons

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.

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

81% match

Loading thumbnail…

D3: Scatterplot!

This interactive scatterplot displays 50 random data points on Cartesian axes, with each circle colored blue or red depending on whether its x-coordinate falls in the left or right half of the plot. Clicking the “Randomize” button generates a fresh dataset and smoothly animates the points, axes, and color updates over two seconds. The visualization is built with D3 3.5.5, using the `d3.scale.linear`, `d3.svg.axis`, and `transition().duration(2000)` APIs, and renders entirely as SVG. The code derives from Scott Murray’s examples, forked from earlier gists by anonymous and jalapic.

MMissHanJ

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…

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

72% match

Loading thumbnail…

D3 Selection Exploration - Functions

A dynamic scatterplot animates a set of circles, whose count, vertical position, and radius oscillate over time based on a sine function. The visualization uses the `select` and `range` functions from D3 to build and update SVG circles. The JavaScript code runs a 60 Hz interval, generating new data and joining it to the existing elements. The rendering is entirely SVG-based, with the animation driven by an internal timer.

Aajoua

72% match

Loading thumbnail…

categorical/quantitative transitory dynamic resusable d3 scattermap with options

This interactive scatterplot displays Fisher’s Iris dataset, with dropdown menus to select categorical or quantitative attributes for the x- and y-axes. Built with React and D3.js, the visualization uses `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render axes, while `transition()` animates the points and axes as the user changes selections. The SVG rendering includes colored species markers with tooltips, and a dynamic legend updates accordingly.

SSuperShreejit

72% match

Loading thumbnail…

D3: Transitioning points to randomized values, plus rescaled axes!

Clicking the text triggers a full update of a D3 v5 scatterplot: 50 circles transition to new random coordinates while the linear scales and axes recalculate to fit the new domain. The circles briefly enlarge and turn magenta during the transition, then shrink back to black. The code uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and chained `transition()` calls, with a clip-path masking any points outside the chart area. The dataset is generated on the fly in JavaScript, and rendering is SVG with animation.

Nnikomc

71% match