Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published1🌍 Public
Eeeshani.boyapati@gmail.com
Last edited Mar 24, 2026
Created on Mar 24, 2026

This scatter plot shows the relationship between horsepower and fuel efficiency for ten car models, with points colored by cylinder count (4, 6, or 8) and a legend indicating the mapping. It uses D3 v7’s `scaleLinear` for axes, `scaleOrdinal` for color, and `axisBottom`/`axisLeft` for tick marks. The SVG circles are positioned via the `cx` and `cy` attributes. Data is loaded from a local `cars.csv` file.

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
89% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes 50 rows of real car data, mapping horsepower on the x-axis and miles per gallon on the y-axis, with points colored and shaped by the car’s origin using `d3.scaleOrdinal` with `d3.schemeTableau10` and `d3.symbol` types. Built with D3 v7, it renders an SVG with axes, labels, and a legend, loading data via `d3.csv` from a GitHub gist. The reusable chart pattern exposes setter methods for configurable dimensions and accessor functions.

SSainathreddypotu@gmail.com
88% match
Loading thumbnail…

Act 6, Task 3 6

This scatter plot shows the relationship between horsepower and fuel efficiency (miles per gallon) for ten car models, with each point colored by the car’s region of origin (USA, Japan, or Europe). Built with D3 v7, the code loads the `cars.csv` file, uses `d3.scaleLinear` for both axes, and applies `d3.scaleOrdinal` with `d3.schemeCategory10` for the categorical color encoding. SVG circles are positioned via x/y scales, and labeled axes are generated with `d3.axisBottom` and `d3.axisLeft`.

AAnushaHyderaboeni@my.unt.edu
88% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight using a dataset of car names loaded from a CSV file. The chart renders as an SVG with D3.js v7, mapping horsepower to the x-axis and weight to the y-axis using linear scales. Each data point is drawn as a circle with a fixed radius, and axis labels are appended to clarify the variables. The visualization employs D3's `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the plot, with margins and dimensions set programmatically to produce a clean, reusable layout.

Rreddysushma994@gmail.com
87% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between model year and horsepower for a small set of cars, using steel-blue circles on a linear scale. Built as a reusable D3 chart function, it creates an SVG with axes labeled "Year" and "Horsepower", and the code employs `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to map data ranges. A dataset of five car entries, including years 2021–2023, is rendered with the chart function called on the document body, while a separate module offers a configurable version with setters for dimensions and margins.

Nnishanththouta16@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Fork of reusable scatter plot

This animated scatter plot displays the relationship between horsepower and miles per gallon across 20 car models from a CSV dataset, alternately swapping the x- and y-axes every two seconds. Built as a reusable D3.js v6 module, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `select` to render SVG circles with tooltips. A `setInterval` timer triggers re-rendering of the chart with swapped accessor functions, while axis labels update dynamically based on the current orientation.

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

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each red semi-transparent circle representing a vehicle. The code uses D3 v5’s `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to load data from the UCI Auto MPG dataset and render an SVG chart. Axes include tick marks and labels, while a title and rotated y-axis label are manually positioned. Filtering and data type conversion occur before rendering, matching the original example’s styling and layout.

AAlexandre Pinho
86% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes relationships in automobile performance data, comparing miles per gallon against vehicle attributes including weight, horsepower, displacement, and acceleration. Each point is colored using a plasma interpolator based on horsepower, and the x-axis automatically cycles through different attribute comparisons every three seconds. The visualization uses the reusable chart pattern from D3 v6, combining scaleLinear, extent, axisBottom, axisLeft, and transition-based animation. Data comes from a CarPerformance CSV dataset hosted on raw GitHub.

Ssowjanya
86% match