Skip to main content
SimilarExport ZIP
100%

Polished Scatter Plot with Menus and Color

✓ Published0🌍 Public
Ssophburke
Last edited Oct 1, 2019
Created on Sep 30, 2019

Interactive scatter plot of the MITx/HarvardX course dataset (a CSV loaded via `d3.tsv`) lets users select X and Y axes from dropdown menus built with `react-dropdown`. Each circle is colored by gender using a `d3.scaleOrdinal` with a three-color range. Axes are drawn with custom React components, and the chart state updates through React hooks like `useState` and `useEffect`, with SVG rendering.

AI-generated description

A scatter plot of The Iris Dataset. Forked Polished Scatter Plot with Menus and trying to add color to that!

MIT Licensed

Similar vizzes

Loading thumbnail…

Sophie's Polished Scatter Plot with Menus

A scatter plot shows the relationship between various academic activity metrics—such as active days, video plays, and forum posts—from HarvardX and MITx course participants in 2013. Two dropdown menus allow users to select which attributes appear on the x- and y-axes. The visualization is built with React and uses D3’s `scaleLinear`, `extent`, and `scaleOrdinal` for axis and color scales, rendering as SVG with custom `Marks` components and tick-axis helpers. Gender is encoded via a two-color ordinal scale. Data comes from the MITx-HarvardX Dataverse.

Ssophburke
87% match
Loading thumbnail…

Sophie's Polished Scatter Plot with Menus

This scatter plot explores the relationship between different learning activities and outcomes for HarvardX and MITx students on edX in 2013. Interactive dropdown menus allow users to select which two attributes, such as video plays, forum posts, or grade, to compare on the x- and y-axes. Built with React and rendered as an SVG, the visualization uses D3’s scale functions for axis construction and ordinal color scaling to differentiate data points by gender. The raw data is loaded from a CSV file using D3's `tsv` parser, with marks displayed as circles and tooltips showing precise values.

Ssophburke
86% match
Loading thumbnail…

Polished Scatter Plot with Menus

A polished scatter plot of the Iris dataset with interactive dropdown menus for selecting the X and Y axes. The visualization uses React to manage state for the selected attributes and d3.scaleLinear to map data values to pixel positions, with custom SVG components for the axes and marks. The ReactDropdown library provides the menu interface, while D3's csv parser loads the data and applies type coercion to numeric fields. The plot features formatted axis ticks and tooltips via SVG title elements.

Rroc286
85% match
Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris Dataset, featuring dropdown menus that allow users to dynamically select which attributes to display on the x- and y-axes. The visualization uses React to manage state and render SVG elements, with D3.js (d3.v5) providing the scaling, axis generation, and data formatting utilities. Points are rendered as circles with tooltips, and the chart includes labeled axes and a clean, polished aesthetic. The data is loaded asynchronously from a CSV file using D3's `csv` function within a custom `useData` hook.

AAndrey Katamanov
84% match
Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris dataset, letting users compare how different flower measurements correlate by selecting any two attributes from dropdown menus for the x and y axes. Built with React, D3 v5 scales, and SVG, it renders circles with tooltips and formatted axis ticks. The menus use the react-dropdown library, while data is loaded as CSV and parsed with d3.csv.

Yyuzhang21
84% match
Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris dataset, letting users compare how different flower measurements correlate by selecting any two attributes from dropdown menus for the x and y axes. Built with React, D3 v5 scales, and SVG, it renders circles with tooltips and formatted axis ticks. The menus use the react-dropdown library, while data is loaded as CSV and parsed with d3.csv.

Yyuzhang21
84% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to compare any two numerical attributes via React dropdown menus that control the x- and y-axes. The visualization uses React state with the `useState` hook to manage selected attributes and dynamically updates the scales with d3’s `scaleLinear` and `extent`. Rendered as an SVG, the chart includes polished axes built with custom components, tick labels formatted with d3’s `format`, and circular marks that display native tooltips on hover. Data loading is handled asynchronously through d3’s `csv` function.

CChiuyc
84% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A React scatter plot displays the Iris Dataset with interactive dropdown menus for selecting which attributes map to the X and Y axes. Two ReactDropdown components control the axes, updating the visualization through React state and re-rendering D3 scales created with `scaleLinear` and `extent`. The SVG chart uses reusable `AxisBottom`, `AxisLeft`, and `Marks` components for rendering ticks, labels, and circles with tooltips via the `<title>` element, styled with Poppins typography and a muted color palette.

MMarcelo
84% match