Fork of Interactive Cars Scatter plot

100%

Fork of Interactive Cars Scatter plot

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

Forked from Interactive Cars Scatter plot

This visualization displays a scatter plot of car horsepower against weight, with acceleration mapped to the radius of each circle. The plot uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and gridlines. A tooltip appears on mouseover, showing the car’s name, origin, and acceleration. The data is loaded from a CSV via `d3.csv` and rendered as SVG circles, with hover effects that change the circle’s fill color.

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 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.

Vvladvaculin

92% 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

91% 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. 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

90% 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

90% 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

89% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a collection of cars. The visualization uses red semi-transparent circles to represent individual data points, with axis labels and a title clarifying the chart’s purpose. The code loads data from the Auto MPG Data Set via `d3.csv`, then renders the chart as an SVG using D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs. Styling is applied through external CSS, and the axes include custom tick formatting and gridlines.

NNALLANATHAN

89% 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

89% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the Auto MPG dataset, with each red circle representing a vehicle. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes, while circles are appended via `selectAll` and `enter`. Data is loaded as CSV and parsed with numeric conversions. The SVG rendering includes custom axis labels and a title, styled through CSS with opacity and tick formatting.

GGerasimos Katsagannis

88% match