Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited May 8, 2023

Created on May 8, 2023

This interactive scatter plot displays the relationship between three numeric attributes (age, bmi, and charges) from the insure.csv dataset. Two dropdown menus let users select which attribute appears on the X and Y axes, and the axes labels update accordingly. The visualization uses D3 v5 scaleLinear and extent functions to compute domains, maps data to SVG circles, and renders axes with custom tick formatting. The React app leverages the useData hook to asynchronously load and parse the CSV data via D3's csv function.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus on Medical Cost Personal Dataset

This interactive scatter plot explores the Medical Cost Personal Dataset, showing relationships between patient attributes like age, BMI, and children. Users select which attribute maps to the x- and y-axes via two ReactDropdown menus, with smoker status encoded by the color of each circle. Built with React and D3 v5, the visualization uses scaleLinear for axes, scaleOrdinal for colors, and custom SVG components for axis ticks and marks, loading data via d3.csv.

Llynz09

84% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, showing relationships between numeric attributes while allowing users to change the X and Y variables through dropdown menus. The visualization uses React for state management and rendering, with D3.js v5 scales and SVG marks. Axis components generate ticks via scale methods, while circle elements with embedded titles serve as tooltips. The plot retrieves CSV data using d3.csv and scales the axes with scaleLinear.

MMichael Bergerson

83% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two numeric attributes by selecting them from dropdown menus for the x- and y-axes. The chart renders data points as SVG circles using React components and D3 scales (scaleLinear, extent) for positioning. Axis components generate ticks and labels, while menu options dynamically update the displayed dimensions. The visualization uses React state to manage selected attributes and d3.csv to load the data, with axis formatting applied via d3.format.

KKevin McMorrow

83% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let viewers select which data columns to display on the x- and y-axes. The visualization reads from a CSV file containing movie attributes like budget, gross, and IMDb score. The scatterPlot function creates linear scales, axes, and animated circles using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom. A dropdownMenu module builds the select elements with d3 data joins. The circles transition over 2 seconds with staggered delays, showing how axis labels and data points update dynamically when menu options change.

AArikuzzaman Idrisy

83% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically change which attributes are displayed on the x and y axes through two dropdown menus. Built with React managing state and D3 v7 utilities like `scaleLinear` and `extent` for scaling, the SVG rendering includes custom axis components and circles with tooltips. The code uses a custom `useData` hook with the `csv` function to load and parse the dataset, coordinating menu selections with axis labels and data values.

Jjbruzzo

83% match

Loading thumbnail…

scatterplot with menues

This interactive scatterplot lets users explore the classic “Auto MPG” dataset by choosing which numeric columns appear on the x- and y-axes via two dropdown menus. Built with React, d3.v5, and SVG, it renders animated circles that transition to new positions when the selected columns change. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data, while a custom `dropdownMenu` component handles the select inputs and triggers re-renders through callbacks.

SSchmittYannic

83% match

Loading thumbnail…

Scatter Plot w/ Menus

Two dropdown menus let a viewer select which measurements of the Iris dataset appear on the x and y axes of an interactive scatter plot. The React app uses D3 v6 scales (`scaleLinear`, `extent`) to map values to an SVG canvas, while `AxisBottom` and `AxisLeft` render tick marks. Changing a menu updates the corresponding axis label and point positions via `useState`. The data is loaded from a CSV with `d3.csv`, and hovering over a circle reveals its exact value through a native SVG `<title>` tooltip.

AAnthony Ynami

83% match

Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot lets users explore the relationship between any two columns in the auto-mpg dataset by selecting the X and Y axes from dropdown menus. Built with React and D3 v6, it renders an SVG featuring animated transitions between selections, with circles smoothly adjusting to new positions. The example demonstrates reusable components for dropdown menus and scatter plots, utilizing D3’s scaleLinear, extent, axisBottom, and axisLeft APIs alongside the transition system for animation.

MMatthew Rubino

83% match