ello world

100%

✓ Published3🌍 Public

Last edited Jun 8, 2023

Created on Jun 7, 2023

Seven labeled fund boxes sit in a column on the left of an SVG canvas, drawn with D3 v7. Each box reacts to mouse hover by changing its fill and making a text element display the fund name in an overlaid HTML div. The example sets up SVG rectangles and text elements with D3 joins, using JavaScript event listeners for interaction. The animation is driven by CSS transitions on the fill property.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Graylabel.art

A monochrome interface presents five labeled funds on the left, including Risk, Return, Exposure, and Relativity, which activate on mouse hover. The visualization uses D3 v7 to render SVG rectangles and text, relying on CSS transitions for smooth fill changes and dynamic font-size adjustments. A small text div displays the hovered fund's name. The interaction logic tracks the active fund and reverts previously highlighted elements to their default state.

Bblockmarket

76% match

Loading thumbnail…

base ut console

This visualization presents a console interface for selecting among seven investment funds, displayed as a vertical list of labeled boxes on the left side of an SVG canvas. Each fund box is rendered as a filled rectangle with stroke styling, accompanied by a text label, using D3 v7’s data joins to bind fund names and positions. The layout calculates workspace dimensions from the browser’s inner width and height, with a black background and white foreground color scheme. The code initializes an SVG container, appends background rectangles, and positions fund entries using fixed height and margin calculations, though no interactive behavior is explicitly implemented beyond the structure.

Bblockmarket

76% match

Loading thumbnail…

Hello world!

A working black-and-white canvas displays a row of five circles that repeatedly adjusts its scale via a D3 transition, while two HTML overlay labels read “Hello world” and “a random walk?...”. The circles’ radii and fill color update on a random interval, switching between blue and gray based on a random threshold. Built with D3 v7, the example demonstrates SVG rendering and animation through D3’s `join` method and `transition` style, with a simple `setInterval` driving the stochastic size and color changes.

Bblockmarket

73% match

Loading thumbnail…

SVG funds

This example demonstrates a static SVG composition with overlapping circles and a rounded rectangle, using basic geometric shapes to create a simple visual hierarchy. The code relies on raw SVG elements (rect, circle) rendered through plain HTML, with CSS controlling font styling for a message block. The visualization shows two circles—one green and one purple—layered over a blue rectangle, with a smaller green circle overlapping the purple one to create depth. Although the title suggests fund data, the current implementation only displays decorative shapes without any data binding or interactive behavior, serving as a minimal starter template for SVG rendering in a browser.

Ddalia.miliauskaite@me.com

72% match

Loading thumbnail…

SVG Fundamentals

Four overlaid rounded rectangles demonstrate core SVG fundamentals within a D3.js v5 environment. The visualization shows two overlapping shapes with varying corner radii, positioned using both pixel and viewport-height units. One red and one green rectangle dominate the center, while a pair of small vertical bars in red and green sit offset to the right, each with distinct dimensions. The code explicitly defines the SVG canvas, `rect` elements, and fill attributes, while a separate script imports D3’s `select` function and a local module to display a text message.

CCreighton Chingarande

70% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and attributes, including circles with varying fills and radii, and a green line with a specified stroke width. It loads D3 via UNPKG and uses the `select` API from D3 to update a message div with text from a local ES6 module. The visualization renders directly to an SVG element in the HTML, while a separate CSS file styles the message text.

Rrandelriley

70% match

Loading thumbnail…

SVG Fundamentals

Three circles of different colors and sizes on a blank SVG canvas demonstrate the basics of SVG markup. The example shows how to draw and position shapes directly in HTML without any JavaScript interaction. The page uses D3 version 6 and includes inline SVG elements: two red circles and one black circle, each with explicit `cx`, `cy`, and `r` attributes. The accompanying `index.js` imports the `select` function from D3 and writes text to the page body.

TTal van Dijk

70% match

Loading thumbnail…

2020w7 world wealth

This example displays a blank SVG canvas with a placeholder text message. It uses the D3 v4 library, specifically the `d3.select` and `d3.append` methods, to create an SVG container sized at 960 by 500 pixels. A single text element instructs the user to edit the code, demonstrating basic SVG rendering with D3. The visualization shows no data or complex behavior, serving only as a minimal starting point. The data source is not visible in the provided code.

PPatrick Wojda

70% match