Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published1🌍 Public
JJoseph Burns
Last edited Sep 4, 2019
Created on Aug 29, 2019
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot

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.

MMatan
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
91% 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
91% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between car weight and fuel efficiency (MPG) using the Auto MPG dataset from UCI. Each circle represents a car, positioned by weight on the x-axis and miles per gallon on the y-axis, with radius proportional to weight. The code uses d3.csv to load data, d3.scaleLinear for scales, and d3.axisLeft and d3.axisBottom to render axes with gridlines. SVG circles are drawn with fixed blue fill and 30% opacity, while axis labels and tick formatting come from D3 v5’s selection and format utilities.

Mmcorace
91% 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
91% 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
91% match
Loading thumbnail…

Cars ScatterPlot

This scatterplot visualizes the relationship between vehicle weight and miles per gallon (mpg) for a dataset of cars from the auto-mpg CSV file. Using D3.js v5, the chart employs `scaleLinear` functions to map quantitative attributes to SVG coordinates, with `axisBottom` and `axisLeft` to render labeled axes on a blue background. Each car is represented as a semi-transparent red circle, positioned via the `cx` and `cy` attributes. The code loads data with `csv`, converts numeric fields, and applies margins and ticks to structure the plot.

TTebid Quinsy
90% match