Fork of CV: Loading CSV Data

Fork of Fork of CV: Loading CSV Data

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.

95% match

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.

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.

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.

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.

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.

80% match

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