Skip to main content
SimilarExport ZIP
100%

Bar Chart Data Viz Final

✓ Published2🌍 Public
SShazil Taqi
Last edited Apr 23, 2024
Created on Apr 12, 2024
Forked from HTML Starter

This bar chart visualizes the distribution of starting median salaries across different college types, with each bar representing a school and its salary value. The visualization uses D3.js v7 within an HTML page, employing `d3.csv` to load data from a GitHub gist, `scaleBand` and `scaleLinear` for axes, and SVG `rect` elements for rendering bars. Interactive tooltips appear on hover, displaying the school name, salary, and type via `mouseover` events. The chart includes rotated x-axis labels and a customized y-axis grid for readability.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Multiple bar chart Data Viz Final

This visualization displays a matrix of six bar charts comparing average salary metrics across different school types, using data loaded from a CSV file of college earnings. Each chart represents a different salary variable, such as Starting Median Salary or Mid-Career 90th Percentile Salary, with bars colored steelblue that turn orange on hover. The code uses d3.csv for data loading, d3.rollup for aggregating averages by school type, and d3.scaleBand and d3.scaleLinear for axes, rendering SVG charts with interactive tooltips.

SShazil Taqi
90% match
Loading thumbnail…

Scatter Plot Data Viz Final

This scatter plot compares starting median salary against mid-career median salary for various colleges, with each dot colored by school type (e.g., public, private). It uses D3 v7 with SVG rendering, implementing linear scales for both axes, an ordinal color scale, and a legend mapping school types to colors. Interactive tooltips appear on hover, showing the school name, both salaries, and school type. Data comes from a CSV file loaded via `d3.csv`, and the visualization includes labeled axes and a title.

SShazil Taqi
87% match
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
80% 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
80% 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
80% match
Loading thumbnail…

Bar chart[salary analysis]

This bar chart visualizes salary range distributions, showing the count of individuals within each salary bracket. The horizontal bars represent salary ranges on the y-axis with their corresponding counts on the x-axis, ordered from lowest to highest salary range. The visualization uses D3.js v5 with React, rendering as an SVG. Data is loaded from a CSV file containing salary ranges and their frequencies. The chart employs d3.scaleLinear for the x-axis and d3.scaleBand for the categorical y-axis, with axis components created using d3.axisLeft and d3.axisBottom.

Kkaviya-ds
80% match
Loading thumbnail…

Strip Plot with jittering

This visualization uses a jittered strip plot to compare starting median salaries across different school types, with each circle representing an individual school. The plot employs D3.js v7 to load CSV data, create linear and band scales for axes, and render SVG circles with randomized horizontal jitter to reduce overlap. Colors distinguish school types using `d3.scaleOrdinal` with `d3.schemeCategory10`. Interactive tooltips appear on mouseover, displaying the school name, type, and salary. The code demonstrates axis labeling, dynamic jittering, and event-driven tooltip transitions.

SShazil Taqi
79% match
Loading thumbnail…

Q1

This bar chart displays the average salary for various job titles, using data loaded from a remote CSV file. The visualization renders as an SVG with colored bars, a rotated x-axis for readability, and hover tooltips that reveal exact salary values. The code employs D3 v7 APIs including `d3.csv`, `d3.rollup`, `d3.mean`, `d3.scaleBand`, and `d3.scaleLinear`. Each bar is colored via a categorical ordinal scale, and mouse events trigger tooltip transitions to provide interactive feedback.

Ssindhuja27b@gmail.com
79% match