Skip to main content
SimilarExport ZIP
100%

scatter plot 7

✓ Published0🌍 Public
Aadithiarikatla@gmail.com
Last edited Oct 25, 2025
Created on Oct 25, 2025

This scatter plot visualizes the relationship between horsepower and fuel efficiency (MPG) for a small sample of cars, with each point representing a vehicle and a tooltip revealing its name. Built with D3.v7, the reusable `scatterPlot` function from `scatterPlot.js` uses `scaleLinear` and `axisBottom`/`axisLeft` to map the data to SVG coordinates. The `index.html` file demonstrates the chart with a static dataset, rendering circles via a D3 selection join, though the primary focus is on the configurable chart generator.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

scatter plot 7

This scatter plot displays the relationship between horsepower and fuel efficiency (MPG) for ten car models, with each point labeled with the car’s name. Built with D3 v7, the visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.symbol` with a circle shape to render the points. The SVG output includes axis labels and hover tooltips showing car details, all within a reusable `scatterPlot()` function. The dataset is hardcoded in the script.

Aadithiarikatla@gmail.com
92% match
Loading thumbnail…

Cars Scatter

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of cars, with each car represented as a semi-transparent circle. The chart uses D3 v5’s scaleLinear, extent, axisLeft, and axisBottom APIs to map data values to SVG coordinates, with gridlines and axis labels. The data is loaded asynchronously from an external CSV file via d3.csv, and numeric fields are parsed before rendering. Styling is applied through CSS classes for circles and text elements.

TTrey Billing
87% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of automobiles, with each car represented as a semi-transparent circle. The visualization uses D3 v5's linear scales (`scaleLinear`) to map data values to coordinates, and axes are rendered with `axisLeft` and `axisBottom`, including grid lines and custom tick formatting. The SVG canvas is populated by appending circle elements, and the data is loaded asynchronously from a CSV file using the `csv` function.

Ssara17585
87% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of automobiles, with each car represented as a semi-transparent circle. The visualization uses D3 v5's linear scales (`scaleLinear`) to map data values to coordinates, and axes are rendered with `axisLeft` and `axisBottom`, including grid lines and custom tick formatting. The SVG canvas is populated by appending circle elements, and the data is loaded asynchronously from a CSV file using the `csv` function.

Ssara17585
87% match
Loading thumbnail…

Cars: scatter plot

This scatter plot displays the relationship between horsepower and fuel efficiency (MPG) for a dataset of cars, with each circle representing a vehicle. The visualization uses D3 v5’s `scaleLinear` and `extent` functions to map the data to SVG coordinates, while `axisLeft` and `axisBottom` create labeled axes with gridlines. The circles are semi-transparent yellow, and the chart includes a title and rotated axis labels styled via CSS. Data is loaded asynchronously from a CSV file using D3’s `csv` method.

AAnthony-coding
87% match
Loading thumbnail…

reusable scatter plot

This reusable scatter plot displays the relationship between horsepower and miles per gallon for a small car dataset, with each point representing a vehicle. The D3.js v6 code defines a configurable `scatterPlot()` function with getter-setters for dimensions and data mappings. It loads the comma-separated values file using `d3.csv()`, converts numeric fields, and renders an SVG chart with `d3.scaleLinear` extents, `d3.axisBottom`, `d3.axisLeft`, and labeled axes. Circle elements include interactive tooltips via SVG `title` elements, with styling for opacity and color.

119h61a05c9@cvsr.ac.in
87% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between a car's fuel efficiency (mpg) and its horsepower using data from the auto-mpg.csv dataset. The plot uses circles to represent individual car models, with the x-axis showing mpg and the y-axis showing horsepower. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisLeft` and `axisBottom` for the axes, and `select` to target the SVG element. The data is loaded via `csv` and processed before rendering.

PPioustu
86% match
Loading thumbnail…

reasuable saatter plot

This reusable scatter plot, built with D3 v7, displays the relationship between car horsepower and fuel efficiency (MPG) for a small dataset. It is implemented as a configurable JavaScript function that accepts data, value mappings, and visual properties via a fluent API. The visualization uses D3's `scaleLinear` for axes, `symbol` shapes for data points, and `axisBottom`/`axisLeft` for tick marks. The example also demonstrates a second implementation using D3 v6 that loads the classic Iris dataset from a CSV file and maps species to different point symbols.

Aadithiarikatla@gmail.com
86% match