LeanderBadura@gmx.de

@lefriba·6 public vizzes

Fork of Svelte Starter: Quiz Template

This interactive quiz presents factual questions about humpback whales, with multiple-choice answers for each question. The Svelte application manages quiz logic, tracking the user’s score and progress through state and derived values, and it displays final results with a percentage and a restart option. The user interface renders each question with styled answer buttons, using Svelte’s class directives to indicate selected, correct, and incorrect responses. The quiz uses event dispatching to handle user interactions, such as selecting an answer and advancing to the next question, while the data structure holds four whale-related questions. Feedback is given through color-coded buttons, and a results screen appears after the final question.

Apr 16, 2026

Loading thumbnail…

Fork of Proteste in Serbien

An interactive vertical timeline visualizes the Serbian protests and government responses following the Novi Sad railway station canopy collapse in November 2024. Events from the protest movement appear on the left in red, while government measures appear on the right in blue, with the triggering incident centered at the top. Users click circular markers to expand event descriptions, or use the two top buttons to expand all events from either actor. The timeline uses a D3 time scale to position events proportionally along the vertical axis.

Apr 16, 2026

Loading thumbnail…

Proteste in Serbien

"Proteste in Serbien" is an interactive timeline that contrasts the Serbian protest movement and government actions following the Novi Sad railway station canopy collapse in November 2024. Positioned events are plotted along a central axis, with left-side red entries for protests and right-side blue entries for government measures. Clicking a circular marker reveals event details. Users can filter by clicking fixed "Protestbewegung" or "Regierung" buttons, which dim the opposing side's events. The visualization uses Svelte components and SVG, with time scaling calculated via D3.js's `scaleTime` function to map dates to vertical positions.

Apr 16, 2026

Loading thumbnail…

Serbia

A vertical timeline of Serbia's political history from 2000 to 2013 presents two parallel storylines—democratization and civil society—on opposite sides of a central axis. Each event appears as a clickable dot; selecting one reveals its date, title, and description. The visualization uses Svelte components for layout and interaction, while `d3.scaleTime` maps event dates to vertical pixel positions. Two fixed buttons let viewers filter events by storyline, highlighting all matching entries along the shared timeline.

Apr 16, 2026

Loading thumbnail…

Fork of serbaiJ

A dual-sided timeline compares two perspectives over the same period, with events plotted from two data arrays on either side of a central axis. Buttons toggled by the viewer highlight one perspective or the other, while clicking individual points reveals event details like title and description. The visualization uses a Svelte component structure with D3’s `scaleTime` for positioning, CSS animations for entry, and interactive state management to filter active events.

Apr 16, 2026

Loading thumbnail…

Hello again World

This example shows a simple interactive webpage that displays a portrait of a politician alongside two text messages and a button. The page uses plain HTML, CSS, and JavaScript to create a visual layout with a blue background. Clicking the button toggles a pink background color on the first message and the button itself by adding and removing a CSS class. The interaction relies on the `querySelector` and `addEventListener` methods from the DOM API, with no external libraries or frameworks.

Apr 16, 2026