wuc280@haw-hamburg.de

Game 1

This interactive quiz asks how the number of xenophobic crimes has developed over the past two decades, offering four answer choices. After a selection is made, the app immediately reveals whether the guess is correct, with the correct answer being that the figures have risen sharply in recent years. Built with React and using the `useState` hook, the interface disables all buttons after a response and displays a color-coded result message. The design uses a plain card layout and styled button components, with no data visualization or external charting library involved.

Fork of Fork of HTML Starter

Fork of CV: Pseudo Scatter Plot

Fork of CV: Bar Chart

This interactive bar chart displays the decline of xenophobic crimes in Germany from 2001 to 2024, prompting users to guess whether numbers increased or decreased before revealing the correct answer and visualization. Built with React and D3 v7, the chart uses `scaleBand` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and renders SVG bars from CSV data. An overlay system manages the question and result states, with CSS transitions revealing the chart only after the user submits a guess.

Unemployment rate in UK #HAW

This interactive line chart visualizes the UK unemployment rate from 1971 to 2024, using data from a CSV file. Users can toggle between yearly, quarterly, or monthly data aggregation and filter by time period. Built with React and D3 v7, the visualization draws a line path and axes, with hoverable transparent circles that trigger a tooltip showing the date and unemployment percentage.

abc

This visualization shows the UK unemployment rate from 1971 to 2025 as a line chart, with a hover tooltip displaying the year and exact rate for each data point. The chart uses D3.js v7's `scaleLinear`, `line`, and `axisBottom`/`axisLeft` to render the line and axes within a React component. The data comes from a CSV file containing annual, quarterly, and monthly unemployment figures, and the visualization filters the data to include only annual entries. The code implements interactive hover detection using transparent circles, making the tooltip and highlight circle appear when the cursor is near a data point.

Unemployment rate in UK #HAW25

This interactive line chart visualizes UK unemployment rates from 1971 to 2024, with data parsed from a CSV file. Users can filter by year range using dual sliders, toggle the line visibility via a checkbox, and view statistical summaries for the selected period. The visualization uses React with D3 v7, leveraging `d3.csv` for data loading, `d3.scaleLinear` for scales, and `d3.line` for the path generation. A hover overlay with bisector-based nearest-point detection shows tooltips with exact values.

HAW25

This visualization is a choropleth world map showing the most recent population data for each country from a CSV file. It uses a sequential color scale with a square-root transform to encode population values, where darker colors indicate higher populations. Countries without data are rendered in gray. The map is drawn using D3.js with the `d3.geoNaturalEarth1` projection and `d3.geoPath` on top of TopoJSON data from the world-atlas library, with pan and zoom supported.

Share of people who said they were asked for a bribe or paid one, 2024 #HAW25

The visualization presents two static SVG maps displayed side-by-side: a world map and a map of the United States, with all countries and states rendered in a constant blue color. The maps show geographic boundaries rather than a data-driven choropleth, with an interactive tooltip that reveals the name of each country or state on hover. The code uses D3.js v7 with `d3.geoNaturalEarth1()` and `d3.geoPath()` for map projections, and loads the world geometry from a TopoJSON file via the `topojson-client` library. While the title references 2024 bribe data, the implemented visualization displays only uniform geographic shapes without any data encoding.