ReinaFeng

@ReinaFeng·16 public vizzes

Outbreaks in United States

This visualization displays a choropleth map of the United States showing the distribution of disease outbreaks, with state-level shading indicating illness counts. It uses React to manage component state and data fetching, while D3 v5's geoAlbers projection and geoPath render the map geometry from TopoJSON US Atlas data. The color scale maps outbreak data from the CDC’s NORS dataset, and land features are colored based on illness totals loaded via D3’s csv method.

Dec 23, 2019

Loading thumbnail…

Outbreaks in the US Timeseries

This interactive line chart displays monthly counts of illnesses, hospitalizations, and deaths from U.S. outbreak data, revealing a seasonal pattern with peaks in winter and lows in summer. Built with React and Vega-Lite API, it maps the timeline by concatenating year and month into a timestamp field. The chart layers three semi-transparent lines with tooltips that show aggregated values on hover. Data originates from the National Outbreak Public Data Tool, loaded via D3’s `csv` function. The visualization uses Vega-Lite’s `markLine` and `.fieldT`/`.fieldQ` encodings, with custom styling from a shared config file.

Oct 27, 2019

Loading thumbnail…

Outbreaks by Month

This bar plot shows the number of illnesses from disease outbreaks by month, with bars colored by the primary transmission mode (food or water). A dropdown menu filters the visualization to display only the selected mode. The chart uses Vega-Lite API and Vega tooltip, with data loaded via d3.csv from a Gist-hosted National Outbreak Public Data Tool. The x-axis sorts months in descending order, while the y-axis aggregates the sum of illnesses.

Oct 27, 2019

Loading thumbnail…

Outbreaks in United States

This map of the United States visualizes the distribution of disease outbreaks, with each state shaded according to the total number of reported illnesses. The color scale ranges from white to pink, using a linear scale to represent increasing case counts. The visualization uses a React frontend with D3 v5 for geographic rendering, employing geoAlbers and geoPath for the map projection, while state boundaries come from the US Atlas TopoJSON dataset. Outbreak data is processed from the CDC’s National Outbreak Reporting System, aggregated by state through a custom data-processing function.

Oct 21, 2019

Loading thumbnail…

Scatter Plot for Forest Fires

This interactive scatter plot explores factors contributing to forest fires, using data from 517 instances in Portugal's Montesinho park. It displays the burned area (in hectares) against various meteorological and spatial attributes, with dropdown menus allowing users to select which variables appear on the x-axis, y-axis, and color encoding. The visualization uses D3.js (v5) with SVG rendering and animated transitions, where points grow from the center over two seconds with a staggered delay. The chart leverages D3's `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` APIs for axes and coloring, with a category-10 color scheme showing the categorical values for the selected color dimension.

Oct 14, 2019

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores correlations between attributes in a WHO global urban air pollution dataset containing PM2.5 and PM10 measurements. Three dropdown menus let users select which columns appear on the x-axis, y-axis, and as the categorical color encoding. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for colors, and renders animated SVG circles that transition to new positions when menu selections change. A color legend displays the distinct categories, while axis labels update dynamically.

Oct 12, 2019

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles with tooltips and labeled axes. The code uses `d3.csv` for data loading, `scaleLinear` for scaling, and `extent` to compute domains. Axis components generate tick marks using `xScale.ticks()` and `yScale.ticks()`, with formatting applied through `d3.format` for the x-axis tick labels.

Oct 2, 2019

Loading thumbnail…

Rendering Data with React & D3

This example visualizes the CSS named color dataset as a radial burst of concentric, overlapping pie charts. Three separate pie arcs, built with `d3.arc`, create layered rings of colored slices, and these rings are repeated at three offset positions to form a clustered pattern. The code loads CSV data with `d3.csv` and uses React hooks like `useState` and `useEffect` to manage the data lifecycle and render the SVG. Each slice is colored directly by its corresponding hex value from the dataset, producing a vibrant, mosaic-like composition.

