Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
NNita
Last edited Jan 2, 2021
Created on Jan 2, 2021

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.

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…

Untitled

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()`.

Ffay Alomar
88% match
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
87% match
Loading thumbnail…

teaching 3

This example demonstrates a generative scatter plot, drawing 250 circles with randomized positions, radii, colors, and opacity onto an SVG canvas. It also includes a large, static SVG path that resembles a complex shape or map outline. The visualization uses D3 v5, leveraging `scaleLinear` and `scaleOrdinal` for scaling, along with `select` and `selectAll` to bind and append elements.

NNita
83% match
Loading thumbnail…

teachings-1

This example generates a randomized scatter plot of 250 circles, each positioned and sized using D3’s `scaleLinear` and `scaleOrdinal` functions. The circles are appended to an SVG container with `selectAll` and `enter`, while their colors and opacities are set via inline `rgb` strings and random values. The visualization also includes a long, complex SVG path string that appears to draw a decorative shape. The code imports d3 v5 modules from UNPKG and relies on the local `index.js` and `styles.css` files to render the output.

NNita
83% 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
82% 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
82% match
Loading thumbnail…

Untitled

This example demonstrates a basic scatter plot where users can brush-select points to highlight them in red. It uses D3 version 7 to generate 200 random data points and render them as SVG circles. The brushing interaction is handled by `d3.brush()`, which triggers a callback that updates the fill color of selected points. The code uses `d3.select()` and the `.join()` API to efficiently manage the circle elements.

Ttebanieo
81% 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
80% match