Skip to main content
SimilarExport ZIP
100%

Scatter Plot

✓ Published0🌍 Public
Ssaikrishnabussa
Last edited Jul 17, 2023
Created on Jul 17, 2023
Forked from HTML Starter

This scatter plot displays department scores across ten categories, with each circle’s position encoding its value on a linear y-axis and a categorical x-axis. The visualization uses a band scale for departments and a linear scale for scores, rendering circles as SVG elements. It relies on D3 v6’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs, with the data hardcoded as an array of department–score pairs. Axis labels are rotated for readability, and the chart includes a title and styled axes.

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

This scatter plot displays department scores across ten categories, with each circle’s position encoding its value on a linear y-axis and a categorical x-axis. The visualization uses a band scale for departments and a linear scale for scores, rendering circles as SVG elements. It relies on D3 v6’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs, with the data hardcoded as an array of department–score pairs. Axis labels are rotated for readability, and the chart includes a title and styled axes.

Ssaikrishnabussa
100% match
Loading thumbnail…

Scatter Plot Example

This scatter plot visualizes a dataset of x and y coordinates as colored points on a linear scale. The code uses D3.js v6 to create an SVG rendering with x and y axes, and colors each circle based on its index. The visualization demonstrates basic scatter plot construction with d3.scaleLinear for mapping data values to screen coordinates, and d3.axisBottom and d3.axisLeft for displaying the axes. Labels are added to both axes to indicate the plotted dimensions.

BBhavanaGIrni
76% match
Loading thumbnail…

Scatter Plot

This scatter plot displays ten randomly generated data points distributed across a two-dimensional plane, with each circle’s position determined by linear scales mapping the data range to pixel coordinates and its radius scaled proportionally. The visualization uses D3 v4 to create an SVG, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The code applies `d3.scaleLinear` for both x and y positioning, `d3.scaleOrdinal` with `d3.schemeCategory20` for coloring each circle, and a separate radius scale. The data originates from `d3.range(10).map(Math.random)`, producing a simple, uncluttered chart that highlights basic scatter plot construction without external data files.

BBerengerCunillera
75% match
Loading thumbnail…

Making a Scatter Plot

A scatter plot displays final power scores for ten teams, with each team’s score plotted along the x-axis and team names along the y-axis. The chart uses a linear scale for scores and a point scale for categorical team labels, with grid lines extending from both axes. D3 v5’s `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` methods render the SVG, while styled circles, a title, and an axis label clarify the data.

HHirsh Gupta
75% match
Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange
75% match
Loading thumbnail…

D3: Drawing a Scatter Plot

This example displays a basic scatter plot of ten data points, each represented by a circle and a red text label showing its coordinates. The visualization uses D3.js v7 to append SVG circles and text elements to the document body. Circle radii are calculated as the square root of the difference between the plot height and the y-coordinate, creating a size variation tied to vertical position. The chart is drawn with a 500 by 100 pixel viewport, using the data array directly as the source for positioning.

MMarisa Tania
75% match
Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang
74% match
Loading thumbnail…

scatter plot

A scatter plot displays population figures for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering SVG circles with a steelblue fill. Data comes from a CSV file, with populations multiplied by 1000 and formatted using `format('.3s')` to show billions. Gridlines extend across the plot, and axis labels are added via appended SVG text elements.

Llinkshady
74% match