Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
Nnishanththouta16@gmail.com
Last edited Apr 1, 2025
Created on Apr 1, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example displays a scatter plot of automobile data, plotting engine horsepower against model year for a dataset of vehicles. The visualization uses an SVG rendering approach, with D3 version 3’s `scaleLinear` and `d3.extent` to map the year and horsepower values to pixel coordinates. Circles represent individual data points, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and the chart includes labeled axes for both variables. The code structures the plot within a reusable `scatterPlot` function, called with the dataset directly on the body element.

Nnishanththouta16@gmail.com
87% 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
87% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes vintage car data, mapping engine size against horsepower with D3’s `scaleLinear`, `axisLeft`, and `axisBottom`. The visualization animates by cycling through four variables—car age, mileage, engine size, and horsepower—on the x-axis every two seconds using `setInterval`. Each point is rendered as an SVG circle with a fixed radius, and the chart updates the x-axis domain and circles accordingly. Data is loaded asynchronously from a CSV via `d3.csv` and parsed into numeric values.

MM
87% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

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.

Eeeshani.boyapati@gmail.com
87% 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
86% match
Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between vehicle model year and horsepower. Each circle represents a car, with its x-position determined by the year and y-position by its horsepower rating. The visualization builds an SVG chart using D3.js v7, employing `d3.csv` to load the dataset, `d3.scaleLinear` for both axes, and `d3.extent` and `d3.max` to compute the data domains. Hovering over a dot changes its fill color to orange, while axes are rendered with `d3.axisLeft` and `d3.axisBottom`. Data comes from a car models dataset on GitHub.

Nnishanththouta16@gmail.com
86% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes car specifications from a CSV dataset, plotting engine size against horsepower with circle size encoding mileage and color encoding car age using `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart is constructed with `d3.scaleLinear` for x and y axes, `d3.axisBottom` and `d3.axisLeft` for scales, and `d3.csv` for asynchronous data loading. A separate `scatterPlot.js` module defines a reusable chart factory with configurable accessors for dimensions, margins, and radius, following the "Towards Reusable Charts" pattern.

MM
85% 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
85% match