Skip to main content
SimilarExport ZIP
100%

the number of different case status in different states

✓ Published0🌍 Public
Yyinhao0424
Last edited Oct 23, 2019
Created on Oct 23, 2019

This visualization is a heatmap showing the number of immigration case petitions for each case status across different U.S. states, using a red color scale to indicate petition counts. It is built with React and D3 v5, leveraging the vega-lite-api’s `markRect` encoding to map states to the x-axis, case statuses to the y-axis, and petition counts to color intensity. The data comes from the Office of Foreign Labor Certification’s H-1B program records, loaded via `d3.csv`, with tooltips revealing exact counts and statuses.

AI-generated description

A visualization constructed using the vega-lite-api taking advantage of the markPoint function and the separation of data by color.

A program that shows the number of different case status for each state with D3&React.

Data: immigration programs data from The Office of Foreign Labor Certification (OFLC).

MIT Licensed

Similar vizzes

Loading thumbnail…

the number of different case status along with time

This visualization displays immigration case counts by status and year, with darker red cells indicating higher numbers. The heatmap uses a rectangular grid where each cell’s color intensity reflects the reported case volume for a specific status-year combination. Built with D3 and React, it leverages the vega-lite-api’s `markRect` encoding with color scale and tooltip functionality. Data comes from the Office of Foreign Labor Certification, and the code applies custom configuration for axis styling and tooltip presentation.

Yyinhao0424
91% match
Loading thumbnail…

H1b Petition in Different States

This chart displays the number of H-1B petitions filed in each state, with bars segmented by case status (such as certified or denied) using color. The data comes from the Office of Foreign Labor Certification’s immigration program records. Built with D3 and React, the visualization uses the vega-lite-api to define a bar mark with quantitative and nominal encodings, while config.js customizes axis and label styling for improved readability.

Yyinhao0424
82% match
Loading thumbnail…

H1b Petition in Different States

This interactive visualization displays the number of H-1B visa petitions by case status across different U.S. states, using a stacked bar chart where each bar represents a state and color segments indicate the case status. The chart is built with the Vega-Lite API, which registers Vega and Vega-Lite in a React environment, and uses d3.csv to load immigration data from the Office of Foreign Labor Certification. The visualization sorts states by petition count in descending order and includes tooltips for detailed values.

Ssophburke
82% 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
77% match
Loading thumbnail…

H1b Data with D3 React

This example visualizes the number of H-1B visa petitions across U.S. states, displaying only the top 20 states in descending order as horizontal bars. The chart uses D3 scales (`scaleBand` and `scaleLinear`) within a React component, rendering SVG rectangles via the `Marks` component. Axes are custom-built with `AxisBottom` and `AxisLeft`, and data is loaded asynchronously from a CSV file hosted on GitHub Gist using D3’s `csv` function. The styling applies a Poppins font and teal bar fills.

Yyinhao0424
77% 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
76% 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
76% 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
76% match