Skip to main content
Log in
E

elaine-xiao

@elaine-xiao·15 public vizzes

Loading thumbnail…

yi xiao Map

This choropleth map visualizes the total number of recorded earthquakes per U.S. state, using a logarithmic transformation of the raw counts to compress the data’s range. The map is rendered in SVG using d3.geoPath with a geoAlbersUsa projection, while a d3.scaleOrdinal maps logged earthquake values to a nine-step sequential color scheme from schemeOrRd. State boundaries are drawn from TopoJSON data, and each state includes a title tooltip displaying its name, region, and original earthquake count. A custom color legend component, built with reusable D3 selections, appears alongside the map.

Oct 4, 2019
Loading thumbnail…

yi xiao heatmap

This heatmap displays earthquake activity across U.S. states over time, with years on the y-axis, states sorted by total count on the x-axis, and color intensity representing earthquake frequency. The visualization uses a red color scheme to highlight higher values, with tooltips showing the exact state, year, and count on hover. Built with Vega-Lite and the vega-lite-api, it loads data from a CSV file containing earthquake counts by state and year, transforms it into long format, and renders a markRect chart with configured styling.

Oct 4, 2019
Loading thumbnail…

yi xiao Map

A choropleth map of the United States shows the total number of earthquakes per state, colored on a sequential logarithmic scale using an ordinal scale with the `schemeOrRd` color ramp. The map is rendered with `d3.geoPath` and the Albers USA projection, using TopoJSON state boundaries and CSV data loaded via `d3.csv`. Hovering a state highlights it in green and displays a tooltip via SVG `title` elements listing the state name, region, and earthquake count. The visualization uses D3 v5 and includes a custom `colorLegend` component to explain the color scale.

Oct 1, 2019
Loading thumbnail…

Choropleth Map

This choropleth map visualizes the distribution of total earthquakes across US states using a diverging color scale. The map is rendered as an SVG using D3.js and the `geoAlbersUsa` projection, with state boundaries drawn via `geoPath`. Earthquake counts are logarithmically transformed and mapped to a threshold color scale from the `schemeOrRd` palette, while hovering highlights states in light green. The data is loaded from CSV and TopoJSON files, and tooltips display state name, region, and raw earthquake totals.

Sep 30, 2019
Loading thumbnail…

Choropleth Map

This choropleth map visualizes the distribution of total earthquakes across US states using a diverging color scale. The map is rendered as an SVG using D3.js and the `geoAlbersUsa` projection, with state boundaries drawn via `geoPath`. Earthquake counts are logarithmically transformed and mapped to a threshold color scale from the `schemeOrRd` palette, while hovering highlights states in light green. The data is loaded from CSV and TopoJSON files, and tooltips display state name, region, and raw earthquake totals.

Sep 30, 2019
Loading thumbnail…

Choropleth Map

This choropleth map visualizes the distribution of total earthquakes across US states using a diverging color scale. The map is rendered as an SVG using D3.js and the `geoAlbersUsa` projection, with state boundaries drawn via `geoPath`. Earthquake counts are logarithmically transformed and mapped to a threshold color scale from the `schemeOrRd` palette, while hovering highlights states in light green. The data is loaded from CSV and TopoJSON files, and tooltips display state name, region, and raw earthquake totals.

Sep 30, 2019
Loading thumbnail…

Choropleth Map

A choropleth map of the United States visualizes total earthquakes per state on a geographic projection, using a color scale that encodes the logarithmic earthquake count. State regions are colored according to their assigned region, with a sequential color scheme from `schemeOrRd`. The map is rendered as SVG paths using `d3.geoPath` with a `geoAlbersUsa` projection, and earthquake data is loaded from a CSV file. Hovering highlights a state in light green with a dark red stroke.

Sep 30, 2019
Loading thumbnail…

Temperature in San Francisco Line Chart

