X

Xinting Yao

@Echo226·32 public vizzes

Loading thumbnail…

Worldwide Suicide Map Multi-views

This interactive visualization combines a world bubble map with a bar chart to explore global suicide statistics from 1979 to 2016. Users can select a year and country through dropdown menus, which updates the map to highlight the chosen nation while filtering the bar chart to show the top 15 countries by suicide count. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering landmasses, while bubble sizes correspond to suicide numbers via a square-root scale. The bar chart employs d3.scaleBand and d3.scaleLinear, with all elements rendered as SVG within a React framework using D3 v5.

Loading thumbnail…

On-time performance of the top-5 busiest airports in USA

This radial chart shows the on-time performance of the top-5 busiest US airports by plotting average departure delay across dates in a circular layout. Each airport forms a closed line polygon using `d3.lineRadial` with `curveLinearClosed`, colored by a categorical scale. An interactive color legend highlights one airport at a time, fading others via opacity. The visualization uses React for component structure, D3 v5 scales (`scaleTime`, `scaleLinear`, `scaleOrdinal`), and `pointRadial` for angle axis ticks, with data loaded from a CSV of airline performance metrics.

Loading thumbnail…

[test] On-time performance of top-5 busiest airports in USA

This radial chart compares on-time performance across the five busiest US airports using D3 v5 and React. Monthly average departure delays are plotted along a circular time axis, with each airport shown as a distinct colored line. The visualization includes an interactive color legend that highlights a selected airport while fading the others, and angle tick marks label the months. Data comes from a CSV file loaded via d3.csv. The code uses d3.lineRadial with curveLinearClosed, d3.scaleTime, d3.scaleOrdinal, and d3.pointRadial for positioning.

Loading thumbnail…

USA AIRPORT ON_TIME PERFORMANCE

This map visualizes the locations of U.S. airports and their on-time performance. Each circle represents an airport, positioned using the `d3.geoAlbers` projection and rendered via `d3.geoPath` in an SVG. The choropleth-like map shows state boundaries and interiors using TopoJSON data from the us-atlas package, while airport data is loaded from a CSV with the `d3.csv` API. Hovering over a circle reveals the airport name and state via a native SVG `<title>` element. The visualization is built with React 16 and D3 v5.

Loading thumbnail…

Smiley Face Part I

A smiling clown face is built entirely from SVG shapes, with a cream-colored circle for the head, black-outlined eyes, a red nose, and a wide, curved mouth drawn using a D3 arc. The figure includes decorative elements like hat-like arcs in royal blue and medium orchid, elliptical blushes, and an eye with a dashed stroke. The view is generated with React, and the geometric layout and arc paths are computed using functions from the D3 library.

Loading thumbnail…

Stylized Scatter Plot for Google Apps

This scatter plot visualizes the relationship between app ratings and the number of reviews in the Google Play Store, with each circle representing an app and color encoding its category. It uses the vega-lite-api to define the marks and encodings, with d3.csv fetching the dataset and vega-tooltip providing interactive details. The visualization employs a logarithmic scale for review counts and a custom config to style axes and labels for improved readability.

Loading thumbnail…

Stylized Bar Chart with Color Legend

This stylized bar chart displays the total number of reviews per app category from the Google Play Store Apps dataset, with each bar colored by the app’s content rating (age group). The visualization uses Vega-Lite’s API to encode the sum of Reviews on the x-axis and sorted Categories on the y-axis, with tooltips showing aggregated review counts. Custom axis styling is applied via a Vega-Lite config object, and the chart is rendered as an SVG using the vega-lite-api framework atop d3.v5.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes USA flights on-time performance, showing relationships between days of the month and delay metrics. Users can select different y-axis attributes (DEP_DELAY, DEP_DEL15, ARR_DELAY, ARR_DEL15) via dropdown menus built with ReactDropdown. The visualization uses React with D3 scales (scaleTime, scaleLinear) to map data into SVG marks, with custom axis components rendering tick marks. Data is loaded from a CSV file using d3.csv, with each point rendered as a circle containing a title tooltip.

Loading thumbnail…

Mouse Follower

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor within an SVG canvas. It shows how React state can track pointer position and update visual elements in real-time. The code uses React’s `useState` and `useCallback` hooks to manage the mouse coordinates from the `onMouseMove` event, and renders a single circle element with dynamic `cx` and `cy` attributes. The visualization is built with React 16.9 and rendered as SVG, with the circle starting at the center of a 960×500 pixel viewport.

Loading thumbnail…

Adding colorLegend to the radial chart

This radial chart visualizes the on-time performance of USA airlines, displaying average departure and arrival delays. The chart uses two colored lines to represent the departure and arrival data, with a color legend explaining the distinction between the two metrics. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the angle and radius scales, `lineRadial` for the plotted lines, and `curveLinearClosed` to close the paths. Data comes from a CSV file of flight performance statistics.

Loading thumbnail…

Adding Axes to the radial chart

