散点图

100%

✓ Published1🌍 Public

Last edited Dec 19, 2020

Created on Dec 19, 2020

This scatter plot visualizes the relationship between vehicle weight and cylinder count using data from the auto-mpg dataset. The visualization employs d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and renders data points as SVG circles with a steelblue fill. The chart includes axis labels for population and weight, plus a title, with tick formatting using d3.format to abbreviate large numbers. The code loads CSV data via d3.csv and positions circles using the scaled x and y values, with grid lines extending across the plot area.

AI-generated description

A 散点图 of d3js. HTML page demonstrating use of CSS and JavaScript

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between vehicle cylinders and weight, with each circle representing a car from the auto-mpg dataset. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for gridlines and ticks, and SVG circles for the data points. The code loads the dataset via d3.csv from a VizHub URL, converts string values to numbers, and applies margins to position the plot within the 960x500 SVG canvas. The title and axis label provide context for the chart.

LLonwabo11

91% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. Circles are plotted on a linear scale for both axes, with semi-transparent steelblue fill to reveal overlapping points. The visualization includes labeled axes, tick marks that extend across the plot, and a title, all rendered as SVG. The code uses D3 v5 methods including `csv` for data loading, `scaleLinear` for scales, `axisBottom` and `axisLeft` for axes, and `selectAll` with data joins to create the circles.

MMartin Christensen

87% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between vehicle horsepower and weight, with each circle representing a data point from the auto-mpg dataset. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` APIs to map the data to SVG coordinates within a 960×500 canvas. Data is loaded asynchronously via `csv()` from a remote source, with numeric fields parsed before rendering. The plot includes labeled axes with tick marks spanning the full plot height and width, though the axis labels and titles are incomplete in the code.

LLonwabo11

86% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot from the UCI Auto MPG dataset displays the relationship between vehicle weight and acceleration. Using the auto-mpg.csv data loaded via d3.csv, the visualization employs d3.scaleLinear for both axes and renders circles as SVG elements with a fixed radius. Gridlines are generated through axisBottom and axisLeft with tickSize settings, while custom axis labels and a title are added as SVG text elements. The chart applies a steel-blue fill with 0.5 opacity to indicate overlapping points.

Yyktan89

85% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between MPG and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set, with each circle representing a vehicle. The chart uses a blue, semi-transparent point encoding to reveal density and patterns across the axes, labeled “MPG” and “Weight.” Built with D3 v5, the code employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick rendering, and `csv` to load and parse the data. The SVG rendering includes custom margins, tick lines, and axis labels styled via CSS.

Xxhoumba

85% match

Loading thumbnail…

Scatter Plot ++

This scatter plot visualizes the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. The D3.js (v5) code uses `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, with gridlines drawn via negative tick sizes. It renders semi-transparent steel-blue circles via SVG, with categorical labels for the axes and title. The visualization applies the `extent` function for domain scaling and parses the CSV data to numeric values before rendering.

CChocoOrange

85% match

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

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

85% match