Scatter Plot with Menus and Categorical Color Coding
This interactive scatter plot displays the auto-mpg dataset, letting users compare numeric attributes via dropdown menus and color points by categorical columns. A color legend appears for categories with fewer than 12 unique values, where clicking a legend item filters the visible circles; for larger ordinal categories, a sampled viridis scale is shown without filtering. Built with d3.v5, the visualization uses `scaleOrdinal`, `interpolateViridis`, and `schemeSpectral` for coloring, while transitions animate circle positions and opacity in the SVG when axes or color selections change.
AI-generated descriptionThis example forks the cars scatter plot with menus exercise and adds a menu for color coding. In this case some categories were too large to properly display a legend and meaningful colors (e.g. name). So I've limited the legend to categories with less than 12 different values.
If the category has more than 10 values and is a numeric ordinal value, I opted to display a color scale of 15 values from the bottom of the scale to the top. In this case, clicking on a single color value to filter the points is not useful. It would be better to provide a sliding filter. But for categories with less than 12 values, it's still a useful interaction.