ng.tuoanh.cbn@gmail.com

@TuOanh-HAW·8 public vizzes

Fork of Attacks

A cluster of small grey circles represents over two thousand xenophobic attacks in Germany during 1992, while twenty larger red circles mark the locations of fatal incidents. This visualization uses a force-directed layout with `d3.forceSimulation` and `d3.forceCollide` to pack circles tightly inside an invisible boundary. The data comes from a CSV file and shows that fatality-free attacks vastly outnumber lethal ones, emphasizing the scale of the phenomenon.

Feb 9, 2026

Loading thumbnail…

Attacks

This visualization maps 21 far-right extremist attacks in Germany in 1992, each represented by a red bubble, within a dense grey field of over 2,000 simulated smaller circles that convey the broader scale of incidents. The red bubbles are sized uniformly and positioned using a seeded random function, while a d3.forceSimulation with a forceCollide constraint packs all circles tightly into a circular boundary. The data comes from a CSV file listing attack names, locations, dates, and victim counts, rendered as a React component using d3.csv for loading and d3.select for SVG manipulation.

Jan 23, 2026

Loading thumbnail…

Fork of HAW: Bday Data viz

This interactive bubble chart visualizes the human toll of terrorist attacks, encoding each incident as a circle whose size and red color intensity correspond to the number of deaths. Built with React and D3 v7, the visualization uses `d3.forceSimulation` to position the bubbles in a force-directed layout, while custom hover interactions with `transition` and event listeners reveal detailed tooltips with the location, date, and death count. The are sized using a linear `radiusScale` and colored via a `colorScale`, both derived from the `attacksData` dataset.

Jan 20, 2026

Loading thumbnail…

Fork of Umfrage

This example presents a survey-driven data visualization of terrorist attack death tolls in Europe from 2015 to 2020. After users submit their guesses via sliders, the results phase renders an animated SVG bubble chart where circle size and color encode death counts, plotted against year on the x-axis and deaths on the y-axis. The visualization uses React for state management, d3.v7's `scaleLinear`, `selection.join`, and `.transition().ease()` for animated updates, with data loaded from CSV. Interactive features include tooltips on hover and clickable bubbles.

Jan 20, 2026

Loading thumbnail…

Umfrage

An interactive guessing game visualizes survey data on discrimination experiences across demographic groups, comparing user predictions with actual percentages. Participants adjust sliders to estimate rates, then view animated bubble charts using D3.js v7 and React that display the results with hover tooltips and comparative accuracy scoring. The visualization uses D3 scales and SVG rendering to represent data from a CSV file, showing that people with migration backgrounds report higher discrimination rates than those without.

Jan 16, 2026

Loading thumbnail…

Umfrage

This example demonstrates a minimal HTML page that integrates SVG fundamentals with a simple text message. The page displays "Hello HTML!" in a large, centered font using a stylesheet, while the JavaScript module currently only logs a message to the browser console. The visualization relies on standard HTML, CSS, and vanilla JavaScript without external libraries or data sources. The rendering approach is basic DOM manipulation with no interactive or dynamic data visualization features implemented.

Jan 16, 2026

Loading thumbnail…

#HAW New Year's Resolutions

This interactive bubble chart visualizes New Year’s resolution survey responses by demographic category, with gender and age group buttons toggling the displayed percentages. The visualization arranges color-coded bubbles in an orbital layout around a central hub, using D3 transitions to animate circles and connecting lines into position. React manages state and container dimensions, while D3’s scaleLinear and selection APIs render the responsive SVG and handle click interactions that highlight individual responses.

Dec 5, 2025

Loading thumbnail…

HAW: Bday Data viz

This visualization compares annual birth statistics across four years by rendering each year as a hospital building, with the number of birth dots inside representing relative crowdedness. React manages the component state and container sizing via a custom `useContainerDimensions` hook, while D3 v7 handles SVG rendering and data joins through `d3.select` and `d3.csv`. The chart pulses with an interactive hover effect on hospital bodies, and the code explicitly generates synthetic multi-year data by applying variations to the loaded CSV totals from `data.csv`.

Nov 28, 2025