Fork of Final Project Box Plot

100%

Fork of Final Project Box Plot

✓ Published0🌍 Public

Last edited May 6, 2024

Created on May 6, 2024

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.

AI-generated description

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

Similar vizzes

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

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

91% match

Loading thumbnail…

A4_BoxplotPlot

This example visualizes the salary distribution across different job types using boxplots, highlighting the minimum, maximum, median, and quartile ranges for each category. The chart is rendered as an SVG using D3 v7, with interactive hover effects that display the exact max, min, and median values as text annotations. It loads the dataset from an external CSV file containing job titles and salaries, then computes quartiles and draws rectangles, lines, and axes. The code relies on D3 scales like `d3.scaleBand` and `d3.scaleLinear`, along with statistical methods such as `d3.quantile` and `d3.median`.

DDuc Pham

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

81% match

Loading thumbnail…

Project boxplot

This chart displays the average salary for different job titles, using bars with distinct colors and a legend to identify each category. Hovering over a bar reveals a tooltip with the exact job title and salary amount. The visualization is built with D3.js v7, using `d3.csv` to load data, `d3.rollup` and `d3.mean` for aggregation, `d3.scaleBand` and `d3.scaleLinear` for axes, and interactive mouseover events to control tooltip opacity. The SVG render includes rotated x-axis labels and a custom legend.

Mmalampatiramya03@gmail.com

79% match

Loading thumbnail…

Fork of Final Project Violin Plot

This visualization shows how salary distributions vary across four experience levels—Entry-level, Mid-level, Senior, and Executive—in a dataset of employee salaries. It uses kernel density estimation to create a smooth violin plot for each group, displaying the full range of salary values on the y-axis using a linear scale. The chart is rendered as an SVG using D3 v4, with axes and a title added directly to the SVG canvas. Data is loaded from an external CSV file and processed with d3.nest and d3.area to generate the symmetric density shapes.

DDuc Pham

78% match

Loading thumbnail…

Fork of Final Project Violin Plot

This visualization shows how reported salary distributions vary across four experience levels, using a violin plot to display the density of earnings for entry-level, mid-level, senior, and executive roles. The chart encodes salary on the vertical axis and experience category on the horizontal axis, with each violin’s width representing the estimated probability density of salaries within that group. The code builds the plot using D3.js v7, computing kernel density estimates via `kernelDensityEstimator` and the Epanechnikov kernel, and renders the shapes as SVG paths smoothed with `d3.curveCatmullRom`. Data is loaded from a remote CSV file containing survey responses.

DDuc Pham

78% match

Loading thumbnail…

Fork of A4_Bar-chart

This bar chart visualizes average salaries across different job titles using data from a CSV file loaded via D3.js. It displays the distribution of salaries with vertical bars, where hovering over a bar highlights it in orange and shows a tooltip with the exact salary amount. The visualization uses D3 v6's `scaleBand` and `scaleLinear` for positioning, with axes labeled and rotated for readability. The chart is rendered as an SVG element inside an HTML page, with the data fetched from an external GitHub Gist containing job title and salary pairs.

JJorge Melchor

78% match