LichenYang

@LichenYang-Jeffrey·11 public vizzes

AQI Over Time

This visualization tracks Air Quality Index (AQI) over time for Chinese cities, beginning with a series of hourly line charts for Beijing, and then shifting to a stacked area chart showing monthly AQI totals for Beijing, Tianjing, Shanghai, and Guangzhou. The first chart uses Vega-Lite and d3.csv to render the data, while the second employs d3.stack, d3.area, d3.areaLabel, and d3.scaleOrdinal to build the stacked areas. Both chart components are responsive, re-rendering on window resize to fill the available viewport.

Dec 14, 2019

Loading thumbnail…

API in Different Cities

This example shows hourly Air Quality Index (AQI) readings across multiple Chinese cities, with each city’s time series plotted as an area chart and stacked vertically for comparison. The visualization uses a Vega-Lite specification embedded via `vegaEmbed`, which declares temporal x-axes, quantitative y-axes, and row facets for city names. Data is loaded from a CSV file using `d3.csv`, and the chart re-renders on window resize by re-calling `vegaEmbed` with updated dimensions. The code references D3 v4 for data loading and Vega-Lite v2 for the visual encoding.

Dec 14, 2019

Loading thumbnail…

Percent Bee Colony Loss by State and Year

This heatmap displays percent bee colony loss across US states and years, with each rectangle’s color intensity representing the reported loss percentage. It reveals no clear geographic or temporal hotspots, showing the loss pattern as random and consistent nationwide. Built with the vega-lite-api, it uses `markRect` for the grid, sorts states by loss, and applies a red color scheme with tooltips. Data comes from the Bee Colony Loss3 CSV, rendered via vega and vega-lite with the vega-tooltip handler.

Dec 14, 2019

Loading thumbnail…

AQI in Different Cities

The visualization displays Air Quality Index (AQI) values as a heatmap across different cities and timestamps, with color intensity reflecting pollution levels. Each rectangular cell encodes a city-time pair, and tooltips reveal exact AQI numbers on hover. The code uses the d3.csv API to load the AQI_2015.csv dataset, then constructs the graphic through the Vega-Lite API (vl.markRect) with fields mapped to the x-axis, y-axis, color scale, and tooltip. The resulting SVG renderer output is configured with custom axis styling and tooltip handling via vegaTooltip.

Dec 14, 2019

Loading thumbnail…

Anual AQI (2015) of Tianjin, Shanghai and Guangzhou

This visualization shows the annual Air Quality Index (AQI) for 2015 across three Chinese cities—Tianjin, Shanghai, and Guangzhou—as a streamgraph with wiggling stacked areas. Each city’s monthly AQI values are interpolated to create smooth, colored bands. The visualization uses d3.stack with d3.stackOffsetWiggle and d3.stackOrderInsideOut to generate the layers, and d3.area with d3.curveBasis for rendering. Hovering over a path highlights it in black. The code loads data from a local AQI.json file and employs d3-scaleTime for the x-axis and d3-scaleOrdinal with d3.schemeCategory10 for colors.

Dec 14, 2019

Loading thumbnail…

Homework1

This visualization presents the 2018 funding distribution of China’s National Natural Science Foundation general projects, with views examining applicant age, academic degree, professional duty, and institution type. The age heatmap uses Vega-Lite’s `vl.markRect()` to render a grid of rectangles colored by applicant count, while the stacked bar charts are built with D3 v3’s `d3.layout.stack()` and `d3.legend.color()`, featuring hover tooltips via `d3-tip`. Data is loaded from CSV files, and SVG renders all elements interactively.

Nov 6, 2019

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This stacked bar chart visualizes 2018 general project funding items by scientific discipline, broken down by institution type (schools, research institutes, and others). It uses D3.js version 3.5.5 with stacked layout, ordinal and linear scales, and d3-tip for hover tooltips. A color legend highlights specific categories, dimming non-selected bars via an overlay rectangle. Data comes from an embedded CSV file, and the SVG renders with animated transitions for interactivity.

Nov 6, 2019

Loading thumbnail…

Tab.1(4)-Financing of general projects in 2018 (by person in charge)

A horizontally stacked bar chart visualizes 2018 financing for general projects, segmented by person in charge and department. The chart displays counts of personnel across categories like professor and lecturer, with color encoding for each duty role. It uses the D3.js library version 3.5.5, including `d3.layout.stack` for stacking and `d3.legend.color` for the interactive color legend. Hovering over legend items highlights the corresponding bar subset, and a tooltip reveals exact values. Data is loaded from `person1(4).csv`.

Nov 5, 2019

Loading thumbnail…

Tab.1(4)-Financing of general projects in 2018 (by technical post)

This example visualizes the financing of general projects in 2018 by technical post, showing the number of Ph.D., Master, Bachelor, and other personnel across various academic departments. The stacked bar chart uses d3.layout.stack with an ordinal y-scale and a linear x-scale, while d3.legend provides a color legend for filtering layers. Tooltips are generated via d3-tip, and the SVG rendering includes highlight interactions that fade base bars and redraw foreground layers on hover. Data comes from a CSV file containing department, duty, and population counts.

Nov 5, 2019

Loading thumbnail…

Tab.1(3)-Amount of general project funding in 2018 (by nature of institutions)

This stacked bar chart displays the amount of general project funding in 2018, broken down by academic discipline and the nature of hosting institutions (schools, research institutes, and others). The y-axis lists the disciplines, while horizontal bars are segmented by institutional category and scaled by revenue in millions of RMB. The visualization uses D3.js with `d3.layout.stack` for the stacked segments, `d3.svg.axis` for axes, and a `d3.legend.color` legend. Hovering over a legend entry highlights that category in the foreground, and hovering over a bar segment reveals a tooltip via `d3-tip`. The underlying data is sourced from a CSV file with columns for departments, category, and revenue.

Oct 31, 2019

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population data for ten countries, sourced from a CSV file, with a heavily customized axis layout. The chart uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisLeft with d3.axisBottom to render the axes. The x-axis tick labels are formatted using d3.format to abbreviate large numbers (e.g., "1.41B"), and the axes are manually positioned within an SVG using margin offsets and a transform attribute.

Oct 30, 2019