Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

✓ Published0🌍 Public
Llohithkumar51001@gmail.com
Last edited Apr 10, 2026
Created on Apr 10, 2026

This donut chart visualizes the share of jobs by AI risk category, using a qualitative green-yellow-red scale for low, medium, and high risk. It reads a TSV/CSV file via `d3.text` and `d3.csvParse`, then aggregates counts with `d3.rollup`. The SVG rendering uses `d3.pie` and `d3.arc` to generate the donut arcs, with an interactive tooltip on `mousemove` and a legend built with `d3.selectAll`. The chart also displays the total job count in the center, with all styling handled through HTML/CSS.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

A bar chart displays average AI risk scores across job titles, sorted from highest to lowest, with each bar colored distinctly and a custom tooltip showing the exact score on hover. The visualization loads CSV or TSV data from a GitHub gist, parses it, and aggregates scores using `d3.rollup` and `d3.mean`. Rendered as SVG with D3 v7, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisLeft`/`axisBottom`, while a separate HTML legend maps job titles to their colors via `d3.schemeTableau10` and other palettes.

Llohithkumar51001@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

This interactive scatter plot visualizes the relationship between salary (in USD) and AI risk score for various job titles, with each point colored by job category based on data loaded from a GitHub Gist. It uses d3.csvParse or d3.tsvParse to handle the data, d3.scaleLinear for both axes, d3.scaleOrdinal with combined color schemes, and d3.axisBottom/axisLeft to render gridlines and tick labels. Hovering over a circle triggers a tooltip showing job title, country, salary, and AI risk score, while a legend displays the first twelve job categories.

Llohithkumar51001@gmail.com
86% match
Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This visualization displays a bubble chart comparing average job openings across primary skills, with bubble size indicating average skill demand score and color distinguishing each skill category. The chart, rendered as SVG using D3 v7, loads CSV data from a GitHub gist and aggregates records by primary skill using `d3.rollup` and `d3.mean`. It employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleSqrt` for positioning and sizing, `d3.schemeTableau10` for color, and `d3.axisLeft` and `d3.axisBottom` for axes. Interactive tooltips appear on mouseover, and a legend lists all skills with their corresponding colors.

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

Fork of Fork of Fork of React & D3 Starter PIE

This example presents a pie chart visualizing the distribution of students who use AI compared to those who do not, based on a CSV dataset loaded from GitHub. The chart uses d3.pie and d3.arc to generate SVG slices, with d3.rollups aggregating counts from the loaded data. Interactive tooltips display exact student counts and percentages on hover, while percentage labels appear inside each slice and a legend shows category totals. The color scale uses d3.scaleOrdinal with a custom palette.

Mmichael_chuxs@yahoo.com
80% match
Loading thumbnail…

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

This example loads a job placement CSV dataset using `d3.csv` and displays a summary of the data’s size, row count, and column count. It then calculates the number of placed versus unplaced students and renders a simple SVG pie chart with `d3.pie` and `d3.arc`, showing each category’s label and percentage. The chart uses an ordinal color scale and is styled with custom CSS in a React-compatible HTML page, though the interaction logic itself is plain JavaScript with D3 v7.

Cchamarthisreenivasvarma@gmail.com
80% match
Loading thumbnail…

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

This example loads a job placement CSV dataset using `d3.csv` and displays a summary of the data’s size, row count, and column count. It then calculates the number of placed versus unplaced students and renders a simple SVG pie chart with `d3.pie` and `d3.arc`, showing each category’s label and percentage. The chart uses an ordinal color scale and is styled with custom CSS in a React-compatible HTML page, though the interaction logic itself is plain JavaScript with D3 v7.

Cchamarthisreenivasvarma@gmail.com
80% match