Jane Wang

@Janewyx·5 public vizzes

BC Offsite Species

This visualization combines a bubble map with a linked time-series histogram to explore offsite species trial data. The map projects geographic coordinates using `d3.geoAlbers` and `d3.geoPath`, with circle sizes scaled by area via `d3.scaleSqrt`. A `d3.brushX` on the histogram filters the map’s displayed points by biogeoclimatic zone. Data comes from a CSV of BC offsite trials, rendered with React and D3 v5 using SVG.

Apr 26, 2020

Loading thumbnail…

Sized Points on a Map

This visualization presents a world map with semi-transparent circles representing cities, where point size encodes each city’s area value. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, interior borders, and graticules. City positions are projected from latitude/longitude coordinates, with circle radii scaled using `d3.scaleSqrt`. The React component fetches world atlas TopoJSON and city data from a CSV URL, rendering SVG elements within a `Marks` component.

Apr 26, 2020

Loading thumbnail…

Stylized Bar Chart

This bar chart displays the ten most populous countries, with each bar representing a country’s population. The visualization uses React to render SVG elements, leveraging d3-scale functions like `scaleBand` and `scaleLinear` to position bars and axes. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The chart applies a custom Poppins font, teal bar fills, and formatted tick labels that convert values from gigabytes to billions.

Apr 26, 2020

Loading thumbnail…

Offsite tree species

This visualization displays the count of offsite tree species across different biogeoclimatic zones, using a bar chart with a Viridis color scale. The view aggregates species counts per zone and includes species names in tooltips. Built with the vega-lite-api and d3.csv, it loads data from a GitHub-hosted CSV file and renders through Vega-Lite’s SVG output, customizing axis and label styling via a separate config object.

Apr 26, 2020

Loading thumbnail…

Suicide Statistics in 30 years

A stacked bar chart displays global suicide counts aggregated by year and age group over 30 years. The visualization uses the vega-lite-api to create marks, with d3.csv loading the Suicide_Rates_Overview dataset. Age groups are color-encoded via the viridis scale, while tooltips reveal exact suicide numbers per year-age combination. The chart is rendered with Vega, Vega-Lite, and vega-tooltip, with custom styling from a config object improving readability against a dark theme.

Apr 26, 2020