Oct 2, 2019

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, visualizing relationships between fuel efficiency (mpg), engine power (horsepower), vehicle origin, and weight using five visual channels. Constructed with the Vega-Lite API and D3.js, it loads CSV data from a gist and renders an interactive plot through Vega’s SVG renderer. The code uses `vl.markCircle` and `vl.x().fieldQ` to map quantitative fields, with tooltips enabled via `vega-tooltip`. Styling configurations adjust axis tick colors and label fonts for readability.

Sep 27, 2019

Loading thumbnail…

WHO Global Urban Ambient Air Pollution Data

This example loads the WHO Global Urban Ambient Air Pollution database, a CSV file with 3,628 records and 11 columns, and displays file size and dataset dimensions as plain text. It uses d3.csv to fetch and parse the remote CSV, then reports the byte count of the formatted data and the row and column totals. The page also includes commented-out alternatives using fetch with async/await and a nested promise chain, illustrating different approaches to loading CSV data in D3 v5.

Sep 27, 2019

Loading thumbnail…

Number of Murder in The World

This example displays a text-based summary of a dataset about the total number of estimated deaths from interpersonal violence across 187 countries from 1990 to 2016. It reports the file size in kilobytes, the row count, and the column count, drawn from a CSV hosted in a GitHub Gist. The code uses D3 v5, specifically `d3.csv`, `d3.csvFormat`, and `data.columns`, to fetch and parse the data before displaying the statistics in an HTML `<pre>` element.

Sep 18, 2019

Loading thumbnail…

National Outbreak Public Data

This interactive tool explores the National Outbreak Reporting System (NORS) dataset, which contains 8,338 records of disease outbreaks across the United States. It uses D3.js v5 to load the CSV data via the `d3.csv` method and displays a summary of the file’s size, row count, and column count on the page. The visualization is designed to help answer questions about outbreak seasonality, geographic distribution by type, and the most serious etiologies, with data sourced from the CDC’s public NORS dashboard.

Sep 18, 2019

Loading thumbnail…

Murder in United States

This visualization shows a time-series line chart tracking the number of murders in the United States over time, using a dark-themed interface with large, readable labels. The chart maps years on the x-axis and the murder count on the y-axis, with tooltips displaying the year for each data point. Built with Vega-Lite and the Vega-Lite API, it loads data from a CSV file via D3’s `csv` function, renders the line using `markLine`, and customizes axis appearance through a configuration object. The code registers Vega-Lite with a tooltip handler, and the visualization resizes to fit the window dimensions.

Sep 18, 2019

Loading thumbnail…

murder_total_deaths

This bar chart displays the total estimated deaths from interpersonal violence across ten countries, including the United States, China, Russia, and India, for the years 2015 and 2016. It uses Vega-Lite’s markBar encoding with country on the x-axis, death counts on the y-axis, and country-based coloring. The data is loaded via d3.csv from a Gist-hosted CSV file, filtered to select specific nations, and rendered using the Vega-Lite API with a custom dark-themed configuration. Tooltips reveal the 2016 death totals.

Sep 18, 2019

Loading thumbnail…

Vega-Lite API Template

This example renders a line chart of San Francisco’s weekly temperatures using the Vega-Lite API. The visualization maps timestamps to the x-axis and temperature to the y-axis, with a tooltip displaying the temperature value on hover. The code registers Vega and Vega-Lite, pulls data from a CSV via D3’s `csv` function, and customizes axis and label styles through a config object. The chart adapts to the browser window with autosize settings and outputs an SVG.

Sep 12, 2019

Loading thumbnail…

Smiley Face Part II

This example draws a smiling face with eyebrows, eyes, and a mouth using React and D3 v5 in an SVG renderer. It shows a yellow circular head centered on a 960-by-500 canvas, with green arcs for eyebrows and darker arcs forming an open mouth. The code constructs the face using D3’s `arc` generator to define the mouth and eyebrow paths, while React handles the SVG elements, including circles and ellipses for the eyes. All styling and dimensions are computed inline, with the face composed from separate transformed path groups.

Aug 28, 2019