Scatter Plot with Menus and Categorical Color Coding
This interactive scatter plot visualizes the auto-mpg dataset, allowing users to compare different numeric attributes by selecting X and Y columns from dropdown menus. A third dropdown controls categorical color coding, with the legend adapting dynamically: categories with fewer than 12 values display individual swatches for filtering, while larger ordinal sets use a viridis color scale. The visualization uses d3.scaleOrdinal, d3.schemeSpectral, and d3.interpolateViridis for coloring, with SVG rendering and animated transitions on the circles when selections change. Clicking legend items filters the scatter plot points by color value.
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.