Scatter Plot with Menus and Categorical Color Coding
This interactive scatter plot uses the auto-mpg dataset and D3 v5 to explore relationships between car attributes like horsepower and miles per gallon. Dropdown menus let users select which columns appear on the x-axis, y-axis, and which categorical attribute drives color coding. A color legend, built with `scaleOrdinal` and either `schemeSpectral` or `interpolateViridis`, allows clicking to filter points. SVG circles transition smoothly via `transition.attr` when axes or categories 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.