J

Junying Li

@Junying-Li·18 public vizzes

Loading thumbnail…

Interactive Visualization (Brush) - Earthquake Data

This interactive dashboard visualizes earthquake data with three synchronized views: a bar plot of regional death tolls, a world map showing earthquake locations with circle radii scaled by Richter magnitude, and a line chart depicting global deaths by year. The code uses d3.geoPath with a Mercator projection to render the map, while d3.brush enables year selection that updates all views. Hovering over map regions triggers tooltips via mouseover events, and a legend explains the Richter scale. Data is loaded via d3.csv from an external gist URL, with d3.scaleLinear and d3.scaleBand managing the axes.

Loading thumbnail…

D3 Line Chart With Brush - Earthquakes

A D3 line chart visualizes global total earthquake deaths per year from 1900 to 1999, using data from a CSV of earthquake records. Circles mark individual yearly totals, connected by a steelblue line. An interactive brush (d3.brushX) allows selection along the x-axis; selected circles turn red, and double-clicking either clears the selection or selects all data if none exists. The chart uses d3.scaleLinear for both axes, d3.axisLeft, d3.axisBottom, and d3.rollup to aggregate deaths by year, rendered as SVG elements.

Loading thumbnail…

Interactive Visualization (Brush) - Earthquake Data

This interactive visualization presents earthquake data from the 19th century through three coordinated views: a bar plot of deaths by region, a world map with circles sized by Richter magnitude, and a scatter plot correlating year, magnitude, and deaths. A brush interaction on the scatter plot filters the year range across all views. The map uses d3.geoMercator projection with d3.geoPath to render country boundaries from a GeoJSON source, includes a magnitude legend, and displays country names via tooltips on mouseover. The charts are built with D3 v7 APIs including scaleBand, scaleLinear, and the join operator.

Loading thumbnail…

D3 Scatter Plot With Brush - Earthquakes

A D3 scatter plot displays earthquakes from 1900 to 1999, mapping year on the x-axis, Richter magnitude on the y-axis, and death count to circle radius. The chart uses `d3.brushX` to select a time range, turning selected circles red; double-clicking either clears the selection or selects all circles if none exist. Data comes from a CSV hosted on GitHub Gist. The SVG visualization uses `d3.scaleLinear` for positioning and sizing, with `d3.axisLeft` and `d3.axisBottom` for axes, and is rendered from the `d3.v6` library.

Loading thumbnail…

Interactive Visualization (Two Menus) - Earthquake Data

This interactive visualization presents earthquake data from the 20th century through a bar plot and a world map. Two dropdown menus allow users to filter the data by start and end year, updating both the bar chart of regional death tolls and the map’s earthquake locations. The map uses `d3.geoPath` with a Mercator projection to render country outlines, while circle radii encode the Richter scale magnitude. The bar chart employs `d3.scaleBand` and `d3.scaleLinear` for axes, with tooltips providing country names on map hover. Visualizations render in SVG with smooth transitions.

Loading thumbnail…

Interactive Visualization (One Menu) - Earthquake Data

This interactive visualization displays earthquake data from 1900 to 1999, combining a world map and a bar chart. The map uses `d3.geoMercator` and `d3.geoPath` to render earthquake locations as circles, with radius representing Richter magnitude. The bar chart aggregates total deaths by region, updating via a dropdown menu that filters data by twenty-year intervals. Both SVG visualizations share the same dataset, loaded from a CSV file, and employ D3 v7’s data-join and transition methods for updates.

Loading thumbnail…

Interactive Visualization (button) - Earthquake Data

This interactive visualization displays earthquake deaths by region in a bar plot alongside a world map showing earthquake locations and magnitudes. Users click buttons to filter data across different 20th-century time periods. The bar chart sums deaths per region using d3.csv, d3.filter, and d3.sum, while the map uses d3.geoMercator and d3.geoPath to project earthquake positions as circles sized by Richter scale. Data comes from a CSV containing latitude, longitude, and earthquake details.

Loading thumbnail…

Interactive Earthquake Bar Plot

This interactive bar plot displays earthquake deaths across various regions during the 20th century, with buttons filtering the data into 20-year periods. When a user clicks a button, the bars re-sort by death toll and smoothly animate to their new positions via D3's `transition` on the `rect` elements. The code uses `d3.csv` to load the dataset, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` to render them. The visualization is built with D3 v7 and rendered as SVG.

Loading thumbnail…

Iterated Earthquake Bar Plot

