dv.32 - snazzy scatter plot: w/ menus

dv.31 - scatter plot: w/ menus

This interactive scatter plot visualizes the Iris Dataset, showing measurements of sepal and petal dimensions for three flower species. Users can dynamically select which attribute to display on the x-axis and y-axis via dropdown menus that populate the D3.js linear scales. The React application renders circles in SVG format, with species color-coded using d3.scaleOrdinal with the schemeCategory10 palette. Hovering over any circle reveals a tooltip with the species name and exact coordinates, while axis labels update to reflect the current selections.

97% match

dv.34 - snazzy scatter plot: w/ color legend

This scatter plot visualizes the Iris flower dataset, displaying four numeric measurements (sepal and petal length/width) on the X and Y axes with interactive dropdown menus for selecting which attributes to compare. Species are encoded through a color ordinal scale with a legend in the right margin, and each point includes a hover tooltip showing the species and coordinate values. Built with React and D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, rendering as SVG circles.

94% match

dv2020-ep31-viz32 - scatter plot w/ menus (basic)

This interactive scatter plot displays the Iris dataset, allowing users to select which flower measurements appear on the X and Y axes via dropdown menus. Built with React and D3.js (d3.scaleLinear, d3.csv), it renders SVG circles with tooltips showing the selected values, while axis labels update dynamically based on menu choices. The visualization uses d3.extent, d3.min, and d3.max for scale domains, with a D3 tick system for axis generation.

snazzy scatter plot: w/ colors

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which numerical attributes to plot on the X and Y axes, while points are colored by species using a d3.scaleOrdinal with a semi-transparent color scheme. Built with React and D3 v6, the visualization renders as SVG elements, with axes generated via d3.scaleLinear and data loaded asynchronously from a CSV file using d3.csv.

Scatter Plot with menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attributes appear on the x and y axes, dynamically updating the visualization. Built with React and D3 v5, the example uses `scaleLinear` for scaling, `extent` for domain calculation, and SVG circles for data points. The axes are custom React components that render tick marks and labels, while hover tooltips display formatted values via SVG `<title>` elements.

MMarat

dv2020-ep32-viz33 - scatter plot w/ menus

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between four measured attributes. The visualization uses dropdown menus to select which attributes are plotted on the x and y axes, with the chart updating dynamically. Built with React and D3 v5, the SVG rendering uses `scaleLinear` for axes and circle marks with tooltips. The data is loaded from a CSV file, and the menus are implemented using the `react-dropdown` library.

scatter with menus

This interactive scatter plot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. The visualization, rendered with React and D3 v7, uses `scaleLinear` for axes, `scaleOrdinal` for species coloring, and SVG circles for data points. Hovering over the color legend highlights a selected species while dimming others, and tooltips reveal exact values via SVG `<title>` elements.

JJosh Zalcman

92% match