Scatterplot

100%

✓ Published0🌍 Public

Last edited Mar 26, 2025

Created on Mar 26, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between horsepower and model year for automobile data loaded from an external CSV file. The code uses D3 v5’s `csv` method to fetch the dataset, then applies `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes on an SVG renderer. Circular marks are appended via `selectAll` and `enter` to display each data point, with gridlines generated by tick sizes. A title and axis labels are added using SVG `text` elements.

JJames Malvern

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

86% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between vehicle weight and horsepower for a dataset of cars, with each point representing an individual car model. The visualization uses D3 v5’s `csv` loader to fetch data from an external URL, then applies `scaleLinear` and `extent` to map the variables to SVG coordinates. Axes are rendered using `axisBottom` and `axisLeft`, with tick marks extending across the plot area. The SVG circles are styled with red fill and opacity, and axis labels and a title are added via SVG text elements.

NNkwachi Abel

85% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each circle representing a vehicle. The chart uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while `extent` determines the domain from the data. The SVG rendering includes grid lines via tick sizes and a rotated y-axis label. Data comes from the auto-mpg dataset loaded with `csv`, and parsed numeric values feed the scales. Circles are rendered semi-transparent red with a fixed radius, and margins position the chart within a 960x500 viewport.

GGeolffrey S Mena

85% match

Loading thumbnail…

Activity-6_Question-3

This scatter plot visualizes vehicle attributes, displaying horsepower on the x-axis and engine size on the y-axis for a dataset of car models from various years. Each circle represents a vehicle, with its color indicating the model year, differentiated through a legend at the right. The visualization is rendered as an SVG using the D3.js library, specifically utilizing `scaleLinear` for axis scaling and `scaleOrdinal` with the `schemeDark2` palette for color encoding. The code uses D3's `select`, `axisBottom`, and `axisLeft` functions to construct the chart within a gray inner rectangle.

Ccharanshiva769@gmail.com

85% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each point representing a vehicle. The chart uses a red, semi-transparent circle for each data point, and includes labeled axes for horsepower and weight. Built with D3 v5, the code loads the auto-mpg dataset from a CSV file, scales the data using `scaleLinear`, and renders the visualization as an SVG. The axes are configured with `axisBottom` and `axisLeft`, and the plot is styled with custom CSS for tick marks, labels, and the title.

LLonwabo11

85% match

Loading thumbnail…

CARS SCUPUBOPD

This example visualizes the relationship between horsepower, acceleration, weight, and model year for a dataset of automobiles. The scatterplot positions each car by its acceleration on the x-axis and horsepower on the y-axis, with the radius of each point encoding the vehicle’s model year and the opacity and color reflecting weight. The visualization uses D3 v5 to load the CSV data, apply linear scales, and render the SVG circles. It also includes axis labels and tick marks, with the color of each circle computed using a d3 color constructor.

Mmoowaffles

85% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, sourced from the auto-mpg dataset. Each red semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis. The D3 v5 code uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for labeled grid lines, and appends circles via `selectAll('circle').data().enter()`. The SVG output includes axis labels and a title, with styling controlled by external CSS.

LLonwabo11

85% match