Skip to main content
SimilarExport ZIP
100%

H1B Petition with Interactive Legend for Case Status

✓ Published5🌍 Public
Yyinhao0424
Last edited Oct 28, 2019
Created on Oct 17, 2019

This example shows H1B petition case statuses as colored circles positioned on a map of the United States. An interactive legend allows hovering over a case status to dim all other statuses and highlight the selected one. The visualization uses React with D3 v5, employing `geoAlbers` and `geoPath` for map projections and `scaleOrdinal` for the color mapping. It renders SVG elements and loads geographic data from the US-Atlas TopoJSON, while petition data comes from a CSV file.

AI-generated description

A map showing H1B petition status .

US map shapes are provided by US-Atlas CDN by jsDelivr.

The US map was inspired by Top Cocktail Ingredients with interactive legend

MIT Licensed

Similar vizzes

Loading thumbnail…

H1B Petition with Interactive Legend for Case Status

This map visualizes H1B petition case statuses across US locations, with an interactive ordinal color legend that filters and highlights circles by case status on hover. The visualization uses React components, d3.scaleOrdinal for color encoding, and d3.geoPath with geoAlbers projection from the US-Atlas TopoJSON for map rendering. A dropdown allows year selection, while the color legend applies fade opacity to non-selected categories. Data comes from a CSV file loaded via d3.csv, with positions mapped by longitude and latitude coordinates.

Yyinhao0424
96% match
Loading thumbnail…

H1B Petition with Interactive Legend for Case Status

This example visualizes H1B petition case statuses across U.S. cities on a map using React and d3.v5. The map renders state boundaries and graticules with `d3.geoPath` and `d3.geoAlbers`, while city coordinates are projected from a CSV dataset containing longitude and latitude values. An interactive legend, built as a custom React component, uses `onMouseEnter` and `onMouseOut` handlers to highlight a selected case status by fading non-matching circles. The visualization loads geographic data from the us-atlas TopoJSON CDN and petition data from a GitHub-hosted CSV file.

Yyyaaa1
95% match
Loading thumbnail…

H1B Petition with Interactive Legend for Case Status

This interactive map visualizes H1B petition case statuses across U.S. cities. A colored dot represents each city, with its hue indicating the case status category. An interactive legend of statuses allows hovering to highlight cities with that status, dimming all others for easy comparison. Built with React and d3.v5, the visualization uses `d3.geoPath` and `geoAlbers` projection for the U.S. map, `d3.scaleOrdinal` for color mapping, and an SVG-based custom legend component that handles mouse events. Data comes from a CSV file containing city coordinates and case counts.

Yyyaaa1
93% match
Loading thumbnail…

H1B Petition with Interactive Legend and Dropdown

This interactive map visualizes H1B petition statuses across the United States, with year selection via dropdown and case-status filtering through an interactive legend. The map uses D3.js v5 with React to render an SVG, employing geoAlbers projection and geoPath for the US state boundaries. City points are colored by case status, with hover interactions on the legend dimming non-matching points. Data comes from a CSV of H1B samples, with map shapes from the US-Atlas package.

Yyinhao0424
93% match
Loading thumbnail…

H1B Petition with Interactive Legend for Year

This visualization maps H1B petition locations across the United States, with circles colored by petition year. An interactive legend on the right filters the map by year when hovered, dimming non-matching data points. The visualization uses React for component structure, D3’s `geoAlbers` projection and `geoPath` for rendering US state boundaries from TopoJSON data, and `scaleOrdinal` for color encoding. City coordinates come from a CSV dataset, rendered as SVG circles with opacity controls for the hover interaction.

Yyinhao0424
90% match
Loading thumbnail…

H1B Petition with Interactive Legend for Year

A choropleth map displays H1B petition locations across the United States, with each city’s year color-coded using a categorical ordinal scale from d3’s `schemeYlGnBu`. An interactive legend, built with React components, allows hovering to filter and highlight petitions from a specific year while dimming others via opacity. The map uses `d3.geoPath` with a `geoAlbers` projection and US-Atlas TopoJSON data, while city coordinates are loaded from a CSV file.

Yyinhao0424
89% match
Loading thumbnail…

H1B Petition with Interactive Legend for Year

This map visualizes H1B petition locations across the United States, with each city represented by a circle colored according to the petition year. An interactive legend on the right allows users to highlight petitions from a specific year, dimming all other circles. The visualization uses React with D3 v5 for map projection via `d3.geoPath` and `geoAlbers`, while `scaleOrdinal` maps years to colors. US state shapes come from the US-Atlas TopoJSON, and the petition data is loaded from a CSV file.

JJoker-tr
89% match
Loading thumbnail…

H1B_petition_map

This visualization displays H-1B visa petition data on a map of the United States, using colored circles to indicate the status of each petition. The map layer is rendered with `markGeoshape` using US state boundaries, while points are positioned by latitude and longitude through `vl.latitude` and `vl.longitude`. The visualization uses Vega-Lite API with D3 integration, loading data from a CSV via `d3.csv`, and the color encoding reflects the `CASE_STATUS` field.

Yyinhao0424
84% match