Skip to main content
SimilarExport ZIP
100%

DATA WEAVING

✓ Published1🌍 Public
Ssarahdays
Last edited May 9, 2020
Created on May 8, 2020
Forked from HTML Starter

A pink circular form is centered on a gray background, creating a simple geometric composition. The visualization uses D3 v5 to select an SVG element and dynamically append a circle, with its radius and position calculated from the SVG's height and width attributes. The code demonstrates basic D3 selection and SVG shape creation, setting the circle's fill to gray and the background to pink. The example is built with D3's `select` method and SVG's `append` and `attr` functions, rendering a static visual without data binding or interaction.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Circles with D3

Seven circles of varying sizes and colors float on a muted pink background. The visualization demonstrates static circle generation using D3 v7, with each circle’s position, radius, and fill color defined in a hardcoded array. The code uses `select`, `join`, and attribute setters like `.attr('cx')` and `.attr('r')` to render the shapes. A fixed opacity of 0.63 is applied uniformly, and the SVG resizes to its container dimensions.

Iissam.benabid@gmail.com
77% match
Loading thumbnail…

D3 Selections - Exercise

This example demonstrates D3 selections and data joins by rendering a dynamic set of colored circles on an SVG canvas. The code generates data with `makeData`, producing evenly spaced circles with vertical sine-wave positioning, then binds it to the visualization using `selectAll` and the `.join()` pattern. Each circle receives random radius, fill color, and positioning attributes through D3’s selection API. The visualization relies on D3 7.8.0 and React, with the `vizData` function handling the enter-merge-update cycle for the circle elements.

Kkathrynrbernard
76% match
Loading thumbnail…

d3 selection

This example demonstrates D3’s data join and update pattern through an animated swarm of purple circles. It shows how circular marks continuously reposition and resize based on a periodic mathematical function. The visualization uses D3 v7’s `select` and `range` to generate data, appends an SVG to the body, and updates circles every 100/60 milliseconds via `setInterval`. The `.join('circle')` method handles enter and update selections, binding new data arrays while styling radius, x/y coordinates, and fill.

AAnshul Rawat
76% match
Loading thumbnail…

D3 Selection Exploration

This example demonstrates D3 selections and data joins by generating a row of 15 static circles across an SVG canvas. The visualization shows how `selectAll` combined with `data` and `enter` creates elements from an array of numbers. Using `d3.select` and `range`, it appends circles with a fixed radius and x-coordinate to the full-window SVG. The code relies on the core D3 selection API and SVG rendering, with no interaction or dynamic updates.

XXuân Vinh
76% match
Loading thumbnail…

Data Viz with D3

A minimal SVG scene demonstrates basic geometric shapes and styling within a static HTML page. The visualization displays two filled circles, one outlined circle with a blue stroke, and a green rectangular border, all rendered directly through inline SVG markup. The code uses no external JavaScript libraries; instead, it relies on native SVG elements and CSS properties such as `fill`, `stroke`, and `r` for circle radii, while the React Starter link references an alternative approach for interactive builds.

SS1lus
76% match
Loading thumbnail…

Circles

This visualization demonstrates a simple D3.js approach to creating SVG circles. Using the d3.select and join API, it establishes an SVG canvas that fills its container and renders a single circle with a steelblue fill at a fixed position. The code includes commented-out data arrays containing coordinates, radii, and colors, showing an alternative path for drawing multiple circles from structured data. The example focuses on the fundamental pattern of selecting, appending, and styling SVG elements.

Nnitinramagiri1@gmail.com
76% match
Loading thumbnail…

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania
75% match
Loading thumbnail…

Circles with D3

Six translucent circles in contrasting colors—gold, pink, cyan, purple, green, and magenta—overlap on a pale green background. Each circle’s position, radius, and fill are hard-coded in an array of objects. The example uses D3 v7’s `select`, `selectAll`, and `join` to bind this data to SVG `circle` elements, setting `cx`, `cy`, `r`, `fill`, and a fixed opacity of 0.708. The visualization demonstrates basic data-join and SVG rendering with d3.

SSubhendu Karmakar
75% match