Skip to main content
SimilarExport ZIP
100%

Scatterplot

✓ Published2🌍 Public
MMatan
Last edited Nov 8, 2020
Created on Nov 8, 2020
Forked from Bar chart

This scatterplot displays the relationship between vehicle weight and fuel efficiency (MPG) using the auto-mpg dataset loaded via d3.csv. The visualization uses D3 v6 scaleLinear functions to map data values to SVG coordinates, with axisBottom and axisLeft generating labeled axes. Circles are rendered through SVG elements with d3.selectAll and data joins, styled with semi-transparent steelblue fills. The chart includes custom axis label formatting via d3.format and margin-based layout transforms within a React-free HTML page.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

A scatter plot displays the relationship between vehicle weight and fuel efficiency (mpg) using data from the auto-mpg.csv dataset. The visualization renders circles for each car, positioned by linear scales created with d3.scaleLinear, and uses d3.axisBottom and d3.axisLeft for labeled axes. SVG elements are drawn via D3 v5 selections, with the chart’s styling handled in CSS. The code also parses numeric fields from the CSV and includes title, explanation, and source text within the SVG.

JJoseph Burns
92% match
Loading thumbnail…

Car's Scatter Plot

This scatter plot shows the relationship between vehicle weight and fuel efficiency (MPG) for a dataset of cars, with each red circle representing an individual car model. The visualization uses D3.js v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to SVG coordinates and render labeled axes with gridlines. Data is loaded asynchronously via `csv` from a remote file, then parsed into numeric values before being drawn to the SVG canvas. The chart includes a title and axis labels, with circles having partial opacity to reveal overlapping points.

MModalMBS
91% match
Loading thumbnail…

scatterPlotD3

This scatter plot visualizes the relationship between car fuel economy (mpg) and weight, with each circle representing a vehicle. The chart uses D3 v7 to load CSV data from a GitHub gist, then maps the data points using d3.scaleLinear for both axes. SVG circles are positioned via the x and y scales, with axis labels and a title rendered through d3.axisBottom and d3.axisLeft. The visualization highlights how heavier cars tend to have lower mpg ratings, demonstrating a clear negative correlation.

Ccwb314159@gmail.com
89% match
Loading thumbnail…

Basic Scatterplot

This scatterplot displays the relationship between car fuel efficiency (MPG) and weight using data from the UCI Auto MPG dataset, rendered as green semi-transparent circles on an SVG canvas. It shows how heavier vehicles tend to have lower miles per gallon. The visualization uses D3 v6 methods including `csv` for data loading, `scaleLinear` for both axes, and `axisLeft`/`axisBottom` for grid-lined ticks. Margins, custom tick formatting, and axis labels are configured in JavaScript, with styling applied via CSS classes.

KKainsli
88% match
Loading thumbnail…

Auto MPG Summary

This scatterplot visualizes the relationship between fuel efficiency (mpg) and vehicle weight for a dataset of cars. Each circle represents a car, with its position determined by its mpg and weight values. The visualization uses D3 v5 to load data from a CSV file and render SVG circles. It employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.extent` to compute scale domains. Gridlines are created using negative tick sizes, and axis labels are rotated for clarity.

Bbukbukbukka
88% match
Loading thumbnail…

Cars Plot

This scatter plot visualizes the relationship between vehicle weight and fuel efficiency (MPG) using data from the UCI Machine Learning Repository’s Auto MPG dataset. It uses D3.js with an SVG rendering, where each circle represents a car, with position determined by linear scales for both axes. The code employs `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` for scaling and axes, while `csv()` loads the external dataset. Axis labels and a title are added via SVG text elements, with circles styled in translucent red.

CCaleb
88% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between car weight and fuel efficiency (mpg) using data from the UCI Machine Learning Repository's Auto MPG dataset. Each red circle represents a car, plotted with d3.scaleLinear scales for both axes, which are rendered using d3.axisBottom and d3.axisLeft with gridlines. The visualization is built with D3 v5, using selection and data binding to append circles to an SVG, while styling is applied through CSS for opacity and font sizes.

Nnikeshkv
88% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for automobiles from the auto-mpg dataset, with each point representing a vehicle. The code uses d3.csv to load the data and d3.scaleLinear to map the values to SVG coordinates, while d3.axisBottom and d3.axisLeft generate the axes with formatted ticks. Circles are appended to the SVG container with a steelblue fill and 0.5 opacity. The chart includes a title and axis labels, with margins set around the plotting area to accommodate the axes.

Aalisha-zemoso
87% match