Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published2🌍 Public

Last edited Dec 22, 2020

Created on Dec 22, 2020

This scatter plot visualizes the relationship between vehicle weight and horsepower, colored by origin and sized by weight, based on the auto-mpg dataset loaded via `d3.csv`. The visualization uses vega-lite-api to construct the specification, with vega-lite and vega handling rendering to SVG. Interactive tooltips display car names using vega-tooltip’s `Handler`, while the `config.js` customizes axis and label styling. The plot fills the window with a fit autosize, and the code registers the tooltip handler during initialization.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Menus

This visualization displays a scatter plot of automobile data, mapping vehicle weight to horsepower with points colored by origin and sized by weight. Users can hover over points to see the car model name via tooltips. The visualization is built using the vega-lite-api library, which composes the chart specification through method chaining, while data is loaded asynchronously from a CSV using d3.csv. The chart renders through vega-tooltip and fills the browser window with a custom dark-themed configuration.

Ccyh-progress

92% match

Loading thumbnail…

Scatter Plot With Menus

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point representing a vehicle. The visualization uses d3.scaleLinear to map data values to screen coordinates, d3.axisBottom and d3.axisLeft to render the axes, and SVG circles for the data points. A dropdown menu is created using a helper function that appends a select element, though the menu does not yet affect the chart. The code loads CSV data asynchronously and converts string values to numbers before rendering.

Jjlspangl

91% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the relationship between vehicle horsepower and weight using data from the UCI Machine Learning Repository's Auto MPG dataset. Red semi-transparent circles represent individual cars, plotted with D3.js scales and axes. The visualization uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for tick marks and labels. Data is loaded via `d3.csv` from a remote URL, with numeric fields converted using unary plus operators.

Nnkohdatavis

90% match

Loading thumbnail…

Scatter Plot with Menus

This example displays a scatter plot of car weight against horsepower, with each vehicle represented by a semi-transparent red circle. The visualization uses D3 version 5 to load the auto-mpg dataset from a CSV file, map the data to linear scales, and render the axes and points in an SVG canvas. The code defines value accessors for the x and y variables, applies axis guides with tick lines, and includes axis labels and a title, all styled via an external stylesheet.

WWarren-Fitzhenry

90% match

Loading thumbnail…

scatter plot with menu

This scatter plot displays the relationship between horsepower and weight for cars in the auto-mpg dataset, with each semi-transparent steelblue circle representing a vehicle. The visualization uses D3 v5’s scaleLinear, axisBottom, and axisLeft to construct the axes, while axis tick lines extend across the plot to create a grid. The data is loaded as CSV via d3.csv and parsed into numeric values before rendering as SVG circles. The chart includes rotated axis labels and a title, though the menu referenced in the title is not implemented in the shown code.

Ppei9223

89% 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

89% match

Loading thumbnail…

cars_scatter_plot

This scatter plot visualizes relationships among automobile characteristics from the auto-mpg dataset, plotting displacement against horsepower while encoding vehicle weight through point size and model year through color. Tooltips reveal car names on hover. The visualization is built with the vega-lite-api library, which registers Vega and Vega-Lite, and loads data asynchronously via d3.csv. The chart renders responsively using an SVG renderer with the vega-tooltip Handler for interactive annotations.

Ggoldpot

89% 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

89% match