aalejandroq

@aalejandroq·3 public vizzes

Scatter Plot with Menus

A scatter plot visualizes movie data from the UCI Machine Learning Repository, displaying budget, gross revenue, and IMDb scores. Two dropdown menus allow the user to select which columns map to the X and Y axes. Built with D3.js v5, the visualization uses SVG rendering with animated transitions as circles move between positions. The code implements custom dropdownMenu and scatterPlot modules, using d3.scaleLinear for axes and d3.extent for domain calculations.

Jun 7, 2019

Loading thumbnail…

Scatter Plot with menus

This scatter plot explores relationships between numeric columns of the auto-mpg dataset by letting users choose which variables appear on the x- and y-axes via two dropdown menus. The D3 v5 code uses the `scaleLinear` and `extent` functions to compute scales, `axisBottom` and `axisLeft` for styled grid lines, and a `transition().duration(2000)` to animate circles to their new positions when the axes change. Red semi-transparent circles represent each car, with axis labels updating to match the selected columns.

Jun 7, 2019

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG car dataset, allowing users to choose which columns map to the x- and y-axes via dropdown menus. The chart uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and render axes, while a custom `scatterPlot` component animates circles with staggered transitions. Users select columns from dropdowns, triggering re-renders that update both the axes and the data points. The metadata comes from the UCI Machine Learning Repository, and the example is built with D3 v5 and rendered as SVG.

Jun 7, 2019