Skip to main content
SimilarExport ZIP
100%

Scatter plot with menus

✓ Published0🌍 Public
Eevapavlinek
Last edited Apr 13, 2020
Created on Apr 10, 2020
Forked from Cars scatter plot

This scatter plot displays the relationship between horsepower and selected attributes from the auto-mpg dataset. A dropdown menu lets users choose which column from the dataset to plot on the x-axis, while horsepower remains fixed on the y-axis. The visualization is built with d3.v5, using d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and d3.csv to load data. The scatterPlot component renders SVG circles, with menus created by a separate dropdownMenu module.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot lets users explore the relationship between car horsepower and weight from the auto-mpg dataset, with a dropdown menu to select which numerical column drives the x-axis values. The visualization uses D3 v6 to render SVG circles with semi-transparent red fills, scaling axes with d3.scaleLinear and extent. Axes are drawn using d3.axisBottom and d3.axisLeft, and the custom dropdownMenu module populates the select element with all data columns.

PPiotr Paszek
93% match
Loading thumbnail…

Scatter Plots with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, plotting horsepower against a user-selected x-axis column via a dropdown menu. Built with D3 v6 and SVG, it uses scaleLinear, axisBottom, axisLeft, and d3.csv to render points. The dropDownMenu module triggers re-renders dynamically when the selection changes, updating the x-scale and axis accordingly. The visualization includes grid lines, axis labels, and a title, with styling applied through an external CSS file.

MMajaha21
93% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset. Users can interact with a dropdown menu to select different data columns, though the menu's callback is empty, so selection does not change the plot. The visualization uses D3 v5's `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs to render an SVG chart with red translucent circles. A custom `dropdownMenu` module creates the HTML select element. The chart includes labeled axes and a title.

MMichał Szumnarski
92% match
Loading thumbnail…

Scatter Plot w/ menus

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with red semi-transparent circles on an SVG canvas. The visualization includes labeled axes with tick marks and a title, while a dropdown menu at the top offers options A, B, and C, though the menu selection does not currently alter the chart. The code uses d3.csv for data loading, d3.scaleLinear for scales, d3.axisLeft and d3.axisBottom for axes, and a custom dropdownMenu module that creates select elements with d3 selections.

Ggorfoula
92% match
Loading thumbnail…

Scatter Plot with menus

This scatter plot visualizes the Auto MPG dataset, showing relationships between car attributes like horsepower, weight, and acceleration. Two dropdown menus let users select which columns map to the x- and y-axes, with circles animating smoothly to their new positions via `transition().duration(1000).delay()`. The visualization is built with D3 v5, using `scaleLinear` and `extent` for scaling, `axisBottom` and `axisLeft` for axes, and custom reusable functions `dropdownMenu` and `scatterPlot` for modularity.

LLongYuu
92% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus allowing users to select which columns to plot on the x and y axes. The visualization updates dynamically, showing relationships like horsepower versus weight with animated circle transitions. Built with D3 v5, the menus use the custom `dropDownMenu` component with select elements, while the scatter plot leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration()` for smooth updates. Data values are parsed as numbers before rendering with SVG circles.

Zzenoe
92% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores relationships between attributes of classic cars, including horsepower, weight, and acceleration, using data from the auto-mpg dataset. Two dropdown menus allow the user to select which columns to plot on the x- and y-axes, dynamically re-rendering the chart. Built with d3.v5, the visualization uses SVG and animated transitions. The code leverages d3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, along with a custom `dropdownMenu` module and a `scatterPlot` component that animates circles over two seconds.

CCarloWK1202
92% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays the relationship between car weight and various selectable attributes, including horsepower, from the auto-mpg dataset. A dropdown menu, built using D3's select and append methods, lets users switch the x-axis column, triggering a re-render. The visualization uses D3's scaleLinear, axisBottom, axisLeft, and extent functions for scaling and axes, rendering circles as SVG elements within a chart that includes grid lines and labeled axes.

Ddanrhymes
91% match