Untitled

100%

✓ Published0🌍 Public

Last edited May 13, 2020

Created on May 13, 2020

This example shows four circles arranged horizontally, each with a fixed radius of 10 pixels. A slider control allows the user to select a value between 2 and 40, and the chosen value is written to the document via `document.write` in the `changeSize` function. The visualization uses d3.v4 to bind an array of X positions to the circles and listens for slider changes with `d3.select("#mySlider").on("change")`. The SVG is rendered directly in the HTML with a fixed width of 400 pixels and height of 200 pixels.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates how a slider controls the size of a pattern-filled circle in an SVG. The circle’s radius stays fixed, but the pattern scale changes as the slider moves between 2 and 40. The code uses the `textures` library to generate the fill, applying it via `t1.size(size)` and `svg.call(t1)`, with updates triggered by the slider’s `change` event. The visualization is rendered using D3 v4 and React, with the SVG drawn at 400 by 200 pixels.

Zzoniyac

86% match

Loading thumbnail…

Untitled

Three circles of varying sizes and colors visualize three numeric values from a clay dataset, with each circle’s radius roughly corresponding to its value and a number label placed inside. The code builds an SVG using D3 v7 in a React-friendly HTML page, drawing the circles with fixed coordinates and styling them with opacity and white strokes. It directly appends SVG elements via `d3.select` and `.append`, setting circle positions, radii, and fill colors, while text elements display the values 62, 11, and 17 in font sizes tied to those numbers.

Rrykay

80% match

Loading thumbnail…

Untitled

Five circles sit on a shared horizontal axis, each sized by a value from the current dataset. A button switches between two data arrays, triggering a one-second transition that repositions circle radii and x-coordinates. Using D3.js v6 with SVG and animation, the code employs data joins, `enter`/`exit` selections, and `transition` to update the visualization. An axis line and a title label (highlighting the active dataset) complete the chart, which renders entirely in the browser.

Ssgzzhinde

79% match

Loading thumbnail…

Untitled

Five circles in a horizontal row show a small dataset of numeric values, sized proportionally and shaded with a sequential color scale from light to dark green, with each value labeled beside it. The code uses D3 v4’s data join to bind an array of five numbers to SVG group elements, then appends circles and text. Circle radii are scaled by the data value, and colors come from a hardcoded array, while dimensions are set directly on the SVG.

DDavid-Wong110723

79% match

Loading thumbnail…

Untitled

A single large brown circle serves as the central figure, flanked by two smaller silver circles. The SVG markup directly defines each circle’s position, radius, and stroke, using fixed numeric attributes such as `cx="480"`, `r="200"`, and `stroke-width="10"`. The React framework is not utilized in the rendering logic; instead, the visualization is built with plain SVG elements inside an HTML page, relying solely on CSS for margin and overflow styling. No additional JavaScript libraries or data sources are involved, as the example demonstrates static, hardcoded geometry.

SSimonYapp

79% match

Loading thumbnail…

Untitled

A cluster of 100 circles, each colored by one of four categories, moves under a force-directed layout in an animated SVG scene. D3's `d3.layout.force` continuously updates node positions, while a custom tick function applies directional offsets based on node index to separate groups into distinct clusters. Clicking or dragging any circle adds random jitter, causing the clusters to scatter and then re-form. The visualization uses D3 v3 with React, fading the entire SVG in over one second on load.

CCO18323

78% match

Loading thumbnail…

Untitled

A vertical column of 50 circles animates across an SVG canvas, cycling horizontally in a loop. The circles are colored along a dark-to-light scale using `d3.scaleLinear` with HSL interpolation, creating subtle banding. D3 v4 selects the SVG, appends the circles, and chains `transition` calls with staggered `delay` and recursive `on("start", repeat)` to move each circle from left to right and back, demonstrating fundamental DOM manipulation and animation.

Jjesramyep1263

78% match

Loading thumbnail…

Untitled

This example shows a single, large circle rendered on a blank SVG canvas, with no interaction or animation. The visualization relies on an inline SVG element sized to 960 by 500 pixels, containing a circle with a radius of 100. The code uses plain JavaScript and CSS within an HTML page, with the SVG’s `circle` element as the only visual mark, and the page is set up with a hidden overflow. No external data or libraries are used, and the styling is minimal, focusing on the bare structure of an SVG graphic.

HHaris Vidimlic

78% match