Skip to main content
SimilarExport ZIP
100%

Cars numeric scatter plot with D3.js !

✓ Published1🌍 Public
OOfer Calvo
Last edited Jan 25, 2020
Created on Jan 25, 2020

A scatter plot of automobile data compares horsepower (x-axis) against weight (y-axis). It renders circles for each car model using D3.js v5. The visualization sources data from a CSV file containing the UCI Machine Learning Repository Auto MPG dataset. The code utilizes `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `format` functions to construct the SVG chart, with red, semi-transparent circles and labeled axes.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository data sets.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Scatter Plot with D3.js!

This scatter plot visualizes the relationship between horsepower and weight for cars in the UCI Machine Learning Repository’s Auto MPG dataset. Using React and D3.js, the code calls `csv` to load data and `scaleLinear`, `axisLeft`, `axisBottom`, `extent`, and `format` to render axes and circles as SVG elements. The chart includes labeled axes, gridlines via tick sizes, and semitransparent red circles, with a title displayed above the plot.

Fforcox43
92% match
Loading thumbnail…

Cars Scatter Plots

This interactive scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository’s Auto MPG Data Set. It uses D3.js v5 with SVG rendering, mapping each car to a semi-transparent red circle positioned via `d3.scaleLinear` and `d3.extent`. The axes are generated with `d3.axisLeft` and `d3.axisBottom`, featuring custom tick sizes and labels. Data is loaded as CSV and parsed for numeric fields before rendering.

EecoBela
91% match
Loading thumbnail…

Cars Scatter Plot.js

This example displays a scatter plot of automobile data, mapping horsepower on the x-axis against weight on the y-axis. Each point represents a car model, rendered as a translucent blue circle with a fixed radius. The visualization uses D3.js v5, employing `scaleLinear` for both axes and `extent` to compute the domains. The SVG output includes gridlines generated by `axisLeft` and `axisBottom`, with the resulting data loaded from a local CSV file (auto-mpg.csv) covering vehicle specifications.

Dddperdue
91% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a car model. Built with D3.js v5, it renders as an SVG using the `select` and `csv` helpers to load data from the UCI Auto MPG dataset. The visualization employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while circles are positioned using the scaled x and y values. The chart includes axis labels and a title, with styling applied via the included CSS.

Jjsong
91% match
Loading thumbnail…

Cars Scatter Plot with D3.js!

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, loaded via `d3.csv` from VizHub. Using D3 v6, the code employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to an SVG canvas, with circles styled for transparency. Custom axis tick formatting via `d3.format` and rotated labels enhance readability, while margins and explicit width/height attributes position the chart. The rendering uses SVG elements appended dynamically through D3 selections.

LLidiamir
91% match
Loading thumbnail…

Cars Scatter Plot with D3.js

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The SVG rendering uses D3.js v5 scaleLinear functions to map data values to screen coordinates, while axisBottom and axisLeft generate the labeled axes with custom tick formatting. Data loads asynchronously via csv(), with a brief transition from the same library’s styling. The chart encodes the two continuous variables directly, using opacity-red circles to reveal density patterns.

Ssiddharth171
91% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car based on its weight and horsepower. The chart uses red, semi-transparent circles to reveal overlapping points, with axes and labels styled via CSS. Built with D3 v5, the code employs `d3.csv` to load remote data, `d3.scaleLinear` for scaling, and `d3.axisLeft` and `d3.axisBottom` to render the axis ticks and labels in SVG.

LLonwabo11
91% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars in the Auto MPG dataset from the UCI Machine Learning Repository. Using D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom`, it maps each car to a semi-transparent red circle on an SVG canvas. The code loads CSV data via `csv`, parses numeric fields, and renders axes with tick marks and custom labels. The visualization omits axis domains and uses a fixed circle radius to emphasize data density.

Ssaifsre
91% match