HorsePower vs Weight

100%

HorsePower vs Weight

✓ Published1🌍 Public

Last edited Jun 24, 2022

Created on Jun 24, 2022

This scatterplot shows the relationship between horsepower and weight for a set of cars, with each point representing a vehicle. The chart uses D3.js v5 to render an SVG with axes, gridlines via tick marks, and semi-transparent circles. Data is loaded from a CSV file using the `csv` function, then processed and scaled with `scaleLinear` and `extent`. Axis functions `axisBottom` and `axisLeft` create the labeled scales, while text elements add a title, axis labels, and a legend indicating a "Target range" with a green rectangle.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars: Horsepower vs Weight

This scatterplot displays the relationship between horsepower and weight for a dataset of cars. Each circle represents a car, positioned along the horizontal axis for horsepower and the vertical axis for weight, with a steelblue fill and partial opacity. The chart includes labeled axes and a title, built using the D3 v5 library. It loads data from an external CSV file and renders the visualization as SVG, using D3's linear scales, axes, and selection APIs.

JJacob van Lingen

94% match

Loading thumbnail…

Cars Scatter Plot: Horsepower vs. Weight

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. Each blue semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis, revealing a positive correlation between the two variables. The visualization uses D3 v5 APIs such as `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to load data, scale the axes, and render the SVG plot. Axis labels and a title are added, with gridlines provided via tick sizes, all styled through external CSS.

Jjblaskovich

90% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a vehicle. The chart uses D3 v5’s `scaleLinear` and `extent` to map data values to pixel coordinates, while `axisBottom` and `axisLeft` render labeled axes with tick marks. Data comes from a CSV file loaded via `csv`, and the SVG rendering applies a steelblue fill with opacity to the circles. The visualization includes a title, axis labels, and a margin-based layout to position the plot area.

Cceresfin

89% match

Loading thumbnail…

cars scatter plot

This scatter plot shows the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The visualization uses D3.js (v5) to load CSV data and render an SVG chart with linear scales for both axes. The code employs `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` functions to construct the plot, with circles colored red and semi-transparent. Axis labels, a title, and grid lines are included via D3 axis methods and appended text elements.

Jjingwg3@163.com

89% match

Loading thumbnail…

Cars

This scatterplot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The axes use linear scales, and the chart includes axis labels for horsepower and weight. The visualization is built with D3.js, using the `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct the scales and axes. Data is loaded as CSV from a remote URL, and the SVG circles are rendered with a semi-transparent steelblue fill. The code also formats tick labels using D3's `format` function.

Ss-janibekova

89% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3 v5 to load CSV data and render an SVG with linear scales, axes, and semi-transparent red circles. It applies `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to map values, while axis labels and a title are added via SVG text elements. The chart employs a clean grid layout with margins and tick styling from the accompanying stylesheet.

MMichał Szumnarski

89% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between vehicle weight and horsepower for a dataset of cars. Each semi-transparent steel-blue circle represents a single car model, with the chart titled "Horsepower vs Weight." The visualization uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to compute scales and render SVG axes. Data is loaded via `csv()` from the auto-mpg dataset, with numeric fields parsed before rendering. Grid lines are created through axis tick sizing, and axis labels are added as SVG text elements.

Aadvaitkulkarni08

89% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for a collection of cars, with each car represented as a red, semi-transparent circle. The visualization uses D3.js (v6) to load the auto-mpg dataset via `d3.csv`, parse numerical values, and render the chart as an SVG. Linear scales from `d3.scaleLinear` map weight and horsepower to x and y coordinates, while `d3.axisBottom` and `d3.axisLeft` generate the axes with gridlines. Axis labels and a title are added as text elements, and CSS styles the circles, ticks, and labels for visual clarity.

MMajaha21

89% match