Skip to main content
SimilarExport ZIP
100%

Estilizando Menus do Gráfico de Dispersão (scatter plot)

✓ Published0🌍 Public
AAlan Santos
Last edited Jun 7, 2022
Created on Jun 7, 2022

An interactive scatter plot shows how the Iris dataset's sepal and petal measurements vary. Users select which attributes map to the x- and y-axes via dropdown menus, re-rendering the D3 v7 SVG chart with new axes and marks. The code uses `csv` from D3 to load the data, `scaleLinear` for axes, and React components—`AxisBottom`, `AxisLeft`, and `Marks`—to build the visualization. Dropdown options come from the `react-dropdown-browser` library, and the tooltip uses a `.title` element. Data is sourced from a GitHub-hosted CSV of Fisher's Iris flower measurements.

AI-generated description

Programa que mostra os 10 países mais populosos atraves do grafico de barras e axes

Dados:Perpectiva da Nações Unidas da População 2019

MIT Licensed

Similar vizzes

Loading thumbnail…

Gráfico de Dispersão (scatter plot) com Menus

This interactive scatter plot uses React and D3 v7 to visualize the Iris flower dataset, with dropdown menus for selecting which numeric attributes (sepal length, sepal width, petal length, or petal width) map to the x- and y-axes. The code scales the data with `d3.scaleLinear` and `d3.extent`, renders axes as SVG groups, and draws circle marks with native `<title>` tooltips. The data loads from a CSV via `d3.csv` and the view updates reactively through `useState` and component re-rendering.

AAlan Santos
94% match
Loading thumbnail…

Scatter Plot With menu

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via React dropdown menus. The SVG visualization uses d3.scaleLinear for both axes, with d3.extent and d3.max for domain calculation, and renders circles with native tooltips. The React components (AxisBottom, AxisLeft, Marks, Dropdown) manage the state-driven re-rendering as users change axis selections, pulling data asynchronously via d3.csv.

Aadewole-top
91% match
Loading thumbnail…

Scatter plot Iris Flower with Menu

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions. Dropdown menus using `ReactDropdown` allow users to select which attribute maps to the X and Y axes, dynamically updating the chart. The visualization uses `d3.csv` to load data and `d3.scaleLinear` for axis scaling, rendering SVG circles within a React component. Axis ticks, labels, and marks are generated programmatically, with axis labels and styling using CSS classes for a clean presentation.

BBenjamín Salas Sadler
91% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset, rendered as SVG in React, lets users select which attribute appears on each axis through two dropdown menus. The chart maps petal and sepal measurements, using `d3.scaleLinear` for scales and `d3.extent` to compute domains. Axes are drawn with shared `AxisBottom` and `AxisLeft` components, while `Marks` renders circles with tooltips. The code loads CSV data via `d3.csv`, and the dropdowns update state to reassign the x and y values dynamically.

BBen Seebeck
91% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against each other. Two dropdown menus allow users to select which measurement attributes appear on the x- and y-axes, with axis labels updating accordingly. The visualization uses React for component state and rendering, with d3-scale (scaleLinear) for positioning and d3.extent to compute domains. SVG circles represent data points with hover tooltips, while custom React components (AxisBottom, AxisLeft, and Dropdown) handle axes and menu interactions. Data loads asynchronously via d3.csv from a GitHub-hosted CSV file.

Llaplantalaplanta
91% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris Dataset displays sepal and petal measurements, with dropdown menus allowing users to select which attributes appear on the x- and y-axes. The visualization uses React with D3's `scaleLinear` and `extent` to map data to SVG circles, while axes are rendered via custom `AxisBottom` and `AxisLeft` components. The dropdowns update state to re-scale and re-render the marks dynamically, with formatted tick labels using D3's `format`.

RRajat Dangat
91% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against one another. Two dropdown menus let a viewer select which attribute appears on the x- and y-axes, with the scales and axes updating accordingly. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `extent` to compute domains, and `csv` to load data from a remote URL. Circles are rendered as SVG elements, with native `<title>` tooltips showing formatted values. The chart reflects user selections through React state and the `Dropdown` component.

LLewis Ward
91% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that dynamically change the X and Y axes. The visualization uses React for state management, d3.scaleLinear and d3.extent for scaling axes, and d3.csv for data loading. SVG circles with d3.format-based tooltips display data points, while custom AxisBottom and AxisLeft components render ticks. The ReactDropdown component enables attribute selection, with axis labels updating accordingly to reflect the current measurements displayed.

SSong Tao Chen
91% match