jayktee

@jayktee·6 public vizzes

COVID-19 Stages

A choropleth map of U.S. counties shows COVID-19 progression stages across six dates in March–April 2020. Each county’s color encodes a stage from none to contained, emergence, outbreak, slowdown, or contraction, with a dropdown to switch dates. The visualization uses Mapbox GL JS for interactive vector-tile rendering and D3’s `d3.csv` and `d3-dsv` to load and filter county-stage data from a remote GeoJSON and CSV. Hovering highlights county outlines via Mapbox feature-state updates.

May 5, 2020

Loading thumbnail…

COVID-19 Stages

This interactive map shows the progression of COVID-19 across U.S. counties over a six-day period in March–April 2020, with each county colored by its stage—from contained to outbreak. A date selector lets users step through daily updates, while hovering highlights individual counties. Built with Mapbox GL JS for rendering vector tiles, the choropleth colors are driven by feature-state values loaded from a CSV via d3-dsv and applied through Mapbox’s paint expressions. Popups and hover interactions use Mapbox’s event system, and the base map style is custom-hosted on Mapbox.

May 5, 2020

Loading thumbnail…

Suicide Statistics in 30 years

This visualization displays aggregated suicide counts per year, segmented by age group across 30 years of US data. The bar chart uses x-position for year, y-position for the summed suicide counts, and color to distinguish age categories with the 'viridis' color scheme. It leverages the vega-lite-api library, registering vega and vega-lite for rendering, and includes a tooltip handler for interactivity. The data is loaded as TSV from a GitHub URL using d3's tsv parser, with the visualization configured to fit the window size and apply custom axis styling.

Apr 26, 2020

Loading thumbnail…

Covid-19 County Pandemic Stages

A line chart displays the average pandemic stage across U.S. states, with each colored line representing a year from 2015 to 2019. The visualization ranks states along the y-axis against their averaged stage value on the x-axis, enabling year-over-year comparison. Built with the vega-lite-api and D3 v5, it pulls county population data from a GitHub repository and renders using Vega-Lite’s markLine and aggregate transforms. The dataset originates from CDC FluView Interactive, and the chart’s multi-hued encoding may obscure ordinal year-based patterns for readers.

Apr 26, 2020

Loading thumbnail…

Joyce Makes a Face

The visualization shows a large blue circle with a black outline representing a face, drawn as a single SVG circle element. A second, much smaller circle is placed inside the larger one, suggesting an eye or facial feature. The page renders via React and uses plain SVG elements—specifically `circle` tags—with inline styling for size and color. The code sets the document font size to 13em, though no text is displayed. The example demonstrates basic SVG shape composition within a minimal HTML page, relying on React for structure and SVG for vector graphics rendering.

Apr 26, 2020

Loading thumbnail…

ILINet Flu Surveillance Data

This line chart visualizes national ILI total influenza cases per week from 2015 through 2019, using color to distinguish each yearly curve. The visualization is built with the vega-lite-api and renders SVGs through Vega and Vega-Lite, with data aggregated by year, region, and week using a transform. The dataset originates from CDC FluView Interactive and is loaded via d3.csv, while the chart encodes week on the x-axis and summed flu cases on the y-axis, with tooltips displaying the year.

Apr 26, 2020