Skip to main content
SimilarExport ZIP
100%

Interactive Cars Scatter plot

✓ Published1🌍 Public
Vvladvaculin
Last edited Aug 28, 2019
Created on Aug 28, 2019

This interactive scatter plot visualizes the relationship between horsepower and weight for automobiles, with circle radius encoding acceleration. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes and grid lines. Data loads from a CSV file via `csv()`, and hovering over a circle reveals a tooltip displaying the car name, origin, and acceleration value. The chart includes styled axis labels and a title, with circles becoming lighter on hover.

AI-generated description

Hover to see the details.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Cars Scatter plot

This interactive scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Each circle's size encodes the car's acceleration, with larger circles representing faster acceleration. The visualization uses D3 v5's scaleLinear, axisBottom, axisLeft, and csv functions to parse data and render SVG elements. Hovering over a circle displays a tooltip with the car's name, origin, and acceleration value. The chart includes labeled axes and a title, with gridlines created via tickSize on the axes.

Vvladvaculin
97% match
Loading thumbnail…

Interactive Cars Scatter plot

This interactive scatter plot visualizes the relationship between vehicle weight and horsepower, with each circle’s radius encoding acceleration. The data originates from the auto-mpg dataset loaded via `d3.csv`. Using D3 v5 with SVG rendering, the code employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes and gridlines. Hovering over a circle reveals a tooltip via `mouseover` and `mousemove` events, displaying the car’s name, origin, and acceleration value. The plot includes axis labels and a title.

Vvladvaculin
97% match
Loading thumbnail…

Interactive Cars Scatter plot

This interactive scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with circle size encoding acceleration. Hovering over any point reveals a tooltip displaying the car’s name, origin, and acceleration value. The visualization uses D3 v5’s `scaleLinear` for axes and radius mapping, `axisLeft` and `axisBottom` for gridlines, and SVG circles rendered by `d3.csv`. The chart includes labeled axes, a title, and hover-driven `mouseover`/`mousemove` events for dynamic data inspection.

Vvladvaculin
97% match
Loading thumbnail…

Interactive Cars Scatter plot

This interactive scatter plot visualizes the relationship between horsepower and weight for various car models, with point size mapped to acceleration rate. Built with D3.js v5 and rendered as SVG, the visualization employs linear scales for both axes and encodes acceleration through a radius transformation. Hovering over any data point reveals its acceleration value via a custom tooltip. The plot includes gridlines, axis labels, and a title, with data sourced from the auto-mpg dataset and loaded via CSV.

Vvladvaculin
95% match
Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between vehicle weight and horsepower, with each circle's radius encoding acceleration. Based on the auto-mpg dataset, the plot uses D3 v5's `scaleLinear` for position and size scaling, along with `axisBottom` and `axisLeft` to render grid lines and tick marks. Circles are appended as SVG elements with opacity and hover effects. A custom tooltip displays acceleration values on mouseover, while axis labels and a title clarify the chart’s meaning, all styled through external CSS.

Vvladvaculin
93% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct axes with gridlines, while SVG circles are positioned using the scaled x and y values. Data is loaded asynchronously from a CSV file via `d3.csv`, and styling is applied through external CSS for tick text, axis labels, and the semi-transparent red circles.

Nntds12
92% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the quantitative scales and render axes with gridlines. Data is loaded via `csv` from an external auto-mpg dataset and drawn as SVG circles with opacity and hover effects. The code also applies `extent` and `nice` to domain calculations, and styles the visualization with custom CSS for interactive feedback.

AAmar Nath Yogi
92% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a set of cars, with each circle representing a vehicle. The visualization uses D3.js v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data values to pixel coordinates and render SVG axes with gridlines. Data is loaded from a CSV file via the `csv` function, parsed into numeric fields, and drawn as semi-transparent purple circles. The chart includes axis labels and a title, with margins calculated from the SVG’s dimensions.

WWhitney Hung
92% match