Skip to main content
SimilarExport ZIP
100%

teachings-1

✓ Published2🌍 Public
NNita
Last edited Mar 16, 2023
Created on Mar 16, 2023

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.

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…

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
90% match
Loading thumbnail…

Fork of teaching 3

This example generates 250 circles with randomized positions, sizes, and colors. The JavaScript code creates a D3 SVG visualization with a linear scale mapping data to coordinates. A glowing, hand-drawn path is also rendered. The visualization uses D3 v5 via UNPKG and imports functions like `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` from the `d3` module. The SVG output is rendered with animation support, and the Dancing Script font styles the page.

CCurran Kelleher
84% 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
83% match
Loading thumbnail…

learning

This example displays seven semi-transparent circles of varying sizes and bright colors on a pale green background, each positioned at distinct coordinates. The visualization uses D3’s `select`, `selectAll`, and `join` methods within `index.js` to bind an array of hardcoded objects—containing `x`, `y`, `r`, and `fill` values—to SVG circle elements. The code sets the background via a styled `svg` element and applies a fixed opacity of 0.708 to all circles. It serves as a simple, editable template, inviting users to fork and customize the theme.

Rrahul887393@gmail.com
80% match
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
80% match
Loading thumbnail…

Fork of Fork of Hello VizHub : Making circles 1

This example displays a scattered field of semi-transparent, randomly colored circles over a dark background, with each circle’s position and radius derived from random numbers. The visualization uses D3 v5 to generate the SVG elements, employing `scaleLinear` for the x and y axes, `scaleOrdinal` with `schemeCategory10` for potential color mapping, and manually computed `rgb()` strings for fill and stroke. The code also includes a large embedded SVG path, though it is not rendered in the visible output.

NNita
80% match
Loading thumbnail…

simple animation

This example demonstrates an interactive scatterplot of 1,000 randomly generated circles. The data is created on the fly and rendered as SVG circles within a full-window visualization. Using the D3.js library (version 7.8.5), the code applies linear scales to map random values to screen coordinates and circle radii. Hovering over a circle triggers a transition via the `transition` API, animating the circle to a new random position over one second with an elastic easing effect.

NNeeraj Kumar
79% 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
78% match