Y

yinhao0424

@yinhao0424·36 public vizzes

Loading thumbnail…

H1B Petition Bar Chart

Two side-by-side bar charts examine H1B visa petitions over time. The left chart uses a stacked bar layout, colored by case status, to show petition counts per year. The right chart compares full-time versus part-time positions using orange and blue bars. Both are built with Vega-Lite and D3, rendering from a CSV dataset, with tooltips for detailed category values.

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.

Loading thumbnail…

Interactive Color Legend with Menus

This interactive scatter plot visualizes the College Dataset, showing relationships between attributes like enrollment numbers and faculty PhD percentages, with points colored by public/private status. Users select X and Y axes from dropdown menus built with ReactDropdown, while hovering over the color legend highlights matching points and fades others. The visualization uses React for component composition, D3 scales for positioning and color mapping, and renders data as SVG circles with axis components from D3.

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.

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.

Loading thumbnail…

Multiple Views with Brushing

Two coordinated views show migration incidents by location and time. A bubble map projects incident coordinates using d3.geoNaturalEarth1 and d3.geoPath, with circle sizes scaled by the square root of deaths and missing persons. A time histogram below aggregates incidents by month using d3.bin and d3.timeMonths, summing the same metric. Brushing the histogram with d3.brushX filters the map’s circles to the selected date range. Data comes from a CSV of H1B visa records, while state boundaries use TopoJSON from the US Atlas.

Loading thumbnail…

Multiple Views Cleanup

This example combines a bubble map with a date histogram to visualize the global distribution of missing migrants over time, using data from the Missing Migrants Project. The map uses a `geoNaturalEarth1` projection with `geoPath` to render land, graticules, and interiors, while scaled circles represent the total dead and missing per location. The histogram bins reported dates by month, applying `scaleTime` and `histogram` to aggregate deaths. Both views share the same SVG canvas, with the histogram positioned below the map using a React component hierarchy and D3 scales.

Loading thumbnail…

H1b Data With D3 React

This chart shows the number of H-1B visa petitions filed per year, with bars representing the total count for each year. The visualization uses React components to render SVG elements, with D3 v5 providing the scales and data loading through the `csv` and `scaleBand`/`scaleLinear` APIs. Data comes from the Office of Foreign Labor Certification via a GitHub gist, and the bars are positioned using the x and y scales, with axis labels generated by custom React components.

Loading thumbnail…

Petition of H1b

A stacked bar chart displays H1-B visa petition numbers across states, where each bar’s stacked segments represent distinct immigration program categories from the Office of Foreign Labor Certification data. Hovering over a legend entry filters the chart, highlighting only the selected program’s bars while dimming others. Built with D3.js, the visualization uses `d3.legend.color`, `d3.layout.stack`, and `d3.tip` for interactive tooltips, rendered as an animated SVG. The x-axis shows petition counts, while the y-axis lists states, encoded via `d3.scale.ordinal`.

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.

Loading thumbnail…

Petition of H1b

A stacked bar chart animates H1-B petition counts by case status (certified, denied, withdrawn) across years, using data from the OFLC. Hovering a color-legend entry highlights that status’s bars while fading others, with tooltips showing exact values. Built with D3.js (v3), it uses `d3.layout.stack`, ordinal/linear scales, SVG axes, and `d3.legend.color`. Bars are rendered in two layers—a base layer and an interactive foreground—with a semi-transparent overlay controlling emphasis. Custom SI tick formatting labels large totals.

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.

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.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. The visualization uses a horizontal bar layout with a playful handwritten font and muted color palette, showing population values in billions along the x-axis. The React-based code employs d3.scaleBand and d3.scaleLinear for positioning, with SVG rendering for the marks and axes. D3’s format function converts large numbers to abbreviated labels, while tooltips provide exact population figures on hover.

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.

Loading thumbnail…

the number of different case status in different states

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.

Loading thumbnail…

Stylized Line Chart

