Bar Shopen

@barshopen·3 public vizzes

Fork of Circles with D3

This example displays a set of overlapping translucent circles in vibrant colors on a light green background, with sizes and positions varying across the canvas. Using D3 v7, the code binds an array of objects to SVG circles via `selectAll` and `data`, then sets each circle’s `cx`, `cy`, `r`, and `fill` attributes. The visualization includes a large black circle that partially obscures others, creating layered depth through an opacity of 0.7. The data is hardcoded, and rendering uses the `join` method to manage element creation.

Sep 28, 2025

Loading thumbnail…

Circles with d3

A static SVG visualization displays six concentric circles centered at the same point, each with a progressively smaller radius and a distinct fill color (red, green, blue, yellow, purple, orange) outlined in black. The circles are rendered using D3 v7’s data join pattern, where an array of circle objects with explicit `cx`, `cy`, `r`, `stroke`, `strokeWidth`, and `fill` properties is bound to SVG circle elements via `.data()` and `.enter().append()`. The example demonstrates basic shape creation and attribute binding with D3, using a hardcoded dataset rather than external data or animation.

Sep 27, 2025

Loading thumbnail…

Fork of HTML Starter

This example shows a static nested bullseye pattern made of six concentric circles centered at the same point. The circles decrease in radius from 100 to 50 pixels, each filled with a distinct color—red, green, blue, yellow, purple, and orange—and outlined with a black stroke. The visualization is rendered as SVG within an HTML page, using pure SVG circle elements with fixed `cx` and `cy` attributes. The page also includes a separate JavaScript file that only logs to the console, and a CSS file with an unused class selector.

Sep 27, 2025