Skip to main content
SimilarExport ZIP
100%

Change to Bar

✓ Published0🌍 Public
TThaverman
Last edited Aug 19, 2022
Created on Aug 19, 2022

This interactive scatter plot maps a dataset of football matches, plotting Perfect Match values against a variety of derived attributes. Switching the X or Y axis via drop-down menus smoothly transitions the points to new positions, using an animated delay. Built with d3 v6, the visualization uses the `selection.join` API to efficiently manage circle and axis elements, while `scaleLinear` and `transition` handle the coordinate mapping and animation. The Iris Dataset URL is referenced, though the plotted data originates from a provided CSV source.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts and Observable: selection.join.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Connected Scatterplot: Playstyle Change

This example shows how a soccer team’s passing playstyle changed over time, allowing viewers to compare four pass-related statistics across months. A connected scatterplot displays the trend as a line with circular markers, and a dropdown menu lets users switch between metrics, triggering a smooth 1-second transition of the line and dots. The visualization uses d3.csv to load external data, d3.scaleBand and d3.scaleLinear for axes, and d3.line with selection.transition to animate the updated path and circles in an SVG.

SSimon Hackbert
75% match
Loading thumbnail…

Following Along Point Scale Animated Scatter Plot with Menus

This example shows an interactive scatter plot of the Iris dataset with two dropdown menus for selecting which quantitative or categorical column maps to the x and y axes. Animated transitions via `d3.transition` and `selection.join` move circles smoothly between positions, while axes update with a default `axisBottom` and `axisLeft` scale. The code uses d3.v6 with `scaleLinear` and `scalePoint`, rendering in SVG with an opacity of 0.2 on each circle. Data is loaded as CSV and parsed on the fly.

PParker-D5
75% match
Loading thumbnail…

Scatter Plot episode 12

This interactive scatter plot visualizes the Iris dataset, letting users switch the x and y axes via dropdown menus. D3 v6 selection joins animate circles with staggered delays as axes and point positions update. The chart uses d3.scaleLinear for quantitative columns, d3.scalePoint for categorical species, and transitions to smoothly grow and reposition SVG circles.

BBart van Pelt
74% match
Loading thumbnail…

Bar Charts

This interactive example visualizes the classic Iris dataset using bar charts rendered with D3.js v5. The code loads data from a CSV file, converts the sepal and petal measurements to numbers, and uses `d3.csv` and `d3.scaleLinear` to map values. It draws rectangular SVG elements for each data point with fixed width and height attributes, creating a grid of bars that represent the dataset's samples. The visualization demonstrates basic D3 data binding with `selectAll`, `data`, and `enter` selections.

Ccodingtywu
74% match
Loading thumbnail…

D3 Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to dynamically compare different flower measurements by switching the X and Y axes through dropdown menus. Built with D3 v7, it renders animated SVG circles using the `scatterPlot` component, which leverages `scaleLinear` for axes and `transition` for smooth 1-second updates. The menu system uses `dispatch` for change events, while data is loaded from a GitHub-hosted CSV file.

Jjonathanh21
74% match
Loading thumbnail…

Iris

This interactive scatterplot visualizes the classic Iris dataset, allowing users to compare any two measured features (sepal/petal length and width) via dropdown menus. D3 v7 axes and scales update with animated transitions when a new axis is chosen. Circles are color-coded by iris species, with a legend showing the three classes. The data is loaded from a CSV using `d3.csv`, and the visualization leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` for smooth updates.

ZZeroKurosakii
74% match
Loading thumbnail…

test

This interactive scatter plot explores the classic Iris flower dataset by allowing users to select which measurements to compare on the x and y axes via dropdown menus. The visualization uses D3.js v5 with SVG and animated transitions to render the data points. As users change the axis selections, the plot re-renders with a smooth delay effect, with each circle animating from the center. The code specifically uses `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to build the scales and axes.

Ping-Yu Yang
74% match
Loading thumbnail…

Scatter Plots: Part 2 - Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which attributes appear on the x- and y-axes via two dropdown menus. Built with React and D3 v5, the visualization renders SVG circles for each data point, with axis labels updating to reflect the selected measurements. The code leverages `d3.scaleLinear` for continuous scales, `d3.extent` for domain calculation, and custom `AxisBottom` and `AxisLeft` components to generate tick marks. Dataset values are loaded asynchronously through a `useData` hook that parses CSV data using `d3.csv`.

Zzeeeeem
74% match