This bar plot visualizes total earthquake deaths by region during the 20th century, with bars sorted descending to highlight that Peru exceeds 700,000 fatalities. The visualization aggregates data from a CSV file using d3.csv, sums deaths per region with d3.sum, and renders an SVG with d3.axisBottom and d3.axisLeft for labeled axes. Regions are grouped via array filtering, and a transition animates the Y-axis update.

Loading thumbnail…

Simple World Map

This example displays a simple world map using D3.js v5 and TopoJSON, rendering countries as green polygons against a blue sphere background. It uses `d3.geoPath` with the `geoNaturalEarth1` projection to convert geographic coordinates into SVG paths, and `topojson.feature` to extract country boundaries from the world-atlas dataset. The visualization is static, with no interaction or zoom enabled, focusing solely on the geographic outline of continents and national borders.

Loading thumbnail…

Earthquake Bar Plot

This bar plot displays earthquake fatalities across different regions in the 19th century, with the x-axis showing the region and the y-axis recording deaths. The chart reveals that over 700,000 people died in Peru due to earthquakes during this period. The visualization uses d3.v7’s scaleBand and scaleLinear to map the region and death values, rendering rectangles as bars in SVG. Data is loaded asynchronously via d3.csv from a GitHub-hosted earthquakes.csv file, with rotated x-axis labels for readability.

Loading thumbnail…

D3 Scatter Plot - Earthquakes

A scatter plot displays earthquake magnitude (Richter scale) on the y-axis against time (years 1900–1999) on the x-axis, with each circle's radius encoding the number of deaths. The plot uses D3 v6 with SVG rendering, employing `scaleLinear` for axes and circle size, `extent` for domain calculation, and `axisLeft`/`axisBottom` for tick marks. Data comes from a CSV file loaded via `d3.csv`, and circles are drawn with semi-transparent opacity to show overlapping points across the timeline.

Loading thumbnail…

D3 Scatter Plot - Earnings and Education

This scatter plot visualizes the relationship between years of education and hourly earnings, with blue points for males and red points for females. The data comes from a CSV file loaded asynchronously via `d3.csv`. The code uses D3 v6 scales (`d3.scaleLinear`), axes (`d3.axisLeft`, `d3.axisBottom`), and SVG circles to render the points with opacity for overlap. The chart fills the browser window, with margins defining the plotting area.

Loading thumbnail…

D3 Scatter Plot - Minnesota Wolf Depredation

This scatter plot maps Minnesota wolf depredation events by latitude and longitude, with circle radius scaled to the total number of depredations at each location. Orange circles indicate incidents that occurred predominantly before 1992, while teal circles represent those concentrated in 1992 or later. The visualization uses d3.csv to load the dataset, d3.scaleLinear for the x, y, and radius scales, and d3.axisLeft and d3.axisBottom to render the axes. Circles are appended to an SVG canvas with opacity and fill colors determined by the early-late comparison.

Loading thumbnail…

Earnings and Education

This example displays the file size, row count, and column count of a CSV dataset on earnings and education from Stock and Watson (2007), using data from the March Current Population Surveys. It loads the data with d3.csv and renders the summary statistics as text in a large <pre> element. The code also includes commented alternatives using fetch with async/await and a nested promise chain to illustrate different parsing approaches.

Loading thumbnail…

Earthquakes

This example loads and parses a CSV file of notable earthquakes from 1900 to 1999, then displays basic file statistics—size in kilobytes, row count, and column count—in a large text element. The visualization emphasizes data loading and parsing over graphical rendering, using `d3.csv` to fetch and parse the remote dataset from a GitHub gist, and `d3.csvFormat` to calculate the raw data size. The code also demonstrates an alternative `fetch`-based approach with `d3.csvParse`, though the active path uses the simpler `d3.csv` promise interface.

Loading thumbnail…

Minnesota Wolf Depredation Data Set

This example displays a text summary of the Minnesota Wolf Depredation Data Set, showing the file size in kilobytes, the number of rows, and the number of columns. It loads and parses a remote CSV file using the `d3.csv` method from D3 v5, then formats the parsed data with `d3.csvFormat` to calculate its length. The interface is a simple HTML page with a large `<pre>` element for readable output. The data originates from the Harper et al. study on livestock depredations across Minnesota farms from 1976 to 1998.

Loading thumbnail…

Heart and Christmas Tree

A heart-shaped polygon cradles a stylized Christmas tree built from layered triangular polygons, with a striped trunk and a soft glow from blurred golden lights. The SVG scene demonstrates geometric shape composition using polygons, rectangles, and ellipses, with a Gaussian blur filter applied via `feGaussianBlur` to create the light effects. The tree’s dark green and teal tones contrast against the pale pink heart, while the lights are positioned along the tree’s tiers. All rendering is static SVG, with no interactive or animated behavior.