Export Image
Export Code

Animated Scatter Plot with Menus_testing_dispatch

wailassaad

Last edited Jun 03, 2021
Created on May 31, 2021

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