Skip to main content
100%

Responsive + Centered SVG

✓ Published0🌍 Public
SSladav
Last edited Dec 2, 2016
Created on Dec 2, 2016

A simple D3.js example demonstrates how to create a responsive, centered SVG visualization. Three circles—red, blue, and green—are drawn at different positions and sizes within a fixed viewBox coordinate system, while the SVG element scales to fill a container set to 50% width. The code uses `d3.select` to append the SVG and circles, with CSS classes controlling layout and a green border. The `viewBox` attribute enables the plot to scale responsively, and absolute coordinates define circle placement.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
78% match
Loading thumbnail…

Presentation SVG

This example demonstrates how to style and manipulate basic SVG circle elements using D3.js selections. The static HTML page contains three circles positioned horizontally, and the JavaScript code first applies a uniform red fill to all circles, then conditionally recolors them based on their index—alternating between red and blue. The visualization relies on D3's `selectAll` method to query SVG elements and the `style` method to set CSS properties. The circles are rendered as static SVG shapes without any data binding or interaction, showcasing simple DOM manipulation with D3 v7.

RRobindj2000
78% match
Loading thumbnail…

Circle

The example shows a single red circle that remains centered within a blue container as the browser window resizes, turning blue after any size change. It uses d3.v4 with SVG rendering to bind data to a circle element, positioning it based on the container’s client dimensions. A general update pattern with `merge` and `exit` handles resizing, while a counter tracks window width changes to prevent the radius from shrinking below its initial value. The data is hardcoded in the script, and the visualization is built with Blockbuilder.

CCJKraenzle
78% match
Loading thumbnail…

Hello VizHub!

This example displays a single blue circle centered on an SVG canvas, demonstrating the basic workflow of creating and positioning shapes with D3. The code imports the `select` function from D3 v5, appends a `circle` element to the SVG, and sets its radius and center coordinates using the `attr` method. The SVG is sized at 960 by 500, matching the viewport dimensions used for the circle's position. The visualization serves as a minimal, foundational template for D3-based projects, with styling defined in a separate CSS file that imports the Ubuntu font.

Aabreudude
77% match
Loading thumbnail…

My first D3.js vizualization

A simple circle centered in an SVG canvas demonstrates the basic structure of a D3.js visualization. The code uses `d3.select` to access the SVG element, calculates its center from the `width` and `height` attributes, and appends a group (`g`) translated to that point. A circle with a radius of 100 pixels and an orange fill is then added to the group, showing how to position and style SVG shapes. The example is built with D3 v5 within a React framework, rendering entirely through SVG without any data binding or external datasets.

Mmazacm01
77% match
Loading thumbnail…

Circles with D3

A D3.js visualization renders seven semi-transparent circles on an SVG canvas, each positioned by x/y coordinates with varying radii and bright fill colors against a pale green background. The code demonstrates the General Update Pattern by joining data to SVG circle elements, setting attributes for position, size, and fill via chained `.attr()` methods. It uses `select` from D3 to handle the container element, measuring its dimensions with `clientWidth` and `clientHeight` to size the responsive SVG, while the `opacity` attribute creates an overlapping effect between the colorful bubbles.

SStephen HC Lin
77% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
77% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
77% match