Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Plot (Car Engine)

✓ Published0🌍 Public
PP Manisha
Last edited Oct 26, 2025
Created on Oct 26, 2025

This scatter plot visualizes the relationship between engine size and fuel efficiency (MPG) using a dataset of car engines. The visualization shows individual data points as blue circles, with clear axis labels displaying the measured variables. Built with D3.js (v7), the implementation uses `d3.csv` to load data from a GitHub-hosted CSV file, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` to render the chart axes. The SVG-based rendering is encapsulated in a reusable `ScatterPlot` function that accepts configurable dimensions, margins, and data value accessors, allowing for flexible reuse across different datasets.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

assignment

This example shows a reusable scatter plot of engine horsepower versus fuel efficiency (MPG) using data embedded as a CSV string. The chart renders circles with semi-transparent crimson fill, labeled axes, and a custom margin and size configuration. Built with D3 v7, the code defines a configurable `scatterPlot` function exposing setters for dimensions, accessors, labels, color, and radius, then binds it to an SVG element via `datum` and `call`. SVG rendering handles the axes, grid-free plot, and point positioning through linear scales.

Ssairathan.p045@gmail.com
86% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes a car dataset, showing fuel efficiency versus price with points colored by car type. Built as a reusable D3.js chart function, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeSet2` for categorical colors, and SVG circles with hover tooltips. The data is loaded from a CSV file via `d3.csv` with `d3.autoType`, and rendered in an SVG container with axes generated using `d3.axisLeft` and `d3.axisBottom`.

RRamdas Dheeraj
85% match
Loading thumbnail…

Car Dataset

This interactive scatterplot displays the relationships between engine size, fuel efficiency (MPG), and horsepower for a dataset of car models. The visualization uses D3 v7 to load data from a GitHub Gist, and employs linear scales to map quantitative columns to x and y positions. A summary panel displays key statistics, including row count, column names, and the mean and median MPG values, computed with `d3.mean` and `d3.median`. The chart is rendered as an SVG, with axes generated using `d3.axisBottom` and `d3.axisLeft`, and includes styling for the page and chart elements.

SShalom
85% match
Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between fuel efficiency and engine size for a dataset of cars, with each point’s radius representing horsepower and its opacity representing price. The chart uses D3 v6 to load CSV data from a GitHub gist, apply linear scales for the axes and point attributes, and render circles in an SVG. Color encodes car type (Sedan, Coupe, SUV, Truck) via `d3.scaleOrdinal`, with a legend included. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

GGorantla Vishnusai
85% 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
85% 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
85% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between engine cylinders and miles per gallon (mpg) for various automobile models, sourced from an auto-mpg CSV dataset. The code uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, with circles rendered via SVG. The chart includes custom axis tick formatting (e.g., abbreviating large numbers) and styling through CSS, demonstrating how to adapt D3’s default axes for a polished presentation.

ZZhengyan Yu
84% match
Loading thumbnail…

Cars Scatterplot

This scatterplot visualizes the relationship between engine displacement and fuel efficiency for various car models, with each circle representing an individual vehicle. The D3 v5 code uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, along with `d3.axisBottom` and `d3.axisLeft` to render the axes. The data is loaded from a CSV file (auto-mpg.csv) sourced from the UCI Machine Learning Repository, and the circles are styled with a steelblue fill and opacity. The chart also includes custom axis labels and formatting.

JJacob Potvin
84% match