Skip to main content
SimilarExport ZIP
100%

Scatterplot.js

✓ Published0🌍 Public
Ddmb4ur
Last edited Jan 14, 2022
Created on Jan 13, 2022

This scatterplot visualizes the relationship between engine cylinders and horsepower for cars, using data from the auto-mpg dataset. The SVG rendering uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft with tick lines creating a grid. Circle elements represent data points, with a title noting the top 10 most populous countries despite the automotive data. The code loads CSV data via d3.csv, converts numeric fields, and includes axis labels and formatting with d3.format.

AI-generated description

This bar chart shows population fo the top 10 most populous countries. The data come from the year 2018 estimate in United Nations World Population Prospects 2017.

MIT Licensed

Similar vizzes

Loading thumbnail…

car scatter plot

This scatter plot visualizes the relationship between engine cylinders and horsepower for a dataset of automobiles. The D3 v5 code loads CSV data from an external URL, scales the values linearly, and renders each car as a semi-transparent steelblue circle. Customized axes include tick formatting and labels for both the x-axis (cylinders) and y-axis (horsepower), with a title displayed at the top. The SVG rendering approach draws the circles within a margin-adjusted group, using D3’s scaleLinear, axisBottom, and axisLeft APIs.

Gginnyching
92% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes relationships between engine cylinders and horsepower in the auto-mpg dataset, with each vehicle represented as a circle. The code uses D3 v5’s `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `axisLeft` and `axisBottom` to render gridlines and ticks. Data is loaded via `csv` from a remote URL, with numeric fields parsed before plotting. SVG circles are positioned using the scales, and axis labels are customized with formatting and styling.

Aadvaitkulkarni08
91% match
Loading thumbnail…

Cars scatter plot with D3.js!

This scatter plot visualizes the relationship between engine cylinders and horsepower for a dataset of cars, with each point representing a vehicle. The D3.js code uses `scaleLinear` to map the data domains to pixel coordinates and renders circles via SVG. Axes are generated with `axisBottom` and `axisLeft`, and gridlines are created through tick sizes. The chart loads its data from a CSV file using `csv()` from D3 v5.

CCharlotte1891
91% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between engine horsepower and cylinder count for various car models, with each circle representing a vehicle from the auto-mpg dataset. The visualization uses D3 v5 to load CSV data via `d3.csv`, scales the x-axis with `scaleLinear` and the y-axis with `scalePoint`, and renders circles as SVG elements. Axes are generated using `axisBottom` and `axisLeft`, with grid lines and tick styling applied through CSS classes. The chart is rendered in an SVG container and includes labeled titles and axis annotations.

Kkiyahw1
90% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between engine cylinders and miles per gallon (mpg) for various automobile models, sourced from an auto-mpg CSV dataset. The code uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, with circles rendered via SVG. The chart includes custom axis tick formatting (e.g., abbreviating large numbers) and styling through CSS, demonstrating how to adapt D3’s default axes for a polished presentation.

ZZhengyan Yu
88% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays automobiles from the auto-mpg dataset, mapping engine cylinders on the x-axis against horsepower on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes and `axisBottom`/`axisLeft` with tick lines. Margins and inner dimensions position the plot area, while circles are appended to represent individual car models. The data is loaded via `csv` from a VizHub-hosted URL and numeric fields are coerced before rendering. Axes labels and a title clarify the chart’s content.

DDhaval Potdar
88% match
Loading thumbnail…

Cars scattaplot!

This scatterplot displays automobile data from the auto-mpg dataset, plotting cylinders on the x-axis against horsepower on the y-axis. Each data point is rendered as a blue SVG circle using D3 v5’s selection and data-join methods. The visualization employs d3.scaleLinear and d3.extent to compute domains, with d3.axisBottom and d3.axisLeft generating gridlines. Axis labels and a title are manually added as SVG text elements, with custom tick formatting via d3.format.

AAndrew Fletcher
88% match
Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between engine displacement and horsepower for a collection of cars, with each point representing a vehicle. The data comes from the UCI Machine Learning Repository's Auto MPG dataset. Built with D3 v6, the visualization uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and SVG circles to plot the points. The chart includes axis labels and a title, with the data parsed from CSV and rendered with a clean, minimal styling.

Ccarbuncle-3djs
88% match