Scatter Plot usando D3.js

100%

Scatter Plot usando D3.js

✓ Published0🌍 Public

Last edited Sep 15, 2020

Created on Sep 15, 2020

This scatter plot displays the relationship between horsepower and acceleration for a dataset of cars, with each point representing a vehicle. The visualization uses D3.js v6 to create an SVG-based chart, employing `d3.scaleLinear` for both axes and `d3.axisLeft` and `d3.axisBottom` for tick marks. Data is loaded from a CSV file using `d3.csv` and parsed into numeric values. The circles are semi-transparent teal, with hover effects that increase opacity and add a stroke.

AI-generated description

Scatter Plot in D3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and acceleration for a dataset of cars. Each circle represents a car, with its x-position mapped to horsepower and y-position to acceleration using linear scales. The visualization is built with D3 v5, using SVG rendering and scaleLinear, axisBottom, and axisLeft components. The data is loaded from a CSV file on VizHub, and the code applies .nice() to smooth axis domains and includes formatted axis labels and a title.

Vvic126

86% match

Loading thumbnail…

Making a Scatterplot with D3

This example visualizes the relationship between acceleration and horsepower for cars using a scatterplot rendered as SVG. The code loads an auto-mpg CSV dataset via d3.csv, converts numeric fields, and scales the data with d3.scaleLinear. Axes are generated using d3.axisLeft and d3.axisBottom, with grid lines created by setting tickSize. The plot includes labeled axes, a title, and orange semi-transparent circles positioned using xScale and yScale based on each car’s acceleration and horsepower values.

AAloysius

86% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between acceleration and horsepower for cars from the auto-mpg dataset. D3’s scaleLinear, axisBottom, and axisLeft functions map the quantitative values, while circles are appended to an SVG container. The code loads CSV data via d3.csv, converts numeric fields, and uses margin-based layout with tick marks and axis labels. Red translucent circles reveal density, with axes formatted using d3.format and a title added manually.

Ccledevoute

85% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and acceleration for cars, with each circle representing a vehicle from the auto-mpg dataset. It demonstrates axis customization using d3.axisLeft and d3.axisBottom, including tick sizing, padding, and label styling. The code uses d3.scaleLinear with extent-based domains and nice() to set scales, while d3.csv loads data from a remote URL. SVG rendering shows semi-transparent steelblue circles, and the plot includes a title and axis labels with custom fonts and colors.

Sshanmango

85% match

Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between horsepower and acceleration for cars from the UCI Auto MPG dataset, with each circle representing an individual car. Built using D3 v6, the visualization employs scaleLinear for axes, axisBottom and axisLeft for ticks, and SVG circles with a green, semi-transparent fill. The code loads CSV data from a remote URL, parses numeric fields, and renders the chart with labeled axes and a title using D3’s selection and CSV modules.

Nnexus1058

85% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes automotive data, showing the relationship between horsepower and weight for a dataset of cars. The visualization uses a D3.js v5 implementation with SVG rendering to plot red, semi-transparent circles on a Cartesian coordinate system. The code leverages d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to construct the scales and axes, with gridlines extending across the plot area. Data is loaded via d3.csv from an external auto-mpg dataset, and custom axis labels and a graph title are added as SVG text elements.

Llanzosuarez

83% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and acceleration for various car models, with each red semi-transparent circle representing a data point from the auto-mpg dataset. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while removing the domain lines and adding styled labels and a title. The chart renders as an SVG and includes gridlines via tick lines, with data loaded asynchronously using `csv` from a VizHub-hosted URL.

Bbilal

83% match

Loading thumbnail…

Car Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing one vehicle. The SVG rendering uses D3 v5 scales, axes, and selections to map data values to screen positions. Axes are customized with tick lines and labels using `axisBottom`, `axisLeft`, and `scaleLinear`, while styling via CSS sets circle opacity and typography. The data originates from an external CSV file, processed by coercing numeric fields before rendering.

Nnoelmiranda

83% match