The chart displays worldwide earthquake statistics from 2002 to 2015, showing four magnitude categories (5.0–5.9, 6.0–6.9, 7.0–7.9, and 8.0+) as multiple colored line series over time. Using D3 v5 with an SVG rendering approach, the visualization employs `d3.csv` to load data, `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveBasis` for smooth paths, and `axisBottom`/`axisLeft` for grid labels. Circles mark individual data points for the 5.0–5.9 magnitude range, while yearly values are parsed as date objects for the time scale.

Sep 29, 2019
Loading thumbnail…

Temperature In SanFrancisco : LineChart

This line chart displays worldwide earthquake statistics from 2002 to 2015, plotting yearly counts across four magnitude categories (5.0–5.9, 6.0–6.9, 7.0–7.9, and 8.0+) as separate colored lines. It uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smooth paths, and d3.axisBottom/axisLeft with gridlines. Data loads from a CSV via d3.csv, rendered as SVG with custom styling for legends, titles, and rotated axis labels.

Sep 28, 2019
Loading thumbnail…

Temperature In SanFrancisco : LineChart

This line chart displays the number of earthquakes in different magnitude ranges from 2002 to 2015, with four colored lines representing categories from 5.0-5.9 up to 8.0+. The visualization uses D3 v5 with a time-scaled x-axis and linear y-axis, rendered as SVG paths generated by the `line()` and `curveBasis` functions. Data is loaded from a CSV file using `d3.csv` and transformed for plotting. The chart emphasizes magnitude distribution trends over time rather than individual data points.

Sep 27, 2019
Loading thumbnail…

Lego Sets by Year from Rebrickable

A bar chart visualizes the cumulative number of LEGO sets released each year from 1949 to 2019, using data from Rebrickable. The chart shows a steady upward trend over time. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG output. The `csv` function loads the data, which is parsed and plotted with rectangles, while custom tick intervals are defined using `d3.timeYear`.

Sep 9, 2019
Loading thumbnail…

Lego Sets by Year from Rebrickable

A bar chart visualizes the cumulative number of LEGO sets released each year from 1949 to 2019, using data from Rebrickable. The chart shows a steady upward trend over time. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG output. The `csv` function loads the data, which is parsed and plotted with rectangles, while custom tick intervals are defined using `d3.timeYear`.

Sep 9, 2019
Loading thumbnail…

Lego Sets by Year from Rebrickable

This bar chart displays the cumulative running total of LEGO sets released each year from 1949 to 2019, using data from Rebrickable. The chart encodes years on the x-axis and the running total (divided by 100 in the data preprocessing) on the y-axis, with steel-blue bars representing each year’s cumulative count. The visualization is built with D3 v5, using `csv()` to load the data, `scaleBand` and `scaleLinear` for scales, and `axisBottom` and `axisLeft` for axes. The title and axis labels are added manually via SVG text elements.

Sep 8, 2019
Loading thumbnail…

Bar chart

This example shows a horizontal bar chart with a time-based x-axis and categorical y-axis, displaying progress along a timeline for crew groups. The bars are rendered with a fixed green fill, and the x-axis includes a custom tick format with negative tick sizes. The code uses D3 v5 APIs including `scaleTime`, `scaleBand`, `scaleOrdinal`, `axisLeft`, and `axisBottom`, and loads data from a local CSV file via `d3.csv`. An SVG container with specific width and height dimensions is selected using `d3.select`.

Sep 8, 2019
Loading thumbnail…

Untitled

This visualization shows the cumulative growth of a dataset from 1949 to 2019, tracking a running total that increases from 5 to nearly 15,000 over seven decades. The data is loaded from a CSV file using D3’s `csv()` function, though the rendering logic is incomplete in the provided `index.js`. The example demonstrates how to import and parse tabular data with D3 v3, including accessing SVG dimensions via `.attr()` and preparing the data for subsequent plotting. The chart’s design and marks are not yet implemented in the visible code.

Sep 8, 2019