Fork of Fork of Fork of Basic Revised Scatter Plot with React & D3 using Global AI Content Data

100%

Fork of Fork of Fork of Basic Revised Scatter Plot with React & D3 using Global AI Content Data

✓ Published1🌍 Public

Last edited Sep 19, 2025

Created on Sep 18, 2025

Forked from Fork of Fork of Basic Scatter Plot with React & D3 using Global AI Content Data

This scatter plot visualizes the relationship between automation probability and employment numbers for various occupations in New York. Each circle represents an occupation, with position encoding automation probability on the x-axis and log-scaled employment on the y-axis, while circle size reflects the product of both values. The visualization uses React and D3 v7, employing `d3.csv` and `d3.dsv` for data loading, `scaleSqrt` for radius scaling, and `scaleLog` for the logarithmic y-axis. Labels highlight the twelve highest-impact occupations.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3 using Global AI Content Data

This scatter plot visualizes the relationship between automation probability (x-axis) and New York employment counts (y-axis) for individual occupations. Built with React and D3 v7, it loads occupation data from a CSV file and renders circles for each role. The visualization uses D3’s scaleLinear for axes, axisBottom and axisLeft for ticks, and extent to compute domains. The React app handles CSV parsing and data cleaning, including normalization of headers and numeric values.

Ppszyarto@wpi.edu

95% match

Loading thumbnail…

Fork of Fork of Basic Scatter Plot with React & D3 using Global AI Content Data

This scatter plot visualizes the probability of automation for various occupations against their employment counts in New York, using global AI content data loaded from a CSV file. Built with React and D3 v7, it renders circles scaled by a fixed radius, with axes, labels, and a linear scale for both dimensions. The app normalizes headers, parses numeric values, and filters incomplete rows before drawing, employing D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and the join operator for efficient SVG updates.

Ppszyarto@wpi.edu

95% match

Loading thumbnail…

Vibe Transfer Test

This visualization plots the relationship between automation probability and employment levels for various occupations in New York, using a bubble chart where point size encodes the estimated impact of automation. The data comes from a CSV file containing SOC codes, occupation titles, probability scores, and job counts. The example demonstrates how AI can transfer visual styling between projects, combining a dark gradient background with glowing cyan points. The implementation uses D3 v7 scales (`scaleLinear`, `scaleLog`, `scaleSqrt`), axis generators, and SVG filters for the glow effect, all managed within a React component.

CCurran Kelleher

75% match

Loading thumbnail…

Automation and Its Impact on Jobs

This scatterplot visualizes the relationship between median income, probability of automation, and total employment across occupations. Each circle represents an occupation, with position encoding income and automation risk, while circle size reflects total employment and color distinguishes typical education requirements. The visualization uses d3.csv to load data, d3.scale.linear for scales, d3.svg.axis for axes, and includes an interactive tooltip. Data comes from automation.csv, rendered as SVG with hover effects for detailed exploration.

CConnor Rothschild

74% match

Loading thumbnail…

Automation and Its Impact on Jobs

This scatterplot shows the relationship between median income and the probability of automation for various occupations, with circle size representing total employment and color indicating typical education requirements. The visualization uses d3.v3 to load CSV data from a GitHub repository, map values to x and y scales, and render SVG circles with dynamic sizing. Hover interactions appear implemented via a tooltip element, while the chart includes axis labels for median income and automation probability, emphasizing how higher-paying jobs generally face lower automation risk.

CConnor Rothschild

73% match

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

This scatter plot visualizes the relationship between employee Stress Level and Burnout Level, using data from a CSV file. Each circle represents an employee, positioned by stress on the x-axis and burnout on the y-axis, using D3's `scaleLinear` and `extent` functions. The React app loads the data with `d3.csv`, formats it, and renders the visualization via a `viz` function that uses D3's `select` and `.join` API to create and position the circles.

MMatt Hagger

73% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Global AI Content Impact Dataset - Set5

This fork-of-a-fork visualization provides an interactive scatter plot of the Global AI Content Impact Dataset, showing relationships among numeric columns like AI Adoption Rate, Job Loss, and Revenue Increase, colored by categorical fields such as Country or Industry. A view switcher toggles between scatter and trends views, while dropdowns and checkboxes let users select dimensions. Built with D3 v7, it fetches CSV data, coerces values with custom parsing, and renders SVG charts with dynamic controls.

Ppszyarto@wpi.edu

72% 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

72% match