Untitled

100%

✓ Published0🌍 Public

Last edited Nov 26, 2021

Created on Nov 26, 2021

This interactive scatterplot displays the relationship between horsepower and weight for cars, with circles colored in a semi-transparent blue. Users can toggle checkboxes to switch the x-axis mapping from horsepower to a separate origin scale. The visualization uses D3.js v5 for data binding, scales, and axes, with data loaded from a CSV file via `d3.csv()`. The SVG rendering includes gridlines and axis labels, and jQuery handles the checkbox interactions that reassign the circle positions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This scatterplot uses the D3.js library to visualize the relationship between horsepower and weight for a collection of cars from the UCI Machine Learning Repository’s Auto MPG data set. Each red, semi-transparent circle represents a single car model. The D3 code loads the CSV data, applies linear scales to both axes, and renders the points within an SVG, while also adding labeled axes and a title to the chart.

Jjhcliu19

89% match

Loading thumbnail…

scatter plot

This scatter plot displays the relationship between horsepower and weight for cars, using red semi-transparent circles scaled along linear axes. The visualization loads data from a remote CSV file and renders it as an SVG, with D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs generating gridlines and tick marks. Axis labels and a title clarify the chart, while margins and redundant axis titles structure the layout. The code imports specific functions from D3 v5 and applies CSS styling for opacity and typography.

Zzhangfa

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

88% match

Loading thumbnail…

Car Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each vehicle represented as a semi-transparent blue circle. The visualization uses D3.js (v5) with SVG rendering, employing `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to construct the axes, while `d3.csv` loads the auto-mpg dataset. Hovering over a circle changes its color and opacity, and the chart includes labeled axes and a title.

SSam Lite

87% match

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

87% match

Loading thumbnail…

Untitled

This scatter plot shows the relationship between vehicle weight and horsepower, using data loaded from a CSV file. Each car is represented as a semi-transparent circle, positioned on a Cartesian grid with linear scales on both axes, and surrounded by grid lines and axis labels. The visualization is built with React and rendered as an SVG using D3 v6, leveraging functions like `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart, with styling handled in CSS.

RReekMajumder

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

87% match

Loading thumbnail…

Scatter Plot!

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses red semi-transparent circles positioned on a Cartesian grid with labeled axes and gridlines. The code leverages D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` to load data, scale quantitative values, and render SVG elements. Data is fetched from a VizHub-hosted CSV file and parsed before being joined to circle elements using D3’s enter selection.

SSuzizaher

87% match