Skip to main content
SimilarExport ZIP
100%

test svg basic

✓ Published1🌍 Public
Ssgzzhinde
Last edited Dec 21, 2020
Created on Dec 21, 2020

This example shows a simple SVG scene with an orange rectangle, a white-bordered ellipse, and the text “i am here” positioned on a 640×480 canvas. The visualization is built using D3.js version 6 and D3 version 3.5.17, with SVG elements created and styled through D3 selections. The code appends a group element, then an ellipse, and a text label, using attributes like `cx`, `cy`, `rx`, and `ry` for positioning. The rendering relies on basic SVG geometry and static styling rather than data-driven behavior.

AI-generated description

program that follows your mouse with a circle.

MIT Licensed

Similar vizzes

Loading thumbnail…

test svg basic

This example shows a basic bar chart built with D3.js, displaying three data values (5, 10, and 12) as orange rectangles with white numeric labels. The visualization uses the D3 selection and data join pattern, appending SVG groups that are translated vertically for each bar. Rectangles are sized using a scale factor of 60 pixels per unit, while text elements position labels at the end of each bar. The code loads D3 v6 and demonstrates fundamental SVG rendering with `d3.select` and `d3.append`.

Ssgzzhinde
80% match
Loading thumbnail…

test

A simple SVG scene displays a single green rectangle positioned within a larger canvas. The example uses D3.js to append the rectangle to the selected SVG element, setting its width, height, coordinates, and fill color via a single attribute object. The code demonstrates basic D3 selection and shape creation without any data binding or interactive behavior, serving as a minimal starting point for SVG rendering.

AAlexDaGr8
80% match
Loading thumbnail…

D3 Test

This example displays a simple SVG canvas with a single text message reading “Edit the code below to change me!” positioned near the top-left of a 960-by-500 pixel frame. The code uses d3.select to append an SVG element to the body, then chains an svg.append operation to create the text node. Styling is applied directly via .style attributes for font size and family. The script relies on D3 v4, loaded from the d3js.org CDN, and serves as a minimal starting point for interactive visualization development.

IIzaskunLS
79% match
Loading thumbnail…

test

This example displays a static SVG canvas with a single line of instructional text. The code uses D3 v4 to append an SVG element to the body and a text element inside it, styled with a monospace font and positioned at the center. It serves as a minimal placeholder, showing how D3 selections and SVG attributes create basic visual output. The text explicitly invites the user to edit the code, highlighting the template’s purpose as a starting point for further customization. No data or dynamic behavior is involved beyond the initial rendering.

EEssohanamKouyou
78% match
Loading thumbnail…

Test svg

The visualization is a simple test of SVG rendering with D3.js. It displays an empty, full-width SVG canvas with a red background applied via the `d3.select` API. The code uses D3 v5 to select the SVG element and set its background color, while CSS styles the page layout with hidden overflow and a large font size. The example demonstrates a minimal D3 setup, showing how to manipulate SVG elements and apply styling, with the source data being an empty SVG element within the HTML file.

EErik Rudhe
78% match
Loading thumbnail…

test

A blank SVG canvas is displayed inside a bordered container. The visualization consists of a single static blue circle with a radius of 10 pixels, positioned near the top-left corner of the 800 by 600 pixel drawing area. The example demonstrates a minimal SVG rendering setup using d3.v5, where the `d3.select` method is used to append the SVG element and the `append` and `attr` functions define the circle’s geometry and fill color. The styles from `styles.css` define the container’s dimensions and border.

TThibault
78% match
Loading thumbnail…

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees
78% match
Loading thumbnail…

Some fun with SVG

A static SVG scene demonstrates primitive shapes without data binding. A blue outlined circle, a thick blue diagonal line, and a navy rectangle are positioned explicitly on a 1024x768 canvas. The page also uses the D3 v7 `select` API to insert the text "Hello D3@7" into the body. This example highlights hand-coded SVG markup rather than programmatic generation, with all geometry defined in the HTML file.

GGiuseppe
77% match