Skip to main content
SimilarExport ZIP
100%

Week 13 Cyber Salary Map

✓ Published1🌍 Public
Ccrijos
Last edited Nov 27, 2024
Created on Nov 26, 2024

This interactive globe maps average cyber salaries by country, with bubble size and color encoding company size (small, medium, large). A graticule and striped country fills distinguish regions with no data. Users can rotate the globe via drag and zoom with the mouse wheel. The visualization uses d3.geoOrthographic projection, d3.geoPath for map rendering, d3.scaleSqrt for bubble scaling, and topojson-client to parse the world atlas.

AI-generated description

Globe visualizing average company salaries across the world based on company size.

  • Bubbles represent salaries and are sized and colored based on company size.
  • Hovering over a bubble reveals salary details and company size labels.
  • Countries without data are visually striped to indicate missing information.
  • The globe can be rotated by left-clicking and dragging for easy exploration.
  • Zoom functionality allows closer inspection of clustered areas.
  • Includes an updated legend with interactive filtering for bubble visibility by size.
  • Features a title box and an information box for context and details.
MIT Licensed

Similar vizzes

Loading thumbnail…

Week 11 Cyber Salary Map

This interactive map visualizes average cybersecurity salaries by company size across the globe, with a rotatable orthographic globe showing colored bubbles for small, medium, and large organizations. Users can hover over bubbles to see salary values or drag to rotate the projection. The visualization uses D3's `geoOrthographic`, `geoPath`, and `geoGraticule` to render country boundaries from TopoJSON data, while `scaleSqrt` sizes the bubbles and `drag` enables rotation. Salary data comes from the `@chain-mage/cybersalaries` dataset, with striped patterns indicating countries lacking data.

Ccrijos
94% match
Loading thumbnail…

Week 12 Cyber Salary Map

This interactive orthographic globe maps the average salaries of cybersecurity professionals by company size—small, medium, and large—across different countries. Users can rotate and zoom the globe to explore clustered regions. Each country with data features a set of offset bubbles, colored by company size, whose radii reflect average salary via a square-root scale. Built with d3.geoOrthographic, d3.geoPath, and d3.geoGraticule, the visualization uses `d3.zoom` and `d3.drag` for interaction. Country data comes from a bundled `@chain-mage/cybersalaries` dataset, with geographic coordinates from `countryData.js`. Countries lacking data are marked with a striped pattern. Hovering over a bubble displays detailed salary information in an on-screen box.

Ccrijos
93% match
Loading thumbnail…

Week 10 Cyber Salary Map

This world map visualizes average cybersecurity salaries by company size, with circles sized by salary value and colored by company size category (small, medium, large). Hovering a bubble reveals the country, company size, and average salary in USD. The visualization uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `scaleSqrt` for bubble sizing, with hover tooltips built through D3 event listeners. It processes salary data from the `@chain-mage/cybersalaries` dataset and renders world geography using `topojson-client` with a 110m world atlas. Countries without salary data appear with a striped pattern.

Ccrijos
92% match
Loading thumbnail…

Avg Cyber Salary Heatmap

A world map renders as a heatmap of average cybersecurity salaries by country, with hover tooltips showing each nation’s name and average salary. Countries lacking data appear with a striped pattern. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` for the map, while a color scale maps salary magnitudes. Data comes from the `@chain-mage/cybersalaries` package, aggregated per country and joined to world atlas TopoJSON features via a country-name mapping.

Ccrijos
83% match
Loading thumbnail…

Global Cyber Job Salaries

This visualization displays salaries for global cybersecurity and information security jobs from a Kaggle dataset, showing attributes such as experience level, job title, and salary in USD. The initial implementation fetches a CSV file and parses it with `d3.csvParse`, logging the resulting data structure as JSON in a `<pre>` element. State management is handled through a custom `setState` function that triggers re-rendering, while the D3 v7 selection and data join pattern (`select().data().join()`) is used to update the display.

CCyn
72% match
Loading thumbnail…

Choropleth Map Analysis

This interactive choropleth map displays global data science salaries, using a color scale from dark purple to bright yellow to represent the salary ranges across countries. Users can filter the map's color distribution through two sliders that adjust the minimum and maximum salary values, while hovering over individual countries reveals a tooltip with the country name and its corresponding salary figure. The visualization is built with D3.js, utilizing `d3.geoMercator` for map projection, `d3.geoPath` to render country boundaries, and a `d3.scaleLinear` color scheme, with data sourced from a CSV file and world geometry from a GeoJSON file.

GGeorge Oyosa
69% match
Loading thumbnail…

Project

This interactive choropleth map visualizes global data science salaries using a color gradient, with a World Atlas TopoJSON topology rendered via D3’s `geoMercator` projection and `geoPath`. Users filter salary ranges with two sliders that adjust the color scale domain, and hover tooltips display country-specific earnings. The map includes zoom functionality via `d3.zoom`, with salary data sourced from a CSV hosted on GitHub.

VVenkataSatyaRamKamini@my.unt.edu
68% match
Loading thumbnail…

Cyber Jobs

This visualization displays data from a CSV file containing cyber security job listings, including salary information, job titles, and employment details. The code parses the dataset using `csvParse` and initially displays the raw data as a JSON string via `JSON.stringify`. The example demonstrates a data loading workflow where `fetch` retrieves the CSV file, and the state management pattern uses a custom `setState` function to update the visualization. The visualization uses D3 v7 for data parsing and DOM manipulation, with the `select` and `join` methods to render the text output.

CCyn
67% match