customized Scatter plot

100%

customized Scatter plot

✓ Published1🌍 Public

Last edited May 1, 2023

Created on Apr 30, 2023

This interactive scatter plot visualizes the relationship between maximum velocity (Vmax) and range for a dataset of airplanes, using SVG circles to represent individual aircraft. The chart is built with React and D3 v5, employing `scaleLinear` for both axes and custom `AxisBottom` and `AxisLeft` components to render ticks. Hovering over a circle reveals its precise Vmax value via a native SVG `<title>` tooltip. The visualization reads from a CSV file fetched through D3’s `csv` loader, with styled axis labels and a clean, minimal aesthetic defined through CSS classes.

AI-generated description

a scatterplot of the airplane dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

customized Scatter plot with menus

Two dropdown menus allow the viewer to select which airplane attributes to plot on the x and y axes. The interactive scatter plot uses a dataset of airplanes, showing each plane as a circle with a tooltip displaying its x-axis value. Built with React and D3 v5, the code uses `scaleLinear`, `extent`, and `csv` for data processing, while the custom `Dropdown` component and `Marks` map the selected attributes to the axes and circles within an SVG canvas.

Rrsulli4

80% match

Loading thumbnail…

2 dimensional Scatter Plot testing data labels and mouse hover

This scatter plot displays aircraft price against manufacture year from a seven-row CSV dataset. Each aircraft type appears as a semi-transparent svg circle with a tooltip title showing its name; hovering triggers a d3 transition that enlarges the circle radius. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for ticks, and d3.csv for data loading, with margins and labels specified in the index.js file.

FFhouston17

75% match

Loading thumbnail…

2 dimensional Scatter Plot

A two-dimensional scatter plot displays the relationship between aircraft price and year of manufacture, with each data point representing a specific aircraft model. The visualization uses D3 v5 with SVG rendering, plotting seven aircraft types across a linear scale for both axes. The chart includes labeled axes, gridlines, and a title, with interactive hover effects that enlarge data points using D3 transitions. Data is loaded from a CSV file using the `csv` function, and the code employs `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to construct the visualization.

FFhouston17

74% match

Loading thumbnail…

Scatterplot Version 2

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.

SSchmittYannic

74% match

Loading thumbnail…

CMAPSS Dataset Viz v2.2

This interactive scatterplot explores sensor data from NASA’s CMAPSS turbofan engine dataset, plotting a selected y-axis attribute (altitude, Mach, TRA, or T2) against elapsed time for a chosen unit and cycle. Users filter data through three dropdown menus built with React state, while D3 v7’s `scaleLinear` and `extent` handle axes and scaling. The React component renders SVG circles with opacity, axes via custom `AxisBottom` and `AxisLeft` components, and includes tooltips showing raw values. Data is loaded asynchronously from a remote CSV using `d3.csv`.

JJun Suzuki

74% match

Loading thumbnail…

Cars Scatterplot

A scatterplot of 1970s cars, plotting acceleration against weight, with each red semi-transparent circle representing a vehicle. The visualization uses D3 v6's `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` to load data from the auto-mpg dataset, rendering as SVG within a React framework. Axes include tick marks and labels, with a title and axis titles added via SVG text elements.

JJordy Fronik

73% match

Loading thumbnail…

CMAPSS Dataset Sample 2.0

This interactive scatterplot visualizes flight traces from the CMAPSS turbofan engine dataset, plotting sensor readings such as altitude against elapsed time. Users filter the displayed trace by selecting a unit, flight cycle, and y-axis attribute from dropdown menus. The React application uses D3 v7 scales and axes to render SVG circles with opacity, while tooltips reveal exact coordinate values. Data is loaded as CSV files from GitHub gists.

JJun Suzuki

73% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between wind velocity and height, using data from a CSV file. D3.js version 5 is used to create the SVG rendering, mapping velocity to the x-axis and height to the y-axis with circle marks. The chart includes labeled axes and a title, with the x-axis formatted using a custom tick format and the y-axis using a scalePoint. The data comes from a simulated dataset of height and velocity pairs.

Vvitoriss12

73% match