J

johnyedge@gmail.com

@jtxxx23·5 public vizzes

Loading thumbnail…

Heiß auf Tinder!

A playful self-assessment quiz asks ten questions about Tinder behavior, scoring answers to place users into one of four "hotness" categories. The interactive flow moves through an intro card, a progress-bar-backed question card with multiple-choice answers, and a result card that displays the total score and category. Built with Svelte's runes for state management, it uses component props, derived state, and event callbacks to handle navigation and scoring entirely client-side, with no external data source.

Loading thumbnail…

Fork of Fork of Fork of Svelte Starter: Quiz Template

An interactive quiz presents a satirical self-assessment about the user's Tinder dating profile and behavior, culminating in a humorous "Tinder Type" categorization. Built with Svelte, it presents ten multiple-choice questions; each answer selection adds a numeric score via a personalized `TinderTest.svelte` component. The interface progresses through an `IntroCard`, `QuestionCard`, and a `ResultCard`, which displays the final score in a circular badge. The quiz data, including the questions, answers, and result categories with their descriptive text, is hardcoded in a separate `testData.js` module.

Loading thumbnail…

Fork of Fork of Fork of Svelte Starter: Quiz Template

This interactive quiz asks multiple-choice questions about humpback whales, tracking the user’s score and displaying a final results screen with a percentage and restart option. Built with Svelte, it uses component state and derived values to manage the current question, answer selection, and progress, with DOM events for user interaction. The data comes from an embedded quizData.js object, and the UI relies purely on Svelte’s reactive declarations and CSS styling—no external visualization libraries are involved.

Loading thumbnail…

Fork of CV: Pseudo Scatter Plot

This visualization compares the electoral performance of the CDU and Die Linke parties across German federal elections from 1998 to 2025, using a pseudo scatter plot that traces both parties’ vote percentages over time. The chart combines two overlaid line series, with each data point labeled with its exact percentage value, allowing direct comparison between the black CDU line and the magenta Die Linke line. Built with React and D3 v7, it uses `scalePoint` and `scaleLinear` for axes, a D3 `line` generator for the trajectories, and `axisBottom`/`axisLeft` for rendering. The dataset is hardcoded in the application.

Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter, Hello World

This interactive HTML page displays a static "Hello World" message on a light green background, centered within a light yellow layout. Visitors can click a light blue button to toggle the message’s background color between light green and pink, while the button itself also changes to pink during the active state. The example relies on plain JavaScript event handling via `addEventListener` to manipulate CSS classes on the message and button elements, with no external libraries or data sources involved. Styling is defined in an embedded `<style>` block using flexbox grid centering.