visualization_makeover

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

79% match

Fork of Fork of Webpage

This example shows the top 10 job titles in a data science salary dataset, ranked by total salary in USD and displayed as a stacked bar graph. Each bar represents a single job title, with color-coded identity and hover effects that increase fill opacity. The visualization loads CSV data from a GitHub repository using `d3.csv`, aggregates salary sums with `d3.rollups`, and sorts/selects the top entries. It renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`, with axes via `d3.axisBottom` and `d3.axisLeft`, plus a legend built from the color scale.

KKiernan Nesslar

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.

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

Barchat1

A stacked bar chart displays the top 10 data science job titles by total salary in US dollars, aggregated from a remote CSV dataset. The visualization uses D3.js v7 with SVG rendering, employing `d3.rollups` to sum salaries per title and `d3.scaleBand`/`d3.scaleLinear` for axes. Each bar is colored via `d3.scaleOrdinal` with `d3.schemeCategory10`, and a legend maps colors to job titles. Hovering increases bar opacity through CSS.

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.

Fork of Webpage

This example shows a stacked bar graph of the top 10 job titles by total salary, using data from a CSV file of data science salaries. Each bar represents a job title, colored via a categorical scale, with salary totals on the y-axis and rotated labels on the x-axis. The code uses `d3.csv` to load data, `d3.rollups` to aggregate salaries, and `d3.scaleBand` and `d3.scaleLinear` to set up the axes. It renders an SVG with `d3.axisBottom`, `d3.axisLeft`, and includes a legend built from the color scale.

76% match