Export Image
Export Code

Animated Scatter Plot with Menus_testing_dispatch

Toly

Last edited Dec 31, 2022
Created on Dec 31, 2022

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