A stylized line chart displays weekly temperature trends for San Francisco, plotting time against temperature in degrees. The visualization uses a smooth, natural curve to connect data points, with a clean, minimalist aesthetic featuring teal strokes and labeled axes. Built with React and D3 v5, it loads CSV data via `d3.csv`, scales time and linear values with `scaleTime` and `scaleLinear`, and renders axes and the path using SVG elements. The `curveNatural` interpolation from d3 shapes the line, while reusable React components define the bottom and left axes.

Loading thumbnail…

College Interactive Color Legend

This example visualizes the College Dataset, plotting PhD percentage against enrollment numbers for each institution, with color encoding the public or private status. Built with React and D3 v5, it uses a custom SVG renderer with scales for the axes and a categorical color scale for the legend. The interactive color legend allows hovering to highlight data points of a selected category, fading the rest, which is implemented through React state management and event handlers on the legend circles.

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.

Loading thumbnail…

College Polished Scatter Plot with Menus

A scatter plot displays the relationship between two selectable attributes from the College Dataset, with ten numeric fields such as acceptance rates and enrollment counts. Two React dropdown menus let the user independently choose which attributes appear on the x- and y-axes, which are generated with d3.scaleLinear and rendered as SVG. The plot uses React components (AxisBottom, AxisLeft, Marks) and d3.csv to load data, with circle marks showing each college’s values and formatted tick labels.

Loading thumbnail…

Ramen

This visualization displays a scatterplot of ramen ratings, mapping each ramen brand as a circle positioned by country on the x-axis and star rating on the y-axis. Colors distinguish different ramen styles, while tooltips reveal the brand name. Built with Vega-Lite and rendered via the vega-lite-api, it loads CSV data from a GitHub gist using `d3.csv` and applies custom styling through config.js. The circles use 50% opacity and a fixed size, with axes configured to hide domains and use light gray ticks.

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.

Loading thumbnail…

Smiley Face Part II

This visualization constructs a stylized smiley face using React and D3. It renders a large white circle for the face, pink circles for ears, and small black circles with white highlights for eyes, all positioned using hardcoded coordinates. The smile is created with a D3 arc path, and ear shapes are also generated via D3 arc functions. The SVG output is organized using React's declarative syntax, and the entire scene is built with D3's `arc` API for the curved elements.

Loading thumbnail…

Smiley Face Part III

A grid of animated smiley faces renders as SVG, each with randomized eye positions and mouth widths. The faces are composed through React components that assemble a yellow circle, two dark eyes, and a D3-generated arc mouth. The D3 `arc` API defines the mouth’s path, while the `range` function generates the grid of faces. React’s component model manages the reusable face elements, and D3’s random values vary each face’s expression. The final composition displays a playful, generative set of faces across the canvas.

Loading thumbnail…

H1_B data

This visualization displays key statistics about the H1_B visa dataset, showing the file size in kilobytes, the number of rows, and the number of columns. It uses d3.csv to load a remote CSV file, then d3.csvFormat and the data array’s length and columns properties to compute these metrics. The results are rendered as large text inside a pre element using D3 v5. The data source is a sample from the H1_B visa dataset hosted on GitHub, and the approach emphasizes loading and summarizing dataset structure without creating a chart.

Loading thumbnail…

Google app data

This visualization displays dataset statistics for the Google Store App dataset, showing the file size in kilobytes, the number of rows, and the number of columns. It loads the CSV data using `d3.csv` and computes the file size using `d3.csvFormat` to measure the formatted string length. The resulting text is rendered in large font inside a `<pre>` element. The code also includes commented-out alternatives using `fetch` with async/await and the older pyramid-of-doom pattern.

Loading thumbnail…

Ramen Data

A minimalist display presents three statistics about the Ramen Dataset: its approximate file size in kilobytes, the total number of rows, and the number of columns. The visualization loads the CSV from a GitHub gist using D3 v5’s `d3.csv` method, then calculates and renders the figures as large text within an HTML `pre` element. The text is formatted with line breaks for clarity, and the dataset currently shows 18 kB, 2580 rows, and 7 columns.

Loading thumbnail…

H1_B sample data

