psuedo-bubblechart

100%

psuedo-bubblechart

✓ Published1🌍 Public

Last edited Jun 4, 2025

Created on Dec 12, 2024

This example displays a single red circle with a dashed stroke and the text "AG(50)" beside it. The visualization is constructed using JavaScript with the D3 library, which appends SVG elements to an HTML page. The circle is centered within a 600 by 600 pixel canvas, using a stroke-dasharray to create a pseudo-bubblechart effect. The code directly manipulates SVG attributes like `cx`, `cy`, `r`, and `stroke-width` to define the graphic, with the text element positioned and styled via D3's selection and chaining methods.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Pseudo Bubble Chart

This pseudo bubble chart demonstrates a scatterplot-style visualization where circles of varying sizes represent data points along x and y axes. The visualization uses React to render an SVG scene containing multiple gray circles and one prominent purple circle, with axis labels and grid lines provided by plain SVG elements. The code utilizes standard SVG primitives such as `<circle>`, `<line>`, and `<rect>` within a fixed viewBox, while CSS styling controls the text appearance for axis tick labels.

Hhquazza@gmail.com

84% match

Loading thumbnail…

d3

This example demonstrates a single red circle with a green stroke, centered inside a 500-by-500 SVG canvas. The code uses D3 v6 to select the SVG element, append a circle, and set its radius, position, and fill and stroke colors via attribute methods. The visualization anchors the circle using fixed pixel coordinates, while the body text is styled with a 13-em font size for a bold, minimal layout.

Ggyanendra verma

81% match

Loading thumbnail…

Pseudo Visualizations

A pseudo bubble chart shows a series of black circles of varied sizes positioned over a Cartesian coordinate grid, with axes drawn as black lines and a title labeling the graphic. Based on the code in `index.html`, the visualization is hand-coded as an SVG using plain `circle`, `line`, and `text` elements, with a Roboto font typeface and no data-driven binding. The example, authored by kathrynrbernard in the v3 source, serves as a static mockup rather than an interactive chart.

Kkathrynrbernard

79% match

Loading thumbnail…

Bubble Chart

This bubble chart displays three data points as red circles, with each bubble’s horizontal position, vertical position, and radius mapped from the `a`, `b`, and `c` fields of the data array via `d3.scaleLinear` ranges. The SVG rendering uses D3 v7’s selection API (`d3.select`, `.enter().append()`) to create the circles, while `d3.axisBottom` and `d3.axisLeft` add labeled x- and y-axes with explicit pixel translations. The static example demonstrates basic D3 scales, SVG circle generation, and axis construction without interaction or animation.

Ssaipaidipalli

78% match

Loading thumbnail…

Hello Data viz

This example displays five overlapping circles of varying sizes and colors, arranged to create a visually dense, colorful target-like composition on a 960 by 500 SVG canvas. The circles are manually positioned with fixed coordinates and radii, each using distinct fill and stroke colors such as red, green, purple, and magenta. The visualization is built with plain HTML, CSS, and JavaScript, rendering shapes directly through SVG circle elements without any external libraries or data-driven logic. It simply demonstrates static vector shapes with heavy strokes and overlapping layers for visual effect.

Iillyyo

78% match

Loading thumbnail…

Pseudo Bar chat

This example shows a set of six circles positioned diagonally across a white SVG canvas, creating a pseudo bar chart through the descending placement of the shapes. Each circle measures 34.5 units in radius, with coordinates that suggest a decreasing trend from left to right. The visualization uses raw SVG elements directly in an HTML file, with a `<rect>` for the background and `<circle>` elements for the data points. The code defines the chart statically without any JavaScript libraries or interactive features, relying solely on inline SVG markup and basic CSS to reset the body margins.

AAbhinash Mallick

78% match

Loading thumbnail…

SVG Starter

This example displays a single red circle rendered inside an SVG canvas. It serves as a minimal setup for SVG-based visualization, showing how a static shape can be styled directly using D3. The code uses D3 v5's selection and styling API (`d3.select` and `.style`) to apply the fill color, while the circle itself is defined in plain SVG markup within the `index.html` file. The page also imports a separate stylesheet for global typography and layout.

AAndrew Smith

77% match

Loading thumbnail…

Pseudo line chart with D3

A pseudo line chart uses a thick, rounded SVG path to connect fourteen colored circles scattered across the canvas, creating a playful visual of a data trend. The chart is rendered statically in SVG, with the path stroked in black and the circles colored via a static JavaScript array. The D3 library’s selection API, specifically `d3.select` and the `.join` method, programmatically maps the circle data to SVG elements, setting their `cx`, `cy`, `r`, and `fill` attributes to display the decorative points.

BBismark Kofi Owusu Sarfo

77% match