Skip to main content
100%

Fork of Animated Scatter Plot with Menus_testing_dispatch

✓ Published0🌍 Public
PPeiyang Li
Last edited May 2, 2023
Created on May 2, 2023

This interactive scatter plot visualizes the Iris dataset, allowing users to switch the x- and y-axis columns and scale types (linear, band, square, or power) via dropdown menus. The D3 v6 chart animates circle positions with `transition()` as axes update, and clicking an axis label toggles its color between blue and black. The scatterPlot module uses D3 scales like `scaleLinear` and `scaleBand` with SVG rendering.

AI-generated description

Added scale type option to x and y selects. scatterPlot.js now has two new parameters and corresponding accessors (xType and yType) that decide the scale type used to display data.

scatterPlot.js use getScale internal function which accepts scaleType and valueAccessor. the function also sets the domain of the scale as it should be handled differently for different scale types. The range of the scale is set outside the function as it varies between x and y scales.

menu.js selectors set options value to the properties id rather than a custome value. This is to enable event handlers to set both the column and scale type.

index.js options object now has entries for column, text and type. value is not needed anymore as it is set using the index of each entry.

Extra Attempt: I exxperimented with another event in menu.js listeners object called x-click that is fired when 'x' label is clicked and passes null value. The event is handeled in index.js where it toggles the x-axis color property and accessor xColor between blue and black on each click of the x-label.

A reusable scatter plot inspired by Towards Reusable Charts and Observable: selection.join.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes