Skip to main content
SimilarExport ZIP
100%

Fork of Fork of CV: Loading CSV Data

✓ Published0🌍 Public
Uudjeffrey.jay@gmail.com
Last edited Jan 23, 2026
Created on Jan 23, 2026

A React-based bar chart displays survey responses on trust in AI advertising in Germany, showing 22% for increased trust and 36% for increased distrust. The visualization uses d3.scaleBand and d3.scaleLinear for axes, while bars are filled with an image pattern from Unsplash via SVG defs and a brightness filter. D3 axis helpers render white labeled axes on a black background, with percentage labels above each bar. The chart reacts to container resizing through a ResizeObserver hook, redrawing with d3 selection methods.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CV: Loading CSV Data

This example presents a bar chart comparing German survey responses on trust versus distrust in AI advertising, with two bars showing 22% and 36% respectively. The visualization uses React with D3 v7 APIs including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`, rendered as SVG. Bars are filled with a building image pattern via D3 `defs` and `pattern` elements, enhanced by a brightness filter, while horizontal grid lines and percentage labels clarify the data values.

Uudjeffrey.jay@gmail.com
95% match
Loading thumbnail…

Fork of Fork of CV: Loading CSV Data

A React and D3 v7 donut chart compares AI consistency (95%) with human variability (5%) in image generation. Each colored arc is rendered using d3.pie and d3.arc generators, with icons and percentage labels positioned via arcGenerator.centroid. Clicking a segment toggles an info panel displaying category details while dimming inactive arcs. Data is hardcoded in App.jsx, and the chart responds to container resize events through a ResizeObserver hook.

Uudjeffrey.jay@gmail.com
82% match
Loading thumbnail…

Fork of CV: Loading CSV Data

This interactive donut chart visualizes the distribution of consistency between AI-generated (95%) and human-created (5%) content, with a clickable segmented display that reveals detailed attributes for each category in a side panel. Built with React and D3 v7, the visualization uses d3.pie and d3.arc to generate SVG paths, with ResizeObserver-driven container dimensions for responsive scaling. The chart features animated opacity transitions on segment selection and a dark-themed info panel with custom styling.

Uudjeffrey.jay@gmail.com
80% match
Loading thumbnail…

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.

Wwuc280@haw-hamburg.de
79% match
Loading thumbnail…

Fork of Fork of CV: Loading CSV Data

This example visualizes the time savings achieved by AI processes compared to traditional methods through a symmetric horizontal bar chart. Three image-processing tasks are displayed, with traditionell (traditional) durations extending left in red and KI (AI) durations extending right in green. The chart loads process data from a local CSV file using `d3.csv`, then renders SVG elements within a React application. The visualization employs D3's `scaleBand` and `scaleLinear` for positioning, with interactive hover effects and value labels on each bar.

Uudjeffrey.jay@gmail.com
79% match
Loading thumbnail…

Fork of CV: Loading CSV Data

This example shows grouped horizontal bars comparing two metrics—"Ermüdungspunkt" (fatigue point) and "Stilkonstanz" (style consistency)—across five image-processing features. The React component loads a local CSV file using d3.csv, parses numeric fields, and renders an SVG chart via d3.scaleBand and d3.scaleLinear. Axis ticks come from d3.axisBottom and d3.axisLeft, with value labels and a color-coded legend appended to the SVG. The chart updates responsively using a ResizeObserver hook.

Uudjeffrey.jay@gmail.com
78% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This chart visualizes polling results for the 2025 German federal election, showing the percentage of votes for each party. The bar chart displays values from a CSV file, with each bar colored by party and labeled with its percentage. A translucent, glowing interval rectangle behind each bar represents the standard error. Built with React and D3 v7, the visualization uses `scaleBand` and `scaleLinear` for axes, and clicking a bar dims the others for focused comparison.

CChristoph Kinkeldey
77% match
Loading thumbnail…

Fork of CV: Loading CSV Data

This example shows a stacked bar chart of time allocation across work sessions, breaking down each session into focused work, interruptions, and recovery percentages. It loads a small CSV file with raw text parsing and renders the data using React with D3 v7 and SVG. The visualization uses d3.stack, scaleBand, and scaleLinear to create the bars, with value labels, axes, and a color-coded legend. A ResizeObserver hook tracks container dimensions to redraw the chart responsively.

Uudjeffrey.jay@gmail.com
77% match