adding menu to D3 Scatter Plot

100%

adding menu to D3 Scatter Plot

✓ Published0🌍 Public

Last edited Dec 6, 2022

Created on Dec 4, 2022

Forked from ReUsable Fork of D3 Scatter Plot

This example presents a D3.js scatter plot of the Iris dataset, with interactive dropdown menus that allow users to select which measurement columns (e.g., petal length, sepal width) are plotted on the X and Y axes. The visualization dynamically re-renders the SVG circles and axes based on the menu selections. It uses the `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` functions from the D3 v6 library to handle scaling and axis generation. A custom `menu()` module builds the HTML select controls, and the plot reads data from a CSV file hosted on GitHub. The menu container is fixed at the top of the viewport, with the SVG plot filling the window.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

adding menus to animation of reusable D3 scatterplot

This example demonstrates an animated, reusable D3 scatterplot of the Iris dataset, with dropdown menus that let users select which quantitative columns appear on the x- and y-axes. The visualization renders data points as SVG symbols colored by species, with smooth transitions updating point positions and axis scales when selections change. The code builds on D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, `transition`, and `dispatch`, while the menus are implemented as a reusable function that emits custom `change` events. The scatterplot itself is structured as a configurable function with setter methods for dimensions, data accessors, and styling options.

SSamuele Greco

89% match

Loading thumbnail…

Animated D3 Scatter Plot with menu

This interactive scatter plot visualizes the Iris dataset, displaying measurements such as petal width and sepal length as animated circles. Two dropdown menus let users independently select which measurement appears on the x-axis and y-axis, triggering smooth transitions of both the data points and axes. Built with D3 v6, the visualization uses the `selection.join` pattern to handle enter, update, and exit states, with circles animating their positions over a one-second duration. The axes are rendered using `axisLeft` and `axisBottom`, while the menus are constructed with a custom reusable `menu` component that dispatches change events.

AAdekola Aliu

89% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, with dropdown menus that let users select which flower measurements map to the x and y axes. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, and `axisBottom` for the plot, while a custom `dropdownMenu` module handles the HTML select elements. When a menu changes, the scatter plot transitions smoothly over two seconds, animating circles to their new positions with staggered delays. Data comes from the built-in iris.csv file, and points are colored by species using `scaleOrdinal` with `schemeCategory10`.

Yyhcmv5

89% match

Loading thumbnail…

Scatterplot with Menus

Two dropdown menus control which numeric measurements from the Iris dataset appear on the x- and y-axes of an SVG scatterplot. Built with React and D3 v7, the visualization uses `d3.scaleLinear` to map sepal and petal dimensions to axes, rendering circles with a constant radius. The code constructs reusable `AxisBottom`, `AxisLeft`, and `Marks` components, and updates the plot dynamically through React state when menu selections change. Data is loaded asynchronously via `d3.csv` from Curran’s gist.

Rrmgoldberg24

88% match

Loading thumbnail…

Data Visualization: menus

This example shows a scatter plot of the Iris dataset, with points colored by species and axes labeled for petal width and sepal length. A dropdown menu container is positioned at the top left, though its interactive functionality is not yet implemented. The visualization uses D3.js version 6.7.0, with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, and renders as an SVG that adapts to the window dimensions. The code structure separates the reusable `scatterPlot` component from the main data-loading script, which fetches CSV data from a GitHub gist.

MMireia Parra

88% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset with interactive dropdown menus for selecting which flower measurements to plot on the x and y axes. The menus allow users to switch between sepal length, sepal width, petal length, petal width, and species for either axis, with axis labels updating accordingly. The visualization uses D3's `scaleLinear` for scaling, React's `useState` for managing selections, and renders an SVG with tick marks, axis labels, and circular marks.

Rroc286

88% match

Loading thumbnail…

ScatterPlot with Menu

An interactive scatterplot of the Iris dataset displays measurements of sepal width, sepal length, petal width, and petal length as points. Users select which measurements appear on the X and Y axes via two dropdown menus, with axis labels updating accordingly. Built with React and D3 v6, the visualization uses `d3.scaleLinear` for axes, `d3.extent` for domains, and renders SVG circles, lines, and text. Data is loaded from a CSV using `d3.csv`, and components for axes, marks, and dropdowns are modularized into separate React files.

PPadoSensei

88% match

Loading thumbnail…

Scatter plot with menu

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements (sepal length/width, petal length/width) appear on each axis via dropdown menus. The chart uses React state to track selected attributes, updating the axes and circles accordingly. Built with D3 scales (d3.scaleLinear, d3.extent) and custom SVG axis components, each data point renders as a circle with a tooltip showing its x-value. The CSV data loads asynchronously via d3.csv from a GitHub gist.

Ccshm407

88% match