CS360 - Project Alpha Release

100%

CS360 - Project Alpha Release

✓ Published0🌍 Public

Last edited Apr 25, 2024

Created on Apr 13, 2024

Forked from A9 - Proportional symbols map

This visualization presents salary distributions across data science job titles using four linked D3 charts: a horizontal bar chart, a box plot, a violin plot, and a multi-set bar chart. The code loads salary data from a CSV file with job titles and salaries, sorts it, and renders the charts as SVG elements. It uses d3.scaleBand and d3.scaleLinear for the bar chart, alongside additional D3 v4 and v7 APIs for the statistical plots, all embedded in a React-based HTML page with custom CSS styling.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

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.

VVenkataSatyaRamKamini@my.unt.edu

80% match

Loading thumbnail…

Project1

A collection of bar charts, scatter plots, and pie charts visualizes data science salary trends. The charts include a bar chart of total salary by job title, a scatter plot of salary versus experience level, a top-10 job title salary bar chart, a stacked bar chart of employment types, and pie charts for skills and experience levels. Built with D3.js (v3 and v7), the examples use SVG rendering, `d3.scaleBand`, `d3.scaleLinear`, `d3.rollup`, `d3.pie`, and `d3.arc`. Data is loaded from a remote CSV file containing data science salary information.

AArungopal Andalam

80% match

Loading thumbnail…

Data Viz project

This example shows a pie chart and a stacked bar graph depicting data science salary information, with the pie chart breaking down experience levels and the bar graph ranking the top ten job titles by total salary. Both visualizations load salary data from a remote CSV file and use D3.js v7 APIs, including `d3.rollup` and `d3.rollups` for aggregation, `d3.pie` and `d3.arc` for pie slices, and `d3.scaleOrdinal`, `d3.scaleBand`, and `d3.scaleLinear` for chart scales. The code renders interactive SVG elements with hover effects on the bars, while the pie chart displays count labels, all styled with categorical color schemes.

AArungopal Andalam

80% match

Loading thumbnail…

A4_Bar-chart

This bar chart visualizes average salaries for data science job titles, loaded from a CSV file via `d3.text`. The visualization uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis to render the SVG bars. Interactive tooltips appear on mouseover, changing the bar’s fill color to orange and displaying the job title and salary. Axis labels, a chart title, and rotated x-axis text are added using D3’s axis components.

DDuc Pham

79% match

Loading thumbnail…

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.

DDuc Pham

79% match

Loading thumbnail…

A10_Part 4 Black & White Hat

This example displays boxplots for salary distributions across five data science job types. The visualization uses an SVG rendering with D3.js v7, loading salary data from a CSV file hosted on GitHub. It includes interactive tooltips that appear on mouseover, showing the maximum, minimum, and median salary for each job category. The chart applies a black-and-white styling with red highlights during hover interactions, and uses d3.scaleBand and d3.scaleLinear to map the categorical and continuous axes.

DDuc Pham

78% match

Loading thumbnail…

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.

DDuc Pham

78% match

Loading thumbnail…

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.

DDuc Pham

78% match