Skip to main content
SimilarExport ZIP
100%

Final Project Bar Chart

✓ Published2🌍 Public
DDuc Pham
Last edited May 6, 2024
Created on Apr 13, 2024
Forked from A4_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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Final Project Bar Chart

This bar chart displays Data Science Salaries from 2020 to 2024, sourced from a CSV file in a GitHub repository. The visualization uses D3 v5 to render an SVG with a blue bar for each year's average salary. It includes an interactive tooltip that appears on mouseover, showing the specific year and salary value. The chart features rotated x-axis labels and styled axes, with the bars animated via D3's transition methods for the tooltip opacity.

Kkowshiksamudrala08@gmail.com
88% 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
84% match
Loading thumbnail…

12

This interactive bar chart visualizes average salaries across job titles in the data science field, using a Kaggle dataset with information on job categories, experience levels, company sizes, employment types, and locations. A dropdown menu system lets users filter by these attributes, and D3.js functions including `select`, `group`, and `mean` recalculate and redraw the bars dynamically. The SVG visualization sorts titles by descending salary, with tooltips and resize handling, and the code structure supports exploring salary variations by company size, experience, and job category.

Hharisankarakeluth@my.unt.edu
83% match
Loading thumbnail…

bar2

This example shows the top 10 job titles from a data science salaries dataset, ordered by total salary in descending order, with each bar colored according to its job title. The visualization aggregates salary values using `d3.rollups`, sorts them with `d3.descending`, and renders stacked bars as SVG rectangles with a legend. It uses D3 v7 scales (`scaleBand`, `scaleLinear`, `scaleOrdinal`), axes (`axisBottom`, `axisLeft`), and a categorical color scheme (`schemeCategory10`). Data is loaded asynchronously from a CSV file via `d3.csv`.

AArungopal Andalam
83% 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
83% match
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
83% match
Loading thumbnail…

Interactive Bar Chart Analysis

This interactive bar chart displays the average salary distribution across various data science job titles, sourced from a CSV dataset of data science salaries. Users filter the displayed salary range using a slider and numeric inputs, while a dropdown menu toggles sorting by salary or job title. The chart, rendered with D3 v7 as an SVG, uses `d3.rollup` to aggregate and `d3.mean` to calculate averages, with `d3.scaleBand` and `d3.scaleLinear` handling the axes. Bars update dynamically via a custom `updateChart` function and include hover tooltips.

GGeorge Oyosa
83% match
Loading thumbnail…

Data & Colour Example

This interactive visualization displays the top 10 highest-paying job titles within a selected category, using a horizontal bar chart where bar lengths represent mean salaries and color intensity encodes salary magnitude. The data is loaded from a GitHub repository as CSV files, and the visualization updates via a dropdown menu. The code utilizes D3.js v6 APIs including `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleQuantile`, and `d3.transition`, with animated transitions (2-second duration) that smoothly adjust bar positions, widths, and fill colors, while also re-rendering the axes via `d3.axisLeft` and `d3.axisBottom`.

WWayneFd
83% match