This radial chart displays average flight delay times for US airlines across months, using a circular time axis with two overlaid paths for departure and arrival delays. The visualization renders in SVG through React, using D3 v5 APIs including `scaleTime` with a full-circle range, `scaleLinear` for radial distances, and `lineRadial` with `curveLinearClosed` to create closed rings. Grid lines extend from the inner to outer radius at each month tick, with month labels positioned along the outer edge. Data comes from a CSV of airline performance statistics loaded via `d3.csv`.

Loading thumbnail…

The draft of radial chart

This radial chart visualizes the average departure delay of USA airlines over time, with dates positioned around the circle’s circumference and delay values mapped outward from the center. The closed path connects daily data points using `d3.lineRadial` with `curveLinearClosed`, rendered in SVG within a React setup. Angle and radius scales are created with `d3.scaleLinear`, and the chart is centered by translating the coordinate system. Data comes from an external CSV file on airline on-time performance. Axes and tick labels are not yet implemented.

Loading thumbnail…

Pie Chart for USA Flights On-time Performance

A pie chart visualizes USA flight on-time performance by mapping each month to a slice, with the radial extent of each slice sized by the average departure delay. The chart uses a donut layout with an inner radius, rendering data loaded from a CSV file via `d3.csv`. Built with React and D3 v5, it employs the `d3.arc` generator to create SVG paths, with each slice’s outer radius scaled by the delay value. The visualization highlights monthly delay patterns in a simple, interactive-free format.

Loading thumbnail…

First Pass Radial Line Chart

This radial line chart visualizes average departure delays for USA airlines on-time performance data, with the date mapped to angle and delay duration mapped to radius. The chart uses d3.lineRadial with curveNatural to create a smooth spiral-like path, while d3.scaleTime and d3.scaleSqrt handle the angle and radius scales. It marks a first pass toward a full radial visualization, with axes and periodic time ranges yet to be implemented. The React component renders SVG marks, reading data from a CSV of departure delay records.

Loading thumbnail…

USA airlines on-time performance

This line chart displays the average departure delay for USA airlines over time, with each date point visualized as a circle and connected by a smooth natural curve. The visualization uses React to render SVG elements and D3 v5 scales, including `scaleTime` for the date axis and `scaleLinear` for delay values. Data is loaded asynchronously from a CSV file containing daily mean departure delays, and the chart includes labeled axes, grid lines, and interactive tooltips showing formatted dates on hover.

Loading thumbnail…

Lollipop Chart USA Flights On-time Performance

A lollipop chart visualizes monthly average departure and arrival delays for USA flights, with each day of the month represented by a horizontal line connecting two circles: one for departure delay (green) and one for arrival delay (purple). The chart uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for axes, and SVG lines and circles for the marks. The code renders with React and D3 v4, drawing elements manually to show the distribution of delay times across the month.

Loading thumbnail…

Menus with React

This example demonstrates a pet selector menu built with React, displaying a dropdown list of six pet options and reflecting the current selection through the label above it. The app uses React’s `useState` hook to manage the selected value, initializing with “hamster”, and updates the UI whenever the user changes the dropdown. It leverages the `Dropdown` component, which renders a native HTML `<select>` element, and the ReactDOM `render` method in `index.js` to mount the app to the DOM. The interface uses React 16.9 from a CDN.

Loading thumbnail…

React Starter

This React starter example renders a simple “Hello React!” message in a blank browser window. It imports React and ReactDOM, defines a functional `App` component returning a div, and mounts it to the root element using `ReactDOM.render`. The page loads React 16.9.0 from a CDN and runs the compiled bundle. It serves as a minimal template for building interactive visualizations with React, demonstrating the basic component structure and mounting process without any data or visual elements.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how React and D3 can work together to load and summarize a CSV dataset. It fetches monthly data from a GitHub gist using D3’s `csv` method inside a React `useEffect` hook, then renders a text summary with `pre`. The message function from `message.js` reports the file size in kilobytes, the row count, and the column count using `d3.csvFormat` and the data’s `columns` property. While the data loads, the interface displays "loading" as a placeholder.

Loading thumbnail…

Bar Chart for USA Flights Delay _ React & D3

This interactive bar chart visualizes the average departure delay for USA flights by month. Each horizontal purple bar represents a month, with its length proportionally reflecting the mean delay in minutes. The visualization is built using React and D3.js (with `scaleBand` for the y-axis and `scaleLinear` for the x-axis), rendering as an SVG. Data is loaded from a remote CSV file, pre-processed to calculate monthly averages, and displayed with axis ticks and labels.

Loading thumbnail…

A Map for USA Airport

This map visualization displays the distribution of airports across the United States, with each circle representing an airport positioned by its latitude and longitude, colored by state, and showing the airport name on hover. Built with vega-lite-api, it uses the `vl.markCircle` method with latitude and longitude encoding streams to project the geographic data points. The code loads airport information from a CSV file using d3.csv, applies custom axis and label styling through a shared config object, and renders the final chart with vega and vega-lite in an SVG view.

Loading thumbnail…

Pie Chart for USA Flights On-time Performance

