Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ffay Alomar
Last edited Aug 31, 2023
Created on Aug 30, 2023
Forked from HTML Starter

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A scatter plot displays 100 randomly generated points within a fixed coordinate space. Each point is rendered as a red circle on an SVG canvas, with axes labeled from 0 to 500. The visualization uses D3 v4’s `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` to draw the axes, and appends circles via `selectAll` and `enter`. The data is synthetic, created with `Math.random` in a loop.

Ssaipaidipalli
94% match
Loading thumbnail…

Untitled

This example shows a scatterplot of 100 randomly generated points in a 600x400 SVG canvas, with the ability to pan and zoom the view. The points are rendered as small circles inside a group element, and their positions are updated using D3’s data join pattern. The code initializes a D3 zoom behavior on the SVG and applies the current zoom transform to the group on each zoom event. It uses the D3 library for zoom and data binding, while the SVG is defined directly in the HTML.

TTrushin Arseniy
89% match
Loading thumbnail…

Untitled

This example demonstrates a generative scatterplot of 150 random data points. Each point is rendered as a circle with a random radius and position, mapped from a linear scale (`d3.scaleLinear`) applied to the data extent. The circles use a categorical color palette (`d3.scaleOrdinal` with `schemeCategory10`), overridden by random red and green stroke colors with variable opacity. The SVG is created via D3 v5 selection and attribute methods, with margins applied through a transform on a group element.

NNita
88% match
Loading thumbnail…

Untitled

This example demonstrates a scatter plot of 100 randomly generated points within a 600×400 SVG viewport. The visualization shows how D3’s zoom behavior transforms a group element containing the circles, enabling pan and zoom interactions. The code uses `d3.zoom()` with a `handleZoom` callback that applies the event transform via `.attr('transform', ...)`. Rendering relies on SVG circles with `cx`, `cy`, and `r` attributes, using D3’s data join pattern to bind the generated array of point objects.

TTrushin Arseniy
86% match
Loading thumbnail…

Untitled

This example presents a minimal interactive visualization built with React and D3, rendered as a scatterplot. It uses the force simulation from D3 (`d3.forceSimulation`) to position nodes dynamically, with the simulation’s tick event updating the SVG circles via React’s state management. The chart displays a static dataset of points without external files, relying on D3’s `scaleLinear` for axis mapping and `d3.axisBottom` for x-axis ticks. The layout is styled with basic CSS, and the code is structured as a single React component.

MMgk1255
85% match
Loading thumbnail…

Untitled

A line chart visualizes a dataset of 13 coordinate pairs, plotting dependent values against independent variables across a 500x400 SVG canvas. The example uses D3 v4 within a React framework to construct a linear chart with labeled axes, a title, and red circular markers. The code specifically employs `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for ticks, and a custom line generator via `d3.line` with monotone curve smoothing to connect the data points. The visualization is rendered entirely as SVG elements, with fixed margins and translated groups for positioning.

Nnamansinghal1420
84% match
Loading thumbnail…

Untitled

This example shows an interactive 3D scatterplot and grid rendered with SVG, where users can drag to rotate the scene. Randomly distributed points float above a shaded grid surface, with projected axes and labels. The visualization uses the d3-3d library to compute 3D-to-2D projections, with d3.drag() handling rotation updates. D3 v4 transitions animate the initial point appearance, while React manages the component structure.

Aavinash021997
84% match
Loading thumbnail…

Untitled

This example renders a simple line chart with twenty-one randomly generated data points using D3 version 5. The chart uses `d3.scaleLinear` for both axes and `d3.line` with `d3.curveMonotoneX` smoothing to draw the line, while individual data points appear as circles. The SVG output is styled with CSS classes for the line and dots, and mouseover events log data to the console. The visualization demonstrates basic D3 plotting techniques without external data sources, relying on `d3.randomUniform` for its synthetic dataset.

EEvan Burchard
83% match