Skip to main content
SimilarExport ZIP
100%

Umfrage

✓ Published1🌍 Public
Nng.tuoanh.cbn@gmail.com
Last edited Jan 16, 2026
Created on Jan 16, 2026

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.

AI-generated description

Discrimination Experience Guessing Game

An interactive guessing game where players predict the percentage of people who have experienced discrimination across demographic groups with migration backgrounds.

Features

  • Multi-step Survey: Interactive questionnaire with 4 demographic questions
  • Guessing Game: Interactive sliders to guess discrimination percentages
  • Data Visualization: Bubble chart comparing discrimination rates across groups
  • Accuracy Scoring: Instant feedback on how accurate your guesses were
  • Interactive Elements: Hover and click interactions for detailed insights
  • Responsive Design: Adapts to different screen sizes
  • Animated Transitions: Smooth animations between survey steps and visualizations

How to Play

  1. Answer Survey Questions: Complete a 4-question survey about your experiences and background
  2. Make Your Guesses: Use interactive sliders to predict the percentage of discrimination experienced by:
    • People with migration background
    • People without migration background
  3. See Results: Compare your guesses with actual survey data and view your accuracy score
  4. Learn Insights: Discover how discrimination rates vary across demographic groups

Data

The visualization uses data comparing discrimination experiences:

  • With migration background: 41.9% experienced discrimination
  • Without migration background: 25% experienced discrimination

Key Insight

People with a migration background experience discrimination at significantly higher rates compared to those without, highlighting systemic inequalities that need to be addressed.

Technologies

  • React 19
  • D3.js
  • CSS3 Animations
  • ES Modules
MIT Licensed

Similar vizzes

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.

Nng.tuoanh.cbn@gmail.com
71% match
Loading thumbnail…

Untitled

This interactive bar chart displays the percentage of survey respondents by racial group who overreport voter turnout in three U.S. election years (2008, 2012, 2016). Buttons trigger updates between datasets, animating bar heights via D3 transitions. The visualization uses D3 v6 with `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and d3-axis to render both axes. Each bar’s y-position and height are recalculated from the value property, with a 1000-millisecond transition applied to all entering, updating, and exiting rectangles.

Mmandu427
69% match
Loading thumbnail…

Untitled

This interactive parallel coordinates chart visualizes sociodemographic factors and discrimination impacts on Perceived Stress Scale (PSS) scores, with lines colored by event type. Users can drag axes to reorder dimensions. The visualization uses d3.v3 with SVG rendering and animation, featuring ordinal color scales, linear scales for each dimension, and d3.behavior.drag for axis interaction. Data is loaded from a CSV file containing categorical variables like sex, race, income, and education.

Mmuzzheng
68% match
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.

Nng.tuoanh.cbn@gmail.com
67% match
Loading thumbnail…

Untitled Document

This interactive donut chart displays survey data across gender, age, and race categories from a local JavaScript dataset. Three buttons let users switch between datasets, triggering a new pie chart with animated arc transitions using `d3.pie`, `d3.arc`, and `transition.attrTween`. The SVG rendering applies category-specific colors via a lookup function and shows tooltips on hover using D3 mouse events. SVG paths are drawn with a donut inner radius, and the chart initializes with the gender data on load.

GGerardoFurtado
67% match
Loading thumbnail…

Interactive Demographic Donut Chart

This interactive donut chart visualizes the distribution of players across demographic categories, showing subcategories like age ranges (18–24, 25–34) and gender (male, female) as colored slices with hover tooltips displaying percentages and counts. A dropdown menu lets users switch between age and gender views, triggering animated transitions between datasets. The visualization uses d3.pie, d3.arc, d3.scaleOrdinal, and d3.transition in SVG, with data loaded from a CSV file via d3.csv. Hover interactions and a legend with category labels enhance readability.

Iindira-antgrvty
67% match
Loading thumbnail…

Untitled

Interactive buttons update a bar chart showing the percentage share of a sample that overreports voter turnout, with separate bars for female and male groups across the 2008, 2012, and 2016 datasets. The visualization uses D3.js v6 with an SVG rendering approach, where clicking a button triggers a transition that updates the x and y axes and smoothly animates the bar heights over one second. The code defines three static data arrays and employs d3.scaleBand for the categorical axis, d3.scaleLinear for the value axis, and transition methods to animate the chart between states.

Mmandu427
66% match
Loading thumbnail…

Final Project Data Viz

This interactive dashboard presents hate crime incidents in San Francisco, revealing the distribution of victims across suspect racial groups, bias types, offensive acts, and yearly trends. It combines a horizontal bar chart, a treemap, a bubble chart, and a time-series bar chart, all rendered as animated SVG graphics. The visualization uses D3 v7 APIs such as `d3.select`, `d3.csv`, `d3.rollups`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, with hover-based tooltips for detailed data inspection, sourcing from the PD-Investigated-Hate-Crimes.csv file.

Nnathanjmuljadi@gmail.com
66% match