Scatterplot Version 2

100%

Scatterplot Version 2

✓ Published0🌍 Public

Last edited Sep 24, 2020

Created on Aug 20, 2020

This example shows how an interactive scatterplot lets users explore relationships between variables in the classic 1970s automobile fuel-efficiency dataset. Through dropdown menus, users select which numeric columns (such as miles per gallon, horsepower, or weight) map to the X and Y axes, and optionally group points by model year or origin via a categorical legend. A slider and numeric input control circle size and opacity. Built with React and D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with animated transitions on SVG circles, plus a custom tooltip that appears on mouseover, displaying the values for the currently selected axes.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

SCATTER PLOT II

This scatter plot displays relationships between pairs of numeric attributes of cars, such as fuel efficiency and horsepower, from an auto-mpg dataset. Two dropdown menus let the user select which columns to plot on the x- and y-axes. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while circles animate from the center using the `.transition()` API with staggered delays. SVG output shows each point with a fixed radius and semi-transparent fill.

Ccocktaildata

87% match

Loading thumbnail…

scatterplot with menues

This interactive scatterplot allows users to explore the relationships between different attributes of cars, such as fuel efficiency, horsepower, and weight. Dynamic dropdown menus in the interface let users select which columns from the dataset to plot on the x and y axes. The visualization also includes a slider to adjust the transparency of the points and a number input to change the point size. Built with React and D3, the scatterplot uses D3's `scaleLinear` for axes and `transition().duration(1000).delay()` for smooth animated transitions of the data points.

SSchmittYannic

86% match

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot displays automobile data from the auto-mpg dataset, plotting miles per gallon against a variable selected via a dropdown menu. Users can switch the x-axis attribute among columns like horsepower, weight, and acceleration. The visualization is built with React, D3 v6, and SVG rendering, using d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.csv for data loading. The dropdown menu is implemented as a reusable component with D3 selections, updating the chart dynamically on user interaction.

MMatan

86% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot allows users to explore relationships between different car attributes from an auto-mpg dataset. Two dropdown menus let viewers select which columns to plot on the x and y axes for comparison. Built with D3.v5 and React, the visualization uses SVG elements and a transition animation to smoothly reposition data points when the selection changes. The code leverages D3 APIs like `scaleLinear`, `axisBottom`, and `axisLeft` for the axes.

Jjeelong

86% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the relationship between pairs of attributes in the auto-mpg dataset, allowing users to select which variables appear on the x- and y-axes via dropdown menus. Built with React and D3.js v5, the visualization renders points as SVG circles colored teal, with axis labels derived from the selected attributes. The data, loaded using d3.csv, includes numeric fields such as miles per gallon, horsepower, and weight, with axes scaled using d3.scaleLinear and tick formatting via d3.format. A title tooltip on each circle displays the formatted x-value.

11joaorodrigues

86% match

Loading thumbnail…

scatterplot with menues

This interactive scatterplot lets users explore the classic “Auto MPG” dataset by choosing which numeric columns appear on the x- and y-axes via two dropdown menus. Built with React, d3.v5, and SVG, it renders animated circles that transition to new positions when the selected columns change. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data, while a custom `dropdownMenu` component handles the select inputs and triggers re-renders through callbacks.

SSchmittYannic

85% match

Loading thumbnail…

Interactive Scatter Plot

This interactive scatter plot visualizes relationships between attributes of automobiles from a 1970s–80s dataset, with dropdown menus letting users choose which numeric columns map to the x and y axes. Circles transition from the center outward via `transition().duration()` as data updates. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while SVG circles render points with opacity and hover highlighting.

Hhxc20060903

85% match

Loading thumbnail…

Cars Scatter PLot

This interactive scatter plot visualizes the relationship between car horsepower and weight using the classic MPG dataset. Users can switch the x-axis attribute via a dropdown menu to explore different variables. The visualization is built with React and D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, with animated SVG circles transitioning over one second. Data is loaded from a CSV file and displayed with axis labels and a title in an SVG canvas.

Iinroadings

85% match