Willimnot

@Willimnot·4 public vizzes

Dragging HTML Elements 2

This example demonstrates a drag-and-drop interface for building workload models. Users can select items from an available pool and drag them into different collection and target containers, organizing them into a hierarchical structure. The interface supports creating clones, deleting items, collapsing containers, and saving or restoring connection states. It is implemented using custom HTML elements defined through the Web Components API, with drag-and-drop handled by native HTML5 events and SVG graphics embedded within draggable items.

Sep 26, 2023

Loading thumbnail…

Bar Chart Test

This animated bar chart demonstrates a customizable, multi-segment bar chart. Built as a custom HTML element using the vcBarChart class, it manages SVG-based bars with individually adjustable segment heights, colors, and offsets via interactive controls. Users can add or remove bars dynamically and swap their order. The visualization leverages a custom svcSvgManager to handle SVG drawing and manipulation, with separate classes managing bars, rectangles, and chart-level operations.

Jun 27, 2023

Loading thumbnail…

Pie Chart Test

This interactive pie chart demonstrates how SVG paths can draw and manipulate arc sectors in real time. The page renders a single pie chart using a custom web component (`vc-piechart`) built on the native SVG API, with controls to add, remove, and adjust each sector’s color, stroke, start angle, arc length, inner/outer radius, and x/y offsets. Separate panels allow creating linear gradients and editing their stop colors, offsets, and coordinate vectors. The visualization relies on JavaScript classes (`vcSector`, `vcGradient`, `vcSvgManager`) and DOM manipulation to update the rendered paths dynamically.

Jun 19, 2023

Loading thumbnail…

Extending HTMLElement as Select

Four chained selection panels demonstrate a custom element hierarchy built by extending HTMLElement. The example defines `vc-select`, `vc-selectcheckbox`, `vc-xselect`, and `vc-xxselect` classes, which are registered via `customElements.define`. Each `vc-select` supports dynamic option management, state saving/restoring, and dependency-based filtering through `vc-options` and `vc-dependencies` attributes. A checkbox toggles visual state, and selection changes propagate up the element chain to toggle borders, showing event-driven composite behavior.

Apr 22, 2022