Skip to main content
Log in
H

HaowenWeiJohn

@HaowenWeiJohn·12 public vizzes

Loading thumbnail…

Fork of Final Project: Map of Nuclear Explosions

This interactive map visualizes nuclear explosions from a historical dataset, positioning each event by latitude and longitude on a Natural Earth map rendered with d3.geoPath and TopoJSON. Point size encodes explosion magnitude via a d3.scaleSqrt, while color distinguishes the responsible country using a d3.scaleOrdinal. Users can filter events by purpose and deployment type through dropdown menus, hover over points for tooltips, click for detailed information, and brush the linked d3.histogram of events per year to filter the map by time range.

Mar 5, 2021
Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization links a world map and a time-series histogram to explore migrant deaths. A bubble map uses a square-root scale to plot the total number of dead and missing people per location, while a brushing tool on the date histogram filters the map's displayed circles in real time. Built with React and D3 v5, it employs `geoNaturalEarth1` and `geoPath` for the map, `brushX` for selection, and `scaleSqrt` for bubble sizing. Data comes from a CSV of Missing Migrants records, with country boundaries from World Atlas TopoJSON.

Mar 5, 2021
Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a bubble map and a date histogram to explore global migrant deaths and disappearances. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with bubble sizes scaled by the square root of the death count, while the histogram bins monthly totals using `d3.histogram` and `timeMonths`. Brushing on the histogram with `d3.brushX` filters the map’s circles in real time, showing how temporal selections affect geographic patterns. Data comes from the Missing Migrants Project CSV, rendered as SVG with React components.

Mar 5, 2021
Loading thumbnail…

Fork of Fork of Smiley Face Part II

A smiley face rendered in React and SVG combines a yellow circular head with layered, colorful eyes and a wide grin. The composite facial features are assembled from separate React components—`Eyes` and `Smile`—which contain hand-coded SVG ellipses, paths, and circles with CSS classes for color fills. The main `App` component positions and scales these parts using inline SVG `<g>` transform and translate attributes, producing a static vector illustration.

Mar 5, 2021
Loading thumbnail…

Fork of Fork of HTML Starter

This bar chart displays country populations with a mouseover effect that highlights the bar in red with a blue stroke and displays a text label showing the country name and formatted population (e.g., "China has Population of 1.42B"). The visualization uses D3 v6 APIs including `scaleBand`, `scaleLinear`, `axisLeft`, `axisBottom`, and `select` for interactivity. Data loads from a CSV via `d3.csv`, with populations multiplied by 1000, and renders as SVG rectangles sized from the scales.

Feb 24, 2021
Loading thumbnail…

Fork of Stylized Bar Chart

This fork of a stylized bar chart displays the top 10 most populous countries, using horizontal bars to compare populations from the 2019 United Nations World Population Prospects dataset. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The SVG rendering includes custom axes and marks, with tooltips formatted via D3's `format`. The data is loaded asynchronously via `useData`, fetching a CSV to populate the chart.

Feb 19, 2021
Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which measurement appears on the x- and y-axes. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and gridlines, while data points are drawn as SVG circles with color-coded species and an accompanying legend. When the axes change, the circles smoothly transition to their new positions using D3's `transition()`.

Feb 13, 2021
Loading thumbnail…

Fork of IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes defensive asylum case wait times in days against case entry dates, with points colored by decision code (Relief, Granted, Removed, Cast Terminated). A dropdown menu filters the data by year (2003–2011 or all years), updating the x-axis from yearly to monthly granularity and displaying a message when no data exists for a selected year. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, plus SVG-rendered axes, color legend with hover highlighting, and tooltips showing wait times. Data comes from a CSV file processed in `useData.js`.

Feb 13, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile fuel efficiency by plotting miles per gallon against horsepower, with point size encoding weight and color distinguishing country of origin. Built using the Vega-Lite API and D3.js, it loads automotive data from the UCI Machine Learning Repository via a CSV file. The visualization is rendered as an SVG, configured with customized axis and label styling, and includes hover tooltips displaying vehicle names.

Feb 13, 2021
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. Each red, semi-transparent circle represents a car, positioned according to its horsepower (x-axis) and weight (y-axis). The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to build the axes, while data is loaded via `d3.csv` and rendered as SVG circles. The chart includes labeled axes and a title, with styling applied through CSS.

Feb 13, 2021
Loading thumbnail…

Fork of D3 Starter

This example is a minimal starter for D3 version 6, displaying the text “Hello D3 version 6” centered on a blank page. The code uses the `select` function from the D3 library to target the page’s body element and writes the greeting via the `.text()` method. It imports `select` directly from `'d3'` in the JavaScript file, while the HTML links to the D3 v6 library from a CDN and loads a separate `bundle.js` script.

Jan 31, 2021
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup that renders a text message centered on the page using the `select` function. It loads D3 v5 via a CDN link in the HTML and imports both the `select` API and a local ES6 module exporting a string. The code then sets the text content of a `div` element with the ID `message` to display “Hello VizHub!”, with styling from an external CSS file. The visualization shows how to combine external libraries, module imports, and DOM manipulation in a single page.

Jan 31, 2021