Skip to main content
SimilarExport ZIP
100%

H1B Petition with Interactive Legend for Case Status

✓ Published0🌍 Public
Yyyaaa1
Last edited Oct 20, 2019
Created on Oct 20, 2019

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.

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 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
95% match
Loading thumbnail…

H1B Petition with Interactive Legend for Case Status

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.

Yyinhao0424
95% match
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
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
92% 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
89% 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
88% 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
88% match
Loading thumbnail…

H1B Petition with Interactive Legend for Case Status

An interactive choropleth map displays the geographic distribution of violent crime rates across US cities. The visualization uses a natural earth projection with graticules and state boundaries rendered via D3's `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs. Circle markers sized by the `scaleSqrt` function represent each city's violent crime count, with data loaded from a CSV via D3's `csv` method. The map leverages React hooks for data fetching and renders all SVG elements through a component-based architecture.

Yyyaaa1
87% match