Animated Scatter Plot with Menus_testing_dispatch
This animated scatter plot displays the Iris dataset with interactive menus for switching both the x and y axes among quantitative and categorical attributes, incorporating linear, square root, and power scale types. Built with D3 v6, the visualization uses menu components with dispatch events to update the chart's scale types and columns, while an additional click event toggles the x-axis color between blue and black. Circles transition smoothly between positions using `transition.attrTween` and `selection.join`, with axes rendered via `axisBottom` and `axisLeft`.
AI-generated descriptionAdded 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.