Final Project Tree Map

Final Project Box Plot

This visualization presents box plots comparing salary distributions across the top ten job categories, sorted by median salary in descending order. The chart uses a horizontal layout with a linear scale for salary values and a band scale for job types, rendering each box plot with quartiles, median line, and whiskers. Interactive tooltips appear on hover, highlighting the box in orange and displaying the job type, median, minimum, and maximum salary. The implementation uses D3 v7 APIs (d3.scaleBand, d3.quantile, d3.median) within a React framework, drawing SVG shapes and axes, with data loaded from a CSV file.

77% match

VVenkataSatyaRamKamini@my.unt.edu

Project

This interactive visualization displays salary distributions by job title using an interactive bar chart. It uses D3.js (d3.v7) to load and process the data from a CSV file, grouping by job title and computing average salaries. A sidebar with range sliders, number inputs, and a dropdown menu allows users to filter by salary range and sort the bars by either salary or job title. The bars are rendered as SVG rectangles, with a hover effect that changes the fill color to highlight individual bars.

PROJECT

This heatmap visualizes salary data across job titles and company sizes, using a blue sequential color scale where darker shades indicate higher salaries in USD. Hovering over any cell displays a tooltip with the exact salary value. Built with D3.js v7, it renders SVG rectangles positioned by scaleBand axes, with a linear color scale and an axis-based legend showing the salary range. The visualization loads data from a merged JSON dataset containing job and salary information.

MMonish Galla

Tree graph

This example shows a hierarchical tree graph of data job listings, grouping job titles by category and displaying salary and location details as leaf nodes. The visualization uses D3.js v7 with an SVG rendering approach, fetching CSV data from a GitHub gist and transforming it into a nested hierarchy. The tree layout (`d3.tree`) positions nodes with curved horizontal links (`d3.linkHorizontal`), while node shapes vary by depth—ellipses for the root, rectangles for category levels, and circles for leaf details. The CSV provides the underlying job data, which is subset to the first ten rows for display.

Ssatishnarne99@gmail.com

Final Project Bar Chart

This interactive bar chart displays the top five average salaries for Data Science job titles in 2023, using a dataset loaded from a GitHub gist. The visualization, rendered as an SVG via D3 v7, sorts salaries in descending order and uses a band scale for the categorical y-axis. Users can toggle individual job titles on or off through checkboxes, which filter the displayed bars. A "Clear All" checkbox resets the visibility state. Hovering over a bar triggers a CSS tooltip, showing the exact job title and salary, while the bar’s fill color changes from steelblue to orange.

Treemap Template in React

This treemap displays hierarchical data with three group leaders and fourteen employees, using color to distinguish parent categories and labels to show names and values. Built with React and D3 v5, the visualization constructs the layout using `d3.hierarchy` and `d3.treemap`, while `d3.scaleOrdinal` assigns colors. The chart renders as SVG, with React’s `.map()` method generating rectangles and text elements instead of traditional D3 joins. Data is fetched asynchronously from a remote JSON file using `d3.json` within a React hook.

Iiblub

Fork of Final Project Box Plot

This fork of a final project displays a horizontal box plot of salary distributions across ten job categories, sorted by median salary in descending order. The visualization uses D3 v7 to compute quartiles, medians, and whiskers from a CSV dataset, rendering the chart as an SVG. Interactive checkboxes allow users to toggle the visibility of job categories, and hovering over a box highlights it in orange while displaying a tooltip with the job title and salary statistics.

75% match

Fork of Final Project Bar Chart

This example visualizes the salary distribution of the top 10 job categories, sorted by median salary, using horizontal boxplots rendered in SVG. The visualization uses D3 v7 to compute quartiles, medians, and whiskers from a CSV dataset, with each boxplot showing salary spread via light blue boxes, red median lines, and black whiskers. Interactive tooltips appear on hover, and checkbox controls (though incomplete in the code) allow users to filter which job categories remain visible. The axes use D3’s `scaleBand`, `scaleLinear`, and `axisLeft`/`axisBottom` APIs.