avolisacado

@avolisacado·3 public vizzes

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.

Jun 23, 2019

Loading thumbnail…

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.

Jun 23, 2019

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository. Dropdown menus let the user dynamically choose which car attributes map to the x-axis, y-axis, and color categories, using `dropdownMenu` to re-render the visualization. Built with D3 v5, the `scatterPlot` module animates circles to their new positions over a two-second transition, scaling axes with `d3.scaleLinear` and `d3.axisLeft`/`d3.axisBottom`, while a separate `colorLegend` displays the categorical color scale.

Jun 23, 2019