guangxinhu

@guangxinhu·13 public vizzes

Significant Earthquake in World: 1970-2019

This visualization maps significant earthquakes from 1970 to 2019 on a world map, with bubble size encoding focal depth and color distinguishing tsunami-generating events. Hovering a point filters the display to that event type and reveals its coordinates. The React app uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses from World Atlas TopoJSON, while d3.scaleSqrt and d3.scaleOrdinal map earthquake attributes. Data comes from the NOAA Significant Earthquake Database, loaded via d3.csv.

Oct 31, 2019

Loading thumbnail…

Significant Earthquake in World: 1970-2019

This interactive scatterplot visualizes significant earthquakes from 1970 to 2019, plotting attributes like magnitude, focal depth, and year on selectable X and Y axes via React dropdowns. Each point’s color indicates tsunami occurrence, with a color legend that fades non-hovered categories on mouseover. Built with React and D3 v5, the chart uses d3.scaleLinear, d3.scaleOrdinal, and SVG circles for marks, and includes axes rendered via custom React components. Data comes from the NOAA significant earthquake database, loaded as CSV through d3.csv.

Oct 24, 2019

Loading thumbnail…

Significant Earthquake Database

This visualization plots significant earthquake events from NOAA’s Significant Earthquake Database as circles, with the x-axis showing the year and the y-axis showing magnitude. Circle color encodes earthquake duration in seconds, and hovering reveals the magnitude via tooltip. Using Vega-Lite API with d3.csv for data loading, the chart renders in SVG across the full viewport. The code configures axis styling and dark text through a custom Vega-Lite config object, with marks set to semi-transparent circles for overlapping event visibility.

Oct 9, 2019

Loading thumbnail…

Scatter Plot for House Price

This interactive scatter plot visualizes house prices in Ames, Iowa, with users selecting X and Y attributes from dropdown menus for Lot Area, Overall Quality, Year Built, Garage Area, and Sale Price. The visualization uses React components with d3.scaleLinear for axes and scales, rendering SVG circles with tooltips. Data loads via d3.csv from a GitHub gist, and the axes are formatted using d3.format with abbreviations.

Oct 9, 2019

Loading thumbnail…

Earthquakes in Turkey

This visualization plots earthquake events across Turkish cities. Each point represents a single earthquake, with the x-axis showing the city, the y-axis showing the earthquake's magnitude (richter scale), and the color encoding the depth. The visualization uses the Vega-Lite API with a D3 data loading function, pulling CSV data from a GitHub gist. Points are rendered as semi-transparent circles with a tooltip displaying the magnitude on hover.

Sep 26, 2019

Loading thumbnail…

Click to get more donuts

Clicking the "Hungry" button appends a donut image to the page and updates a status message, demonstrating dynamic DOM insertion through JavaScript. The example uses `document.createElement` and `appendChild` to add an `<img>` element sourced from an external PNG URL (pngimg.com) after each click. The code references the tutorial "Adding and Removing Elements on the Fly Using JavaScript" and includes commented-out logic for removing elements, though the active interaction only adds donuts, not removes them. The visual result is a growing row of donut images below the text.

Sep 26, 2019

Loading thumbnail…

Angry Face

A pink angry face is drawn as an SVG graphic centered on a 960-by-500 canvas. The face uses a large circle for the head, ellipses for eyes, and an arc to create a frown, while red cubic Bézier paths form slanted eyebrows. The visualization is built with React, rendering SVG elements, and relies on the `arc` generator from D3 v5 to compute the mouth shape. Static, hardcoded coordinates define each facial feature.

Sep 19, 2019

Loading thumbnail…

House Price in Ames

This visualization shows house prices in Ames, Iowa, with each circle representing a property. The scatter plot encodes construction year on the x-axis, sale price on the y-axis, overall quality as color, and lot area as point size, revealing how these factors correlate with pricing over time. The implementation uses Vega-Lite API with D3 v5 for CSV data loading, while the config.js file customizes axis and label styling. The visualization renders as an SVG via Vega renderer with tooltips providing sale price details.

Sep 19, 2019

Loading thumbnail…

Eatrhquakes in Turkey

This visualization shows earthquake frequency in Turkey across a range of years, with a bar plot where the X-axis encodes time and the Y-axis represents the total quake count. Colors distinguish each city’s contribution. The chart is built using Vega-Lite’s API (registered with Vega and rendered to SVG), pulling data from a CSV file via d3.csv. The bar marks are configured with a fixed width and opacity, and axes use a customized color scheme for improved readability.

Sep 19, 2019

Loading thumbnail…

US population

This line plot shows how the US population changed over time, with the x-axis displaying years and the y-axis showing population values for each year. The visualization uses a dataset from a GitHub gist, loaded via D3’s `csv` loader, and renders a single line with Vega-Lite’s `markLine`. Tooltips display exact population values on hover, while vega-tooltip provides the interaction. The chart is configured with custom axis styling and colors from the config file, and it fits to the full viewport size.

Sep 19, 2019

Loading thumbnail…

Chicago Employee Reimbursements

This example loads a CSV file of Chicago employee reimbursements and reports its size in kilobytes, row count, and column count. It fetches the data from a GitHub gist using `d3.csv`, then formats the results with `d3.csvFormat` and `Math.round` to compute file size. The output is displayed as plain text in a large `<pre>` element. The code also includes commented alternatives using `fetch` with async/await and a promise chain, illustrating different ways to parse CSV data with `d3.csvParse`.

Sep 19, 2019

Loading thumbnail…

Pizza Restaurant and Its Pizza

This example displays basic dataset statistics for a collection of over 3,500 pizzas from Datafiniti’s Business Database, showing the file size in kilobytes, row count, and column count as large text. It loads the CSV data using `d3.csv` with a promise, then formats the summary with `d3.csvFormat` to measure the raw data length. The page uses d3.v5 and includes commented alternatives using `fetch` with async/await and a nested promise approach.

Sep 19, 2019

Loading thumbnail…

House Price in Ames, Iowa

This example displays metadata about a house price dataset for Ames, Iowa, showing its size in kilobytes, row count, and column count in large text. It uses D3 v5 to fetch CSV data from a remote gist URL via `d3.csv`, then formats and summarizes the dataset using `d3.csvFormat` and the data object's intrinsic row and column properties. The simple visualization focuses on data loading and summary rather than graphical plotting, demonstrating D3's file-handling capabilities.

Sep 19, 2019