This visualization displays the H1_B visa dataset, showing the file size of the data in kilobytes, the number of rows, and the number of columns. The code loads the CSV data from a GitHub gist using `d3.csv` within a React component, then formats and displays the metrics using `d3.csvFormat` to calculate the byte size. The visualization is rendered using React and D3 v5, with the data summary displayed in a large preformatted text element.

Loading thumbnail…

Working with time

This example visualizes a week of temperature readings from the Data Canvas Sense Your City dataset, plotting temperature against time in a scatter plot. The visualization uses D3’s `scaleTime` and `scaleLinear` to map data to SVG coordinates, with React rendering the axes and circular marks. The bottom axis labels days via `timeFormat` (`%a`), while each circle includes a native SVG `<title>` tooltip showing the formatted timestamp. The data is loaded asynchronously with `d3.csv` and parsed into `Date` objects.

Loading thumbnail…

Google_app_categoty

This bar chart shows the count of free and paid Google Store apps within each category, with bars grouped by app type and ordered by category. The visualization uses the Vega-Lite API via `vega-lite-api` to aggregate the CSV data from a gist, rendering bars with an opacity of 0.8. A tooltip displays the app name on hover, while the chart’s axes are styled through a custom config, removing domain lines and using light gray ticks. The chart is fitted to the window size using `autosize` and `width`/`height` properties.

Loading thumbnail…

h1b_wage_relation

This visualization explores H-1B visa petition data, showing the count of petitions by wage level and case status. It uses a circle mark to display the distribution, with wage level on the x-axis, petition count on the y-axis, and case status encoded by color. The map-based overview is complemented by an interactive tooltip for case status details. Built with Vega-Lite API, D3.js, and Vega, it loads CSV data from a GitHub gist and renders as an SVG with custom styling for readability.

Loading thumbnail…

Airline_delay_count

This visualization shows the number of flight delays for each airline using a bar chart, sorted in descending order. It plots the COUNT of records per airline on the vertical axis, with airlines on the horizontal axis, colored orange. The code loads flight delay data from a CSV file via `d3.csv` and uses `vega-lite-api` to create the chart, with `vl.markBar`, `vl.x().fieldN('AIRLINE')`, and `vl.y().fieldN('AIRLINE').count()`. Custom styling is applied through a Vega-Lite config file, and the view is rendered to canvas with `vega-tooltip` for interactivity.

Loading thumbnail…

Rendering Data with React

This example renders CSS named colors as a donut chart, where each color from the dataset is represented by a slice filled with its corresponding hex value. The visualization uses D3 utilities to load and parse the CSV data from a GitHub gist, while React manages the application state and conditional rendering for the loading state. The chart is drawn using SVG paths generated by D3’s arc and pie components, with ReactDOM rendering the final output.

Loading thumbnail…

Rendering Data with React

This example uses React and D3 to render CSS named colors as horizontal bars. It loads a CSV file of color names and their RGB hex values via `d3.csv`. Using React’s `useState` and `useEffect`, the data is fetched and stored as state, initially showing a "Loading..." message. Once data arrives, the app maps each row to a `<div>` element with its background color set to the hex value, creating a stacked color strip. The visualization emphasizes React’s state-driven rendering with D3’s data loading utilities.

Loading thumbnail…

Mouse Follower

A smiley face follows the mouse cursor across an SVG canvas, with its position updating in real time. The visualization uses React state and the `useState` and `useCallback` hooks to track mouse coordinates, which are passed to an SVG `<circle>` element’s `cx` and `cy` attributes. The `onMouseMove` event handler on the `<svg>` element triggers the state update, while ReactDOM renders the component. No D3 APIs are used; the example relies purely on React’s declarative rendering with SVG.

Loading thumbnail…

Smiley Face Part II

This example shows a smiley face drawn with a yellow circle, two eyes, and a curved mouth on a black-outlined face. It uses React to render SVG elements declaratively, while D3's `arc` generator creates the mouth path. The face is centered using an SVG `g` transform, and all shapes are positioned relative to that center point. The code relies on React 16 and D3 v5.