Skip to main content
SimilarExport ZIP
100%

Cars Scatter with Menu

✓ Published1🌍 Public
Mmamaycotte
Last edited Aug 19, 2019
Created on Aug 19, 2019

This interactive scatterplot displays the relationship between horsepower and weight for cars in the auto-mpg dataset. Users select a category from the dropdown menu, though the code currently renders only static axes and circles. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to create grid lines, while the `dropdownMenu` module generates the select element. Data loads from a CSV via `csv()`, with SVG circles positioned by scaled values.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Scatter with Menu

This scatter plot displays weight versus horsepower for a dataset of cars, with each point representing a vehicle. A dropdown menu presents options labeled “a” through “d,” though the menu does not currently filter or alter the displayed data. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `csv` to load data from an external auto-mpg dataset. Fixed margins, gridlines, and labeled axes structure the chart, while circles use `fill` and `opacity` from stylesheets.

Mmamaycotte
95% match
Loading thumbnail…

Cars Scatter Plot with menus

This visualization displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each car represented by a red semi-transparent circle. Users can select different columns from a dropdown menu to change the variable of interest. The scatter plot uses D3 v5’s scaleLinear, axisBottom, axisLeft, and extent functions to compute scales and render SVG axes. The dropdown menu is implemented via a reusable function that appends select elements and handles change events, while the data is loaded as CSV and parsed to numeric values.

Jjay
95% match
Loading thumbnail…

Cars Scatter Plot with Menu

This interactive scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Built with D3 v5, it renders circles as SVG elements, with axes using `axisBottom` and `axisLeft`. The interface includes a dropdown menu created with a custom `dropdown` function, though the options are placeholder values and no interaction logic is implemented. The plot displays gridlines, axis labels, and a title, with data loaded via `csv` from an external URL.

MMiish84
95% match
Loading thumbnail…

Cars Scatter Plot with menus

This visualization displays the relationship between horsepower and weight for a dataset of cars, with each car represented as a circle. A dropdown menu above the chart lists all data columns, but the code only logs the selected option to the console; it does not change the chart axes. The scatter plot is rendered using D3 v5 with SVG, using the `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct axes and `csv` to load the auto-mpg dataset from a remote URL. A reusable `dropDownMenu` module handles the menu creation with D3 data joins.

Jjay
94% match
Loading thumbnail…

Cars Scatter Plot with Menu

This interactive scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. A dropdown menu lets users change the x-axis variable among the dataset’s columns, triggering a re-render of the SVG visualization. The implementation uses d3’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while a custom `dropdownMenu` module handles the selection UI and callback.

Yylzami40
93% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and semi-transparent orange circles. A dropdown menu, built with a custom `dropdownMenu` function, appears at the top. The code loads data via `d3.csv` and includes margin conventions, axis labels, and a title.

Ww9350736
93% 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
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
93% match