Skip to main content
SimilarExport ZIP
100%

#HAW New Year's Resolutions

✓ Published1🌍 Public
Nng.tuoanh.cbn@gmail.com
Last edited Dec 5, 2025
Created on Dec 5, 2025
Forked from CV: Bar Chart

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.

AI-generated description

Survey Visualization

A D3.js + React visualization of survey data showing responses by demographic categories (gender and age groups).

Features

  • Interactive bubble chart showing response percentages
  • Toggle between demographic categories (Male, Female, age groups)
  • Responsive design that adapts to container size
  • Click bubbles to highlight selections
  • Orbital visualization with center hub

Data

The visualization displays survey responses across 6 demographic categories:

  • Gender: Male, Female
  • Age Groups: 18-24, 25-49, 50-64, 65+
MIT Licensed

Similar vizzes

Loading thumbnail…

#HAW: Birthday data viz

This visualization displays average weekly birth counts for multiple years as circular, animated dot plots. Each year is represented by a separate radial chart, with dots positioned by day of year and distance from the center encoding weekly average birth count. Built with React and D3.js v7, the chart uses SVG filters for a gooey merging effect and transitions to animate dot positions. Hover interactions enlarge individual dots, and the data comes from a CSV file containing daily live birth statistics.

MMatthias Stahl
75% match
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`.

Nng.tuoanh.cbn@gmail.com
74% match
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.

Wwjo672@haw-hamburg.de
72% match
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.

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

Untitled

A reactive bubble chart visualizes January Medium articles, encoding each post's category by color and its view count by circle radius. Hovering a bubble reveals a tooltip with the article title, category, and number of hearts. The chart relies on `d3.forceSimulation` for layout, `d3.scaleOrdinal` with `schemeCategory10` for colors, and a `d3.scaleLinear` for radius. Data loads from a CSV file via `d3.csv`, and the reusable chart pattern exposes setters for width, height, and column mappings.

Ssergiofco
71% match
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.

Wwjo672@haw-hamburg.de
70% match
Loading thumbnail…

Bubble Chart

This bubble chart visualizes the relationship between age and BMI for approximately 250 individuals, with circle size encoding insurance charges and color distinguishing gender. Built with D3 v7 in a React-agnostic HTML page, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for male/female coloring, and `Math.sqrt` to map charges to radius. Data loads asynchronously from a CSV file via `d3.csv`, and the SVG rendering includes custom axes, labels, and a legend showing size and color ranges.

AArun Pratap
70% 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
70% match