wjo672@haw-hamburg.de

@sophiapilina·5 public vizzes

Fork of Fork of HTML Starter

This example displays three Datawrapper choropleth maps in a side-by-side three-column layout, filling the viewport with a responsive design. Each map is embedded via an iframe and occupies exactly one-third of the screen width, with equal column distribution and full-height alignment. The page uses pure HTML, CSS, and JavaScript, with index.js assigning Datawrapper embed URLs to respective iframe elements, while styles.css applies flexbox layout, borders, and shadows for visual separation.

Jan 29, 2026

Loading thumbnail…

Make a guess Viz

A quote animates word-by-word before presenting a multiple-choice question about whether the statement contains a hidden message. The visualization reveals the answer and explanatory feedback upon selection, then offers a reset to replay the experience. The React app manages the animation state, while CSS transitions and keyframes handle the word-by-word reveal, the slide-up entrance of the question, and the fading of options. The code defines the quote, options, and feedback logic directly within the JavaScript component.

Jan 29, 2026

Loading thumbnail…

Fork of HTML Starter

This example renders a static webpage that displays the text “Hello HTML!” prominently in the browser. The page is built with a simple HTML structure that links to a separate stylesheet, which uses CSS to style the message with a large font size. The JavaScript file contains only a console log statement, showing no interactive or data-driven visualization features. The example relies on standard web technologies—HTML, CSS, and JavaScript—rather than any specific data-processing or charting libraries.

Jan 23, 2026

Loading thumbnail…

#HAW: Birthday data viz

This dashboard displays daily live births in Germany from 2020 to 2024, plotting 1,826 data points as a line chart with clickable and hoverable circles. The visualization uses React for state management and D3.js's `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to render the time series. A tooltip shows the date and birth count on hover, while selected points are highlighted in red.

Jan 16, 2026

Loading thumbnail…

Fork of #HAW: Birthday data viz

This fork of a "HAW: Birthday data viz" example presents daily birth counts across several years as a monthly line chart. A color-coded year selector lets the user switch between datasets, each rendered as a distinct colored line with a matching gradient area beneath it. The visualization is built with React for state and UI, while D3 v7 (via `csv`, `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft`) handles data parsing and chart rendering. The code loads German-format dates from a CSV file, computes day-of-year values, and displays the time series on an SVG canvas with a dark theme.

Nov 28, 2025