HTML Starter

100%

✓ Published1🌍 Public

Last edited Jun 14, 2020

Created on Jun 14, 2020

This example displays a scatterplot of automobile horsepower and weight from the auto-mpg dataset, with each point representing a vehicle. The visualization uses D3 v5’s `scaleLinear` and `extent` to map data to SVG coordinates, while `axisLeft` and `axisBottom` generate gridlines and tick marks. Circles are appended to the SVG via data joins, styled with opacity, and sized at a fixed radius of 10 pixels. The axis labels and title are added as SVG text elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example visualizes automobile data by plotting a scatterplot of weight against horsepower, with each vehicle represented by a semi-transparent red circle rendered in SVG. The chart uses D3 v5 scales, axes, and the `csv` loader to fetch and parse the auto-mpg dataset from an external URL. It applies linear scales for both variables, adds gridlines via tick sizing, and includes a title within the chart area. The visualization is built within a React and D3 framework.

CChika

92% match

Loading thumbnail…

Basic Scatter Plot

This example shows a scatter plot of car weight against horsepower, with each circle representing a vehicle and axes labeled accordingly. The visualization uses D3 v5's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs to map data values to SVG coordinates, while `csv` loads the auto-mpg dataset from a remote URL. Gridlines are drawn via tick sizes, and axes labels and a title are appended as SVG text elements.

Ggmille22

89% match

Loading thumbnail…

HTML Starter

This example creates a static scatter plot of automotive data, charting horsepower against weight. The visualization uses D3 v6's scaleLinear, axisBottom, and axisLeft APIs to render axes and plot circles for each car model. Data is loaded remotely from a CSV file hosted on vizhub.com, with margins and dimensions calculated from the SVG element. The plot includes labeled axes, a titled heading, and red semi-transparent circles, all rendered as SVG.

Nnouralkhoury

89% match

Loading thumbnail…

HTML Starter

Nnouralkhoury

89% match

Loading thumbnail…

HTML Starter

Nnouralkhoury

89% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models from the auto-mpg dataset. The D3.js code uses `scaleLinear` for both axes, with `axisBottom` and `axisLeft` for tick marks and gridlines. Data is loaded via `csv()` from a remote URL, and each vehicle is rendered as a circle with a fixed radius. Axis labels and a title are added as SVG text elements, with styling defined in CSS for the tick marks and label fonts.

CChip

88% match

Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point representing a vehicle. The D3 v5 code uses `scaleLinear` and `extent` to map data values to pixel coordinates, while `axisBottom` and `axisLeft` render labeled axes with gridlines via `tickSize`. Circles are appended to an SVG group, and the title text is positioned manually. The visualization demonstrates custom axis formatting with `format('.3s')` and removes default domain lines for a cleaner appearance.

Ppei9223

88% match

Loading thumbnail…

D3 Starter - Creating Cars scatterplot

This scatterplot charts car weight against horsepower, with each car represented as a translucent red circle. The data is loaded from the Plotly auto-mpg dataset and parsed as numeric values before rendering. The visualization uses D3 v5’s `select`, `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, `format`, and `extent` APIs to construct the SVG chart, including labeled axes and a title. Axis grids and tick marks are styled via CSS, while the plot area is sized using computed margins.

Mmaxthamt

88% match