Skip to main content
SimilarExport ZIP
100%

Graylabel.art

✓ Published0🌍 Public
Bblockmarket
Last edited Jun 8, 2023
Created on Jun 7, 2023
Forked from ello world

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ello world

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.

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

Events

Five gray circles demonstrate different D3 event bindings: the first changes color on click, the second on mouseover, the third on mouseout, and the fifth on contextmenu. A fourth circle, given an id, moves via WASD key presses using d3.transition() with a duration of 1000ms. The circles render as SVG, sized 1600 by 800, with random colors from d3.interpolateRainbow. Event handlers use d3.select and event.currentTarget to update fill attributes.

Vvivianaaai@qq.com
67% match
Loading thumbnail…

Untitled

This interactive scatterplot displays stock data with price on the x-axis and true value on the y-axis, using colored circles to represent stock types. Users filter the visualization through a dropdown menu for sector selection and jQuery UI sliders that adjust volume and delta ranges. The D3.js code loads data from a CSV file, applies keyed enter/update/exit selections, and includes hover tooltips that highlight individual stocks. The SVG renderer uses d3.axisBottom and d3.axisLeft for axes, with d3.scaleOrdinal for categorical coloring.

Mmkolowrat
67% match
Loading thumbnail…

text label test

This visualization demonstrates six distinct techniques for making text labels readable when placed on top of colored bars. It compares plain labels against those with background rectangles, SVG filters, paint-order strokes, and CSS text shadows, using black, blue, red, and yellow bars as backdrops. Built with D3 v5 and rendered as SVG, the example leverages SVG filter primitives like `feFlood` and `feComposite`, as well as CSS `text-shadow` and the `paint-order` property to enhance legibility. The code includes no data binding and is purely a static test of label styling approaches.

EEE2dev
67% match
Loading thumbnail…

SVG Fund

This example displays a static SVG graphic titled “SVG Fund” with a large yellow rectangle and two circles, one black and one red, drawn directly on an HTML page. The code uses raw SVG elements, including `<rect>` and `<circle>`, within a fixed 950×900 viewport, styled through inline attributes. While the README references CSS and JavaScript, this specific implementation shows no interactivity or data binding, relying instead on hardcoded coordinates and colors to compose the minimal visual. The rendering approach is purely declarative, with no external libraries like D3 or React visible in the included markup.

Mmatrice-one
66% match
Loading thumbnail…

simple bar chat with interaction

Ten labeled bars display numeric values in a simple SVG bar chart. Hovering a bar turns it red and enlarges its corresponding text label; moving the mouse out triggers a 500-millisecond transition restoring the original fill and font size. The example uses D3 v4 with `d3.scaleLinear` for positioning, `d3.select` and `.on("mouseover")`/`.on("mouseout")` for interaction, and `.transition().duration()` to animate the visual feedback. The chart is built from a static array of ten numbers.

EElisaDnr
66% match