Skip to main content
Log in
M

MoooYang

@MoooYang·12 public vizzes

Loading thumbnail…

Outbreaks in the US Timeseries

This multi-line time-series chart displays the monthly frequency of illnesses, hospitalizations, and deaths from US outbreak data, revealing clear seasonality with peaks in winter and lows in summer. The visualization aggregates the raw CSV data by summing each health metric per month, using the Vega-Lite API within a React framework to layer three distinct line marks. Interactive tooltips display exact aggregate values when hovering over any point on the lines, while a custom config adjusts axis styling for readability. The data is loaded and parsed with d3.csv.

Oct 28, 2020
Loading thumbnail…

Outbreaks in United States

This choropleth map visualizes the distribution of disease outbreaks across the United States, with state-level shading indicating the total number of reported illnesses. The map uses a linear color scale from white to pink to encode illness counts, with darker shades representing higher numbers. Built with React and D3 v5, the visualization employs `d3.geoAlbers` and `d3.geoPath` to render U.S. state boundaries from TopoJSON data, while illness totals are aggregated from the CDC’s National Outbreak Reporting System via CSV. Graticules and sphere outlines provide geographic context.

Oct 22, 2020
Loading thumbnail…

Outbreaks by Month

This bar plot shows the total number of illness cases per month, with bars colored by the primary disease transmission mode, revealing that person-to-person spread dominates most months while foodborne transmission peaks in summer. The visualization is built with React and uses the vega-lite-api library alongside d3.v5, loading its CSV dataset from a Gist. The vega-lite specification encodes the month on the x-axis, summed illnesses on the y-axis, and primary mode as color, with a custom vega config adjusting axis labels and fonts.

Oct 13, 2020
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores correlations among attributes in a WHO air pollution dataset, using dropdown menus to select x-axis, y-axis, and color-encoding variables for each city. The visualization updates with animated transitions as users change selections, employing D3 scales, axes, and transitions. Color legends and axis labels adapt dynamically, with rendering via SVG. The underlying data comes from the WHO Global Urban Ambient Air Pollution Database, measuring PM2.5 and PM10 levels across global cities.

Oct 7, 2020
Loading thumbnail…

Play with React & D3

This example shows CSS named colors as concentric donut rings, with three nested pie charts rendered at three positions on the screen. Each ring segment’s fill equals the hex value of the corresponding color from the dataset. The code uses React’s `useState` and `useEffect` to load the CSV named-color data, then renders SVG paths using `d3.csv`, `d3.pie`, and `d3.arc` with fixed inner and outer radii. Three separate arc configurations create the layered rings, and the same pie layout is reused for each cluster.

Sep 30, 2020
Loading thumbnail…

Population

This population visualization shows how the number of people in Minnesota grows over time through a grouped bar chart. Each bar represents a 5-year age cohort for a given year, with the height indicating the population count. The chart reveals near-linear population growth, a missing data point in the 1890s, and a stable age distribution. Built with Vega-Lite, it uses `markBar` to encode year on the x-axis, population on the y-axis, and age as color, with the data loaded from a CSV via d3.

Sep 23, 2020
Loading thumbnail…

Rating

This visualization displays the relationship between U.S. states and commercial electricity rates as a scatter plot, using data from the U.S. Electric Utility Companies and Rates dataset from Feb 2011. Each state is mapped along the x-axis while the commercial rate is shown on the y-axis, with points representing individual ZIP code records. The chart is built with Vega-Lite and D3.js, using `vl.markPoint` with a small opacity to reveal density, and renders via the Vega-Lite API with a tooltip handler.

Sep 23, 2020
Loading thumbnail…

Violations

This interactive bar chart visualizes documented violations in Syria by province and date, sourced from the Violations Documentation Center’s aggregated CSV data. The visualization encodes date on the x-axis, a count of violations on the y-axis, and province as color, with tooltips revealing exact counts. Using the Vega-Lite API (`vl.markBar`, `vl.x().fieldT`, `vl.y().fieldQ`, `vl.color().fieldN`) rendered via `vega-lite-api`, `vega`, and `vega-lite`, the chart dynamically fits the window and applies custom axis styling from `config.js`. The `d3.csv` loader fetches the remote dataset, with the tooltip handler provided by `vega-tooltip`.

Sep 23, 2020
Loading thumbnail…

Database Acces page of the Violations Documentation Center in Syria.

This example summarizes a dataset from the Violations Documentation Center in Syria, displaying its size in kilobytes, row count, and column count on a page. The page uses `d3.csv` to fetch a remote CSV file from GitHub and `d3.csvFormat` to calculate byte length, with `d3` version 5 loaded via a CDN. It answers distribution questions about violation type, location, and time only by presenting the dataset’s basic dimensions, not by rendering charts. The code also includes commented alternatives using `fetch` and `d3.csvParse`.

Sep 23, 2020
Loading thumbnail…

Population data by gender by 5-year intervals

This example displays basic metadata about a population dataset, showing its size in kilobytes, row count, and column count. The visualization itself is minimal, presenting this information as plain text in a large monospace format. The code loads a CSV file from a GitHub repository using D3 v5’s `d3.csv` method, then formats the data with `d3.csvFormat` to calculate its length. It also demonstrates an alternative approach using the Fetch API with `async` and `await` for CSV parsing.

Sep 23, 2020
Loading thumbnail…

U.S. Electric Utility Companies and Rates

This example displays the size and shape of a CSV file containing U.S. electric utility company data. It fetches the dataset from a GitHub repository using the `d3.csv` method, then reports the file size in kilobytes, the number of rows, and the number of columns in a large text preformatted block. The visualization demonstrates a straightforward data-loading and summary operation with D3 v5.

Sep 23, 2020
Loading thumbnail…

Smiley Face Part II

A yellow smiley face rendered with React and SVG fills the browser window, with eyes, highlights, and a mouth positioned relative to the viewport center. The face’s size scales with the window dimensions, while the mouth is drawn using the d3 `arc` generator with a fixed inner and outer radius. React manages the SVG elements, and the code uses `arc()` from D3 v5 to compute the path for the smile. The face includes two eye circles and smaller white highlight circles offset from each eye.

Sep 3, 2020