Skip to main content
SimilarExport ZIP
100%

Fork of CV: Loading CSV Data

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

Fork of CV: Loading CSV Data

This example shows how to load and visualize a small CSV dataset as interactive circles in an SVG. The chart displays five data points positioned by their x and y coordinates, with clickable circles that highlight the selected point. Built with React and D3 v7, the App component uses d3.csv to parse the data, scales it with d3.scaleLinear, and renders the visualization through d3.select and selection.join. A custom useContainerDimensions hook tracks the container size via ResizeObserver, enabling responsive scaling of the fixed-domain coordinates.

Uudjeffrey.jay@gmail.com
81% match
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
81% match
Loading thumbnail…

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.

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

Fork of Fork of Rendering Data with React & D3

This interactive color wheel visualizes all CSS named colors as segments in a customizable pie chart, loaded from a CSV data source. Users can sort colors by hue, lightness, saturation, or alphabetically, and adjust inner and outer radii to create donut variations. Hovering reveals details like hex, RGB, HSL, and luminance values alongside aggregate statistics. The visualization uses React 18 for UI state management, d3.csv for data loading, and d3.pie and d3.arc for SVG path generation.

NNita
80% 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
80% match
Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes the proportion of full versus not-full scores from a CSV dataset, displaying each category’s label on its slice and a percentage tooltip on hover. Built with D3 v5, it uses `pie()` and `arc()` to generate the chart, `scaleOrdinal` for colors, and `csv()` to load the data. Mouseover events trigger a tooltip showing the computed percentage, while hover effects increase slice opacity.

SshanLU999
79% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Loading and Parsing CSV Data

This visualization displays the job placement status of students from a CSV dataset, comparing the percentages of placed and unplaced individuals through a pie chart. The page also presents a text summary of the dataset's size, row count, and column count. Built with React and D3 v7, it loads data via `d3.csv` and uses `d3.pie` to compute arc segments, with `d3.scaleOrdinal` for color mapping. The chart is rendered as SVG, with labels showing each category's name and percentage.

Cchamarthisreenivasvarma@gmail.com
79% match