my data

100%

✓ Published0🌍 Public

Last edited Jul 9, 2024

Created on Jul 9, 2024

A bar chart displays the average salary by country, with bars colored according to a categorical "Purchased" field and tooltips revealing the corresponding name. It is built with the Vega-Lite API, which compiles specifications to Vega and renders as SVG, using the vega-lite-api, vega, and vega-tooltip libraries. Data is loaded asynchronously via d3.csv from a remote GitHub Gist, with the chart sized to fit the viewport and the appearance customized through a shared config object.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of salary by country, with bars colored according to a categorical "Purchased" field. Built with the Vega-Lite API, it registers the vega, vega-lite, and vega-tooltip libraries, then fetches CSV data via `d3.csv` and renders the visualization into the full browser window. The chart uses bar mark sizing, field encodings for x, y, color, and tooltip, and applies a custom configuration for axis styles and typography.

Mmail.lohade@gmail.com

85% match

Loading thumbnail…

Interactive coloured bar chart

This interactive bar chart displays salary statistics (median, average, lowest, and highest) for a selected country, with each metric rendered as a distinctly colored bar. A dropdown menu lets the user choose a country, triggering a re-render of the SVG visualization. The chart uses D3.js v7 to load data from a CSV, create scales, draw bars, and manage the tooltip and hover effects, while React handles the overall application structure. Bar colors come from D3’s `schemeCategory10`, and the tooltip appears on mouseover to show the numeric value.

LLayaMyadam@my.unt.edu

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

76% match

Loading thumbnail…

HR

This bar chart visualizes the average monthly income across HR departments, with department names sorted by descending income on the x-axis and a quantitative income scale on the y-axis. Built with the vega-lite-api library and rendered through vega-lite, the chart pulls CSV data from a GitHub gist. Tooltips are enabled via vega-tooltip, and the visualization is customized with a dark color scheme and increased font sizes for readability.

Qqhfzwyx

75% match

Loading thumbnail…

Project Bar Chart

This bar chart displays the average salary in USD for various job titles, using data loaded from a CSV file via d3.csv. Each bar is colored with a categorical scale (d3.scaleOrdinal and d3.schemeCategory10) and shows a hover tooltip with the title and salary. The chart uses d3.rollup to calculate mean salaries, d3.scaleBand and d3.scaleLinear for axes, and includes rotated x-axis labels for readability.

Mmalampatiramya03@gmail.com

75% match

Loading thumbnail…

Vega-Lite API Template_Bars

This bar chart displays the population of countries in 2015, with bars sorted in descending order and colored by country. It is built using the Vega-Lite API, which programmatically defines the visualization specification, while D3.js loads the CSV data from a Gist. The chart is rendered as SVG via Vega and Vega-Lite, with tooltips enabled through vega-tooltip and a custom config to adjust axis and label styling for readability.

OOleg Zhernovoy

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

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

74% match