Scatter Plot with d3.js

100%

Scatter Plot with d3.js

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 21, 2023

A scatter plot displays five sample data points with quantitative x and y values, rendered as steelblue circles. The visualization uses D3.js v6 to create an SVG chart with linear scales, axes, and labels. The code loads D3 from UNPKG, selects the chart container via `d3.select`, and builds the visualization using `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG circle elements. It also demonstrates importing from an ES6 module, showing a "Hello VizHub!" message.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter Plot with d3.js

This example demonstrates a reusable scatter plot function built with D3 v6, rendered as SVG. It maps quantitative x and y values to positions using `d3.scaleLinear` and draws circles as data points, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The code uses the D3 selection and enter-append pattern to bind sample data, and includes labels for both axes. The plot is encapsulated within a `createScatterPlot` function, allowing it to be called with custom data and dimensions. Loading D3 via UNPKG, the example also shows an ES6 module import in `myMessage.js`.

Aakshayvenishetty1437

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

81% match

Loading thumbnail…

Reusable Scatter Plot in

This reusable scatter plot displays sample data points as steelblue circles, with x and y positions mapped through linear D3 scales. The visualization constructs axes using d3.axisBottom and d3.axisLeft, applied to an SVG container with configured margins. The d3.v7 code encapsulates the chart creation in a `createScatterPlot` function, which binds data via `selectAll().data().enter().append()` and renders the SVG output with hardcoded example values.

Ssaipaidipalli

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

80% match

Loading thumbnail…

Bubble Chart with d3.js

This example shows a bubble chart built with d3.v6, plotting five data points on x and y axes with bubble sizes encoding a third quantitative value. The chart renders as an SVG, using d3.scaleLinear to map data ranges for position and radius, and d3.axisBottom/axisLeft to draw labeled axes. It also demonstrates importing local ES6 modules and loading D3 via UNPKG in VizHub.

Aakshayvenishetty1437

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

79% match

Loading thumbnail…

Scatterplot

A scatterplot displays 50 randomly generated data points, mapping each point’s x- and y-coordinates against linear scales with axis tick marks. The SVG rendering, created with D3.js, uses a linear scale for both axes and a third linear scale to map y-values to circle radius (ranging from 2 to 5 pixels). The visualization is animated, as the dataset is regenerated with new random values each time the page loads, and the circles are drawn without transitions between states. The code explicitly uses D3’s `d3.scale.linear` and `d3.svg.axis` APIs to construct the plot.

MMrajyalakshmi

79% match

Loading thumbnail…

Scatter Plot

This scatter plot displays 50 data points plotting area against value, with purple circles positioned using linear scales derived from the data's extent. The visualization demonstrates D3 axis customization, including tick lines that span the full chart dimensions, a rotated y-axis label, and a capitalized title. The code uses d3.csv to load the data and d3.scaleLinear, axisBottom, axisLeft, and extent functions from D3 v5, rendering everything as SVG elements within an 960x500 viewport.

Ccarlos157oliveira

79% match