This interactive pie chart visualizes USA flight on-time performance by showing departure delay hours for each day of the year. Each slice represents a single day, with the radial length of the slice encoding the delay value. Built with React and D3 v5, the visualization uses D3’s `arc` function to generate the SVG paths, with input data from a CSV file fetched via D3’s `csv` method. The chart is rendered entirely as SVG elements, where each slice’s outer radius is proportional to its corresponding delay metric.

Loading thumbnail…

Bar Chart for USA Flights Delay _ vega-lite-api

The bar chart visualizes average departure delays for USA flights by month, using a dark-themed, minimal design with tooltips for exact delay values. It is built with the vega-lite-api, which registers Vega, Vega-Lite, and a tooltip handler to render an interactive SVG chart. Data is pre-processed into a CSV file and loaded asynchronously via d3.csv, then bound to the chart’s x-axis for months and y-axis for delay minutes. The chart automatically fits the window size and applies custom axis and label styling from a separate config module.

Loading thumbnail…

World Map

This example visualizes a world map, displaying national borders, landmasses, and interior boundaries. It uses a natural Earth projection (`d3.geoNaturalEarth1`) and renders geographic features as SVG paths via `d3.geoPath`. The visualization is built with React and loads geospatial data from a JSON file using `d3.json`, with `topojson.feature` and `topojson.mesh` processing the topology. The map is styled with contrasting fills for land, ocean, and borders, creating a clear and minimal cartographic view.

Loading thumbnail…

Scatter Plot for New York Airbnb

This scatter plot visualizes New York Airbnb listings, showing the average price for different room types across neighbourhood groups. Each circle represents a room type within a neighbourhood, with circle size encoding the average number of reviews. The visualization is built using the vega-lite-api and d3.csv for data loading, rendered via vega-lite and vega. The data comes from a hosted CSV file, and the chart uses config.js to customize axis labels and typography for improved readability.

Loading thumbnail…

A Map for New York Airbnb

This map visualizes the distribution of Airbnb room types across New York City, with each circle representing a listing and color encoding room type. Hovering reveals the price via tooltip. Built with the vega-lite-api, it reads CSV data from a GitHub gist and renders an interactive scatterplot using latitude and longitude fields. The visualization uses vega-lite’s markCircle, d3.csv for data loading, and vega-tooltip for hover interactions, with a custom config to adjust axis and label styling.

Loading thumbnail…

Untitled

This example visualizes Google Play Store app data with a bar chart that sums app reviews by category, color-coded by content rating. The visualization is built using the vega-lite-api library, which registers with vega and vega-lite, and renders as an SVG via vega-tooltip for interactivity. It loads data from a CSV URL using d3.csv, sorts the categories by review count, and displays tooltips showing aggregated review sums. The appearance is customized through a shared config object that adjusts axis ticks, label fonts, and color styling.

Loading thumbnail…

Untitled

This visualization shows the total number of reviews across Google Play Store app categories, with each bar’s color encoding the content rating and tooltips revealing the summed review counts. It uses the vega-lite-api to build a bar chart from CSV data fetched via d3.csv, sorting categories by descending review totals. The chart renders with vega and vega-lite, applying custom axis and label styling from a shared config file for improved readability.

Loading thumbnail…

USA Airport Geographic Info

This example displays basic metadata about the USA Airport Geographic Info CSV dataset: its approximate file size in kilobytes, the number of rows, and the number of columns. The page loads the data with `d3.csv` from a remote GitHub Gist URL, then uses `d3.csvFormat` to calculate the byte length. Results are rendered as plain text inside a `<pre>` element, with the page styled using a large default font size. No map or chart is drawn, only the dataset summary is shown.

Loading thumbnail…

Google Play Store Apps

This visualization displays basic metadata about the Google Play Store Apps dataset by loading a CSV file and reporting its size, row count, and column count as plain text. Using D3.js v5, the code fetches the remote CSV via `d3.csv()` and then formats the raw data with `d3.csvFormat()` to compute the file size in kilobytes. The message, rendered inside an HTML `<pre>` element, updates dynamically once the asynchronous data loading completes, showing the dataset’s scale before any further graphical exploration. The visualization emphasizes data ingestion and parsing rather than chart rendering.

Loading thumbnail…

Nwe York Airbnb

This example displays a plain-text summary of a New York Airbnb dataset, showing the file size in kilobytes, the number of rows, and the number of columns. It loads the data from a CSV file hosted on GitHub using `d3.csv`, then writes the calculated values into a `<pre>` element via `document.getElementById`. The implementation relies on `d3.csvFormat` to measure the raw data length and `d3.csvParse` (shown in the commented alternative) for parsing. The page uses D3 v5 and no other visualization libraries or rendering techniques.

Loading thumbnail…

Smiley Face Part I

This visualization displays a stylized clown face with a cunning smile, composed of SVG shapes including circles, rectangles, ellipses, and arcs. The face features eyes, a nose, blushing cheeks, and a white mouth arc with decorative cap shapes on either side. The React component renders SVG elements to the DOM, using D3’s `arc` generator to create the mouth and cap paths with specified angles and radii. Shapes are positioned via transforms and rotations, with fill colors, opacities, and stroke styles defining the visual details.