Fork of Fork of Webpage

100%

Fork of Fork of Webpage

✓ Published0🌍 Public

Last edited Apr 30, 2024

Created on Apr 30, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Barchart2

This stacked bar chart displays the top 10 job titles by total salary in USD, aggregated from a CSV dataset loaded via `d3.csv`, with each bar colored using `d3.scaleOrdinal` and `d3.schemeCategory10`. It renders an SVG with `d3.axisBottom` and `d3.axisLeft` for axes, uses `d3.rollups` to sum salaries per job title, and includes a legend. Bars highlight on hover due to CSS opacity changes. The data source is a remote gist file.

SSrinivasAbburi@my.unt.edu

83% match

Loading thumbnail…

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.

AArungopal Andalam

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

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

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

81% match

Loading thumbnail…

Fork of TAK-9&10

This example shows a pie chart of data science job titles and their corresponding salaries from a CSV file, with a legend displaying each job category. The visualization uses D3 v7 to load the data via `d3.csv`, compute the pie layout with `d3.pie()`, and render arcs using `d3.arc()` in an SVG container. A sequential color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills each segment, while the legend is built with D3 selections appending styled HTML divs. The positioning is done manually via SVG group transformations, and the rendering relies entirely on D3’s SVG path generation.

PPothuguntla Pranitha

79% match

Loading thumbnail…

Fork of Fork of A4_Bar-chart

This example displays a bar chart of average salaries by job title, with each bar colored steel blue and highlighted orange on hover. It fetches CSV data from a remote gist using `d3.text`, parses it into job title and salary pairs, and renders the chart as SVG via D3 v6. The visualization uses `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and includes a tooltip div that appears on mouseover showing the job title and formatted salary.

Ppavan vasamsetti

77% match

Loading thumbnail…

Fork of Fork of task 9 and 10 Q1 1

This example shows a pie chart of job title frequencies from a CSV dataset loaded from a GitHub gist. Each slice is labeled with the job title and its count, and a small color-coded legend is included. The visualization uses D3.js v7 with the `d3.pie` layout, `d3.arc` generator, `d3.rollup` for counting, and `d3.scaleOrdinal` with `schemeCategory10` for colors. Data is fetched via `d3.csv` and rendered as SVG elements.

Ssruthimreddy6@gmail.com

77% match