christian jensen

@fiejen·3 public vizzes

Time Resource Tetris

The visualization demonstrates a Tetris-style time management tool where users drag two-hour work items into weekly day columns. React components render interactive blocks representing tasks, with hover effects highlighting selectable items. The interface uses React 16.13.1 and ReactDOM for rendering, while CSS flexbox organizes the day columns and percentage-based item heights. The code includes static sample data with pre-filled tasks in day2, though no drag-and-drop logic or state management is implemented, only the visual layout and styling are shown.

Sep 30, 2022

Loading thumbnail…

Fork of Dragging HTML Elements 2

This interactive workflow modeller demonstrates a drag-and-drop interface for composing workload selections. Users arrange draggable items from an available pool into collection containers and target slots, with support for multi-selection, cloning, and collapsible or deletable groups. The interface relies on custom HTML elements, including `vc-dragcontainer`, `vc-dragitem`, and `vc-dragclosebutton`, which manage drag events, drop groups, and selection states. The code also includes save and restore functions for persisting connection configurations, with inline SVG graphics used within certain draggable items.

Sep 30, 2022

Loading thumbnail…

Fork of D3 Starter

This example displays a single, large-format “Hello D3 version 7” message in the center of the page using D3’s `select` and `.text` methods. The rendering relies on the D3 v7 library loaded from a CDN, with all styling handled by inline CSS. The page contains no interactive elements or data sources, serving purely as a minimal starter template that demonstrates how to bind text to the body element and update it via D3’s selection API. The bundle.js file is the entry point that runs the static text insertion.

Sep 30, 2022