DanFork of Pseudo Circle Packing

100%

DanFork of Pseudo Circle Packing

✓ Published0🌍 Public

Last edited Jul 13, 2023

Created on Jul 13, 2023

The visualization is a static pseudo-circle-packing diagram, presenting a nested arrangement of circles labeled with letters. It shows how circles can be packed to suggest a tree-like or fan-like structure, with some circles filled white and others left transparent to create contrast. The graphic is rendered as an SVG, with all shapes manually defined via `<circle>` elements and text labels added. The code uses specific Cartesian coordinates for each circle, with styling and font control via CSS and the 'Share Tech' font.

AI-generated description

A pseudo visualisation of circle packing.

Shapes generated in Figma, text added in VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pseudo Circle Packing

A pseudo circle packing visualization displays nested and overlapping circles in pink, white, and black, with letter labels from A to W. The SVG shapes are manually positioned, not generated algorithmically. The code uses raw SVG `<circle>` and `<text>` elements, with styling from CSS, featuring the Share Tech font. The circles appear to be pre-computed in Figma and exported, rather than computed dynamically.

FFangda Qiu

87% match

Loading thumbnail…

Pseudo Circle Packing

A pseudo circle packing visualization displays nested and overlapping circles in a black-and-white composition, with labeled regions from A to W. The SVG rendering uses hardcoded circle elements with fixed coordinates and radii, rather than algorithmic packing. Text labels and white fills on select circles create visual hierarchy. The design was created in Figma and embedded directly into the HTML, with styling applied through CSS using the Share Tech font.

AAdil Zeshan

82% match

Loading thumbnail…

Fork of Circles with D3

A static visualization of seven circles in a cream-colored container uses a custom palette of muted colors like charcoal gray, burnt orange, and beige. The circles are connected by thin, semi-transparent lines, and larger ones are framed with rounded rectangles. Rendered with D3 v7, the code uses `select`, `join`, and attribute setters like `.attr` to draw geometric shapes from hard-coded data arrays, demonstrating basic SVG construction without animation or interaction.

KKal

76% match

Loading thumbnail…

Fork of Pseudo Scatter Plot

This is a static visualization of six circles arranged in a scatter plot pattern on a white background. Each circle is rendered as a distinct SVG element with fixed coordinates and a radius of 34.5 units. The example uses plain HTML, CSS, and inline SVG to construct the chart, with no JavaScript or external libraries involved. The plot offers a simple, minimal demonstration of how SVG shapes can be positioned manually to create a data-like layout.

AAbhinash Mallick

74% match

Loading thumbnail…

Fork of Circles with D3

This visualization shows a fixed composition of overlapping geometric shapes on a pale green background, including seven semi-transparent circles, five thick colored lines, and three rectangles. The code uses D3 v7 with the `select` API and data joins (`join`) to bind each SVG element to its corresponding array of objects. Shapes are rendered directly as SVG `circle`, `line`, and `rect` elements, with attributes like position, size, color, and opacity set from the data. The example demonstrates static, non-interactive SVG rendering with hardcoded coordinates and no scales or axes.

Aadamsnothere@gmail.com

74% match

Loading thumbnail…

Fork of Basic Circle Pack

A fork of the basic circle pack example demonstrates hierarchical data visualization using d3.pack, where circles represent nested nodes and are colored by depth using a linear scale. The view animates between zoom levels via d3.interpolateZoom, triggered by clicking circles or the background. Buttons allow adding and removing data, though the specific data mutation logic is not shown. The visualization renders in SVG with smooth transitions, and labels appear only for the current focus node's children.

554x1

74% match

Loading thumbnail…

Pseudo Visualizations

Seven circles in a square SVG canvas appear as a pseudo network visualization, with each node represented by a circle of identical radius. The circles are placed at varying coordinates, creating an organic, scattered layout that resembles a graph without connective edges. The example uses static SVG elements—rect and circle—rendered directly in HTML markup, with no JavaScript framework or data binding. The white background rect anchors the visualization, while the unpositioned circles suggest a minimal, unfinished force-directed simulation.

JJun Alvarado

74% match

Loading thumbnail…

Fork of Circles with D3

This visualization displays six semi-transparent circles of varying sizes, positions, and bright colors against a pale green background. It uses the D3.js library's select, selectAll, and join methods to efficiently bind and render the circle elements within an SVG container, sizing the visualization to fit the available space. The circles are drawn based on hard-coded data containing x and y coordinates, radius, and fill color, with a fixed opacity value applied to all shapes. The example serves as a template for creating and styling simple geometric compositions using D3's data-driven document manipulation.

NNita

74% match