Skip to main content
SimilarExport ZIP
100%

Visualização de gráfico de dispersão v2

✓ Published1🌍 Public
Xxilingus
Last edited Nov 3, 2021
Created on Nov 3, 2021

This interactive scatter plot explores the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via two dropdown menus. Built with React and D3 v5, it renders SVG circles whose positions are scaled using `scaleLinear` and `extent`. The x-axis tick labels are formatted with `format('.1f')`, while each circle includes a `<title>` element showing the precise x-value as a tooltip.

AI-generated description

Visualização de gráfico de dispersão v1

MIT Licensed

Similar vizzes

Loading thumbnail…

Visualização de gráfico de dispersão v3

A scatter plot of the Iris dataset, with dropdown menus to select which flower measurements appear on the X and Y axes. The visualization renders SVG circles for each data point, using scales generated with `d3.scaleLinear` and `d3.extent`, with axes drawn from the `AxisBottom` and `AxisLeft` components. The React app manages the selected attributes via `useState`, and the data is loaded asynchronously with `d3.csv` from a GitHub gist.

Xxilingus
94% match
Loading thumbnail…

Visualização de gráfico de dispersão v4

This scatter plot visualizes the Iris dataset, letting users interactively explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via dropdown menus. The visualization uses D3.js v5 scales (scaleLinear, scaleOrdinal) to map data values to positions and colors, while the React-driven SVG rendering displays circles for each flower specimen. Species are distinguished by color, and hovering reveals the x-axis value through a native SVG tooltip. The code implements custom React components for axes and marks, with data loaded asynchronously from a CSV file.

Xxilingus
92% match
Loading thumbnail…

Visualização de gráfico de dispersão v5

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus, built with React and ReactDropdown, control which attributes are plotted on the x and y axes. The SVG rendering uses d3.scaleLinear for axis scaling and d3.scaleOrdinal for species-based coloring. Hovering over a circle reveals its x-axis value via a tooltip. The code demonstrates a React pattern for building interactive D3 visualizations, with components for axes, marks, and dropdowns.

Xxilingus
92% match
Loading thumbnail…

Visualização de gráfico de dispersão v1

This scatter plot visualizes the sepal length and sepal width of iris flowers from a CSV dataset. It uses the D3.js `scaleLinear` API to map the data’s extent to the SVG canvas, with axes and tick marks generated by custom React components. Circle marks are positioned using `xScale` and `yScale`, and each includes a `<title>` tooltip. The visualization is rendered with React and D3 v5, using SVG elements and Oswald font styling.

Xxilingus
90% match
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
88% match
Loading thumbnail…

Gráfico de Dispersão (scatter plot)

This scatter plot visualizes the Iris flower dataset, showing the relationship between petal length and sepal width, with each point as a circle. Built with React and D3 v7, it uses `d3.scaleLinear` for both axes, `d3.extent` to set domains, and `d3.csv` to load data from a GitHub gist. SVG circles are rendered via React components, with axis labels and tick marks generated manually. The plot includes interactive elements like a tooltip title on hover, and data is formatted using `d3.format`.

AAlan Santos
88% match
Loading thumbnail…

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

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.

AAlan Santos
85% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements by selecting which attribute appears on each axis via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles positioned using linear scales, with labeled axes and tick marks generated by custom React components. The data loads asynchronously from a GitHub gist using D3's `csv` parsing function, and the interactive dropdowns update the chart's state to reflect new attribute selections.

XXiaoyu Su
85% match