Skip to main content
SimilarExport ZIP
100%

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 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.

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

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

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.

Llohithkumar51001@gmail.com
86% match
Loading thumbnail…

Fork of React & D3 Starter

A bar chart displays average salary by country, parsed from a GitHub Gist CSV or TSV file via `d3.text` and `d3.csvParse` or `d3.tsvParse`. It aggregates data with `d3.rollup` and `d3.mean`, then sorts countries using `d3.descending`. The visualization uses D3 v7 scales (`d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`), axes, and SVG rectangles. Interactive tooltips appear on `mousemove`, while a separate HTML legend is built with D3 selections.

Llohithkumar51001@gmail.com
83% match
Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter Scatter plot

This scatter plot shows the relationship between daily study hours and grade change for students, comparing those who use AI against those who do not. The D3.js v7 code loads CSV data via `d3.csv`, filters incomplete records, and renders SVG circles colored by AI usage with an ordinal scale. Interactive tooltips appear on mouseover, while axes and a legend are generated using `d3.axisBottom`, `d3.axisLeft`, and scale functions for linear positioning.

Mmichael_chuxs@yahoo.com
82% match
Loading thumbnail…

Fork of Fork of React & D3 Starter

A line chart shows average annual salary from 2015 to 2035, with a monotone-smoothed trend line and circular markers. Tooltips reveal exact year and salary values on hover. The visualization loads a CSV (or TSV) via `d3.text` and parses it with `d3.csvParse` or `d3.tsvParse`, aggregates records into yearly means using `d3.rollup` and `d3.mean`, and renders axes, grid, and labels through `d3.axisLeft` and `d3.axisBottom`, with `d3.scaleLinear` and `d3.line` for positioning and path generation.

Llohithkumar51001@gmail.com
82% 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 chart 2

This interactive scatter plot visualizes the relationship between wage and potential ratings, with each circle representing a data point colored by wage value. The visualization includes hover tooltips displaying exact values, click interactions that enlarge points and show details, and buttons to reset the zoom or filter for potential values above 70. The chart uses D3 v7 with d3.scaleLinear for axes, d3.scaleSequential with the Viridis interpolator for colors, and d3.select transitions for smooth animations. Data loads from a CSV file into SVG circles rendered on a white background.

Ssriharshithaanugu5@gmail.com
80% 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
80% match