helen.bielawa@web.de

@HelenBielawa·6 public vizzes

Beispiel: Positionierung

This example demonstrates how HTML elements can be positioned and restyled through JavaScript. A pink background page contains a vertically stacked flexbox layout with a large message box, a button, and a second color block. When the button is clicked, a CSS class toggles the message and button background between navajowhite and darkorange. The core interaction uses the DOM API through `document.querySelector` and `classList.toggle` to dynamically change the visual presentation without any external libraries.

Apr 16, 2026

Loading thumbnail…

COPY Fork of HTML Starter, Hello World

This example demonstrates a simple interactive color-change effect on a web page. It shows a styled "Hello World" message and a button, where clicking the button toggles a pink background class on both elements. The behavior is implemented with vanilla JavaScript event handling, using `document.querySelector` and `classList.toggle` in response to a click listener. The rendering approach is plain HTML and CSS, with no external libraries or data sources; the layout uses CSS grid for centering and transitions for smooth visual feedback.

Apr 16, 2026

Loading thumbnail…

HTML Starter, Hello World

This example shows a minimal interactive HTML page where a click on a button toggles the background color of a displayed message and the button itself. The page renders a yellow-centered layout with a large green “Hello World” text and a light blue button. The interaction is handled by a JavaScript event listener that toggles CSS classes. It uses the Document Object Model (DOM) API via `querySelector` and `addEventListener`, with no external libraries or data sources.

Apr 15, 2026

Loading thumbnail…

Svelte Starter: Dataviz + Personalisierung (Zeitverwendung)

A donut chart visualizes average daily time use in minutes per day across broad activity categories like work, education, and media use for selected age groups. Buttons above the chart switch between demographic cohorts, re-processing the underlying data and updating the chart and legend accordingly. Each ring segment shows its value as a label, and hovering over a segment reveals a tooltip with the exact category and minutes. The visualization is built with Svelte, renders as SVG using the `d3.arc` and `d3.pie` APIs for arc generation, and uses an ordinal color scale from `d3.scaleOrdinal` with the Tableau 10 scheme.

Apr 12, 2026

Loading thumbnail…

Svelte Starter: Timeline

A vertical timeline visualization presents two parallel event sequences, shown on the left and right sides of a central axis. Each event appears as a colored dot that expands into a card with a date, title, and description when clicked. Users can toggle between the two perspectives using the fixed buttons at the top. The layout uses a d3 time scale to position events proportionally, with Svelte managing the interactive state and component rendering.

Apr 12, 2026

Loading thumbnail…

Svelte Starter: Quiz Template

This interactive quiz presents a series of multiple-choice questions about humpback whales, tracking the user's score and displaying a final results screen with the percentage of correct answers. Built with Svelte, the application uses modular components (`Quiz.svelte` and `Question.svelte`) to manage quiz state and user interactions, with quiz data imported from a separate `quizData.js` file. The interface provides immediate visual feedback on answer selection, highlighting correct and incorrect choices before advancing to the next question.

Apr 6, 2026