Alice Hua

@alicehua11·5 public vizzes

Vega-Lite API Template

This example demonstrates a scatter plot of automotive data, mapping engine displacement to horsepower with circle color encoding model year and size encoding vehicle weight. Tooltips reveal car names on hover. It is built using the Vega-Lite API, a programmatic wrapper for the Vega-Lite grammar, with data loaded from a CSV via D3's `csv` function and rendered as SVG through the bundled Vega and Vega-Lite libraries. The visualization spans the full viewport and applies custom axis and label styling.

Nov 18, 2019

Loading thumbnail…

Untitled

This choropleth map shows population density per square mile across California counties, using a sequential orange-red color scale with a threshold legend. The visualization loads GeoJSON topology data and renders county boundaries as SVG paths via `d3.geoPath`. Colors are assigned by county ID using `d3.schemeOrRd[9]`, while the legend uses `d3.scaleThreshold` and `d3.axisBottom` to display the value ranges. County outlines are drawn from a separate topology object with a semi-transparent black stroke.

Nov 18, 2019

Loading thumbnail…

Untitled

A choropleth map of population density per square mile colors U.S. census block groups using a threshold scale and the sequential color scheme `d3.schemeOrRd[9]`. The visualization includes a square-root-scaled legend with an axis, and overlays county boundaries as black strokes at 30% opacity. The code loads TopoJSON data via `d3.json`, converts it with `topojson.feature`, and renders it with `d3.geoPath`. The legend uses `d3.scaleThreshold` and `d3.axisBottom`. The map is built with D3 v4 and React in the supporting files.

Nov 17, 2019

Loading thumbnail…

HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence rates among adults aged 15-49 by country for the year 2017, using a yellow-orange-red sequential color scale to encode the percentage values, with gray indicating missing data. The map is rendered as an SVG using React and D3’s geoNaturalEarth1 projection, with graticules and country boundaries from a TopoJSON world atlas. Country-specific data is loaded from a CSV file via d3.csv and joined to geographic shapes using alpha-3 country codes mapped to numeric codes, enabling the fill color for each path generated by d3.geoPath.

Nov 17, 2019

Loading thumbnail…

Untitled

This visualization displays a scatterplot of ethanol data points, where each circle represents a geographic region and uses color to encode the origin category. The plot positions false positive values along the y-axis and geographic FIPS codes along the x-axis, with semi-transparent points to reveal overlapping data. Rendered as an SVG, it uses the vega-lite-api to build the chart, with data loaded from a CSV file via d3.csv. The view includes a custom legend SVG showing population density per square mile with a sequential color scale.

Nov 17, 2019