M

Minh Luong

@minhlgdo·22 public vizzes

Loading thumbnail…

Viet refugees

This interactive world map visualizes Vietnamese refugee data from 1975 to 1995, allowing users to switch between three metrics: refugees under UNHCR’s mandate, returned refugees, and resettlement arrivals. A year selector and view dropdown update the map dynamically, with each country colored using a red-yellow-green ordinal scale based on the selected metric. The visualization uses D3 v5 with geoNaturalEarth1 projection, geoPath, and zoom functionality, while loading TopoJSON world atlas data and CSV refugee statistics from a remote source. Hovering over countries reveals tooltips with specific values via SVG title elements.

Loading thumbnail…

Multiple Views

This interactive visualization combines a world map with a time-series histogram to explore migrant deaths and disappearances. The map displays circles scaled by the square-root of the total dead and missing per location, using `d3.geoNaturalEarth1` and `d3.geoPath` for geographic rendering. The histogram aggregates the same data by month, using `d3.bin` and `d3.timeMonths` to show temporal trends. Both views are built with React and D3 v5, rendering to SVG, with data sourced from a Missing Migrants CSV file.

Loading thumbnail…

Missing Migrants on a Map

This visualization displays the locations and magnitudes of missing migrant incidents on a world map. Each circle represents an incident, with its radius scaled to the square root of the total number of dead and missing people, using a square-root scale for area proportionality. The map uses an equirectangular projection from d3.geoPath, with land polygons and graticules rendered as SVG paths, sourced from world-atlas TopoJSON data. Incident coordinates and fatality counts are parsed from a CSV dataset provided by a gist, and the visualization is built with React and d3.v5.

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This fork of the Missing Migrants scatter plot visualizes aggregated monthly totals of dead and missing migrants over time. The chart uses bars to show the sum of casualties per month, with time on the x-axis and the total count on the y-axis. Data comes from the Missing Migrants Dataset, loaded via `d3.csv`. The React-based visualization renders with SVG, using D3 scales (`scaleTime`, `scaleLinear`) and a histogram (`d3.histogram`) to bin the data by month. Axes and marks are custom components, with tooltips (via `<title>`) showing exact values.

Loading thumbnail…

Fork of Polished World Map

This example shows a world map with country boundaries, graticules, and city points sized by population. The visualization uses a Natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with land and interior borders rendered from World Atlas TopoJSON. City data comes from a CSV of world cities, and circle radii are scaled with `d3.scaleSqrt` based on population. The map is built with React components, styled in SVG, and uses D3 v5 for geographic and data-processing tasks.

Loading thumbnail…

Interactive color legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal width against sepal length with points colored by species via a D3 ordinal color scale. Hovering over the color legend highlights the corresponding species by increasing opacity of matching circles while dimming others. The visualization uses React with the d3.scaleLinear and d3.scaleOrdinal APIs, rendering SVG elements through React components. Data is loaded asynchronously with d3.csv, and interactivity is managed through React’s useState hook for tracking hovered values.

Loading thumbnail…

Making Scatter Plot with Colors

This visualization shows the classic Iris dataset as a scatter plot, mapping sepal length along the horizontal axis and sepal width along the vertical axis, with each species distinguished by a different color. The plot uses React to render SVG elements, while D3 v5 provides scaling functions (`scaleLinear`, `scaleOrdinal`) for positioning and coloring. Custom components handle the axes and color legend, and the data is loaded from a CSV file using D3’s `csv` function.

Loading thumbnail…

Making Scatter Plot

A scatter plot of the Iris Dataset displays sepal length against sepal width, with each point colored by species using a d3.scaleOrdinal color scale. The visualization is built with React components and renders SVG circles with tooltips via the title element. D3 v5 handles data loading through csv() and linear scales for both axes, while custom AxisBottom and AxisLeft components generate tick marks and labels.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which measurements appear on the X and Y axes through dropdown menus. The chart updates dynamically, displaying species data as colored circles with SVG rendering. Built with React and D3, it uses `csv` for data loading, `scaleLinear` for axes, and custom components for rendering marks and dropdown controls. Native SVG `<title>` elements provide tooltips on hover.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus select which attributes appear on the x and y axes, with options for all four numeric measurements and species. The visualization uses React hooks for state management, d3.scaleLinear for axis scaling, and d3.csv for data loading. Points are rendered as SVG circles with native tooltips showing the x-axis value.

Loading thumbnail…

Menu in React

This example demonstrates a simple pet-selection menu built with React. It shows a dropdown list of six animal options using a reusable `Dropdown` component that manages its own selection state. The `useState` hook tracks the currently chosen value, and the component receives `options`, an `id`, and a callback via props. The interface is rendered in SVG, though the menu itself uses native HTML `<select>` and `<option>` elements within the React tree.

Loading thumbnail…

Making a Line Chart

This example shows a line chart of weekly temperature readings, with smooth curves connecting data points and circular markers that display values on hover. The chart uses React components for rendering the SVG, with d3.scaleLinear for both axes and d3.line with curveNatural for the path. Axis ticks and labels are generated through custom React components, while the temperature data comes from a local CSV file fetched using d3.csv.

Loading thumbnail…

Working with Time

A scatter plot displays hourly temperature readings over a week, using a time-based x-axis and a linear y-axis for degrees. Built with React and D3 v5, it renders circles as SVG marks, with axes generated by custom components. The data comes from a CSV file of San Francisco temperatures, loaded via `d3.csv`. Scales are created with `d3.scaleTime` and `d3.scaleLinear`, and tooltips are provided by native SVG `<title>` elements showing formatted time values.

Loading thumbnail…

Stylized Bar Chart with React & D3

This stylized bar chart displays the top 10 countries by estimated 2020 population, using horizontal bars derived from UN population data loaded with d3.csv. The React app manages data loading through a custom useData hook and renders an SVG composed of reusable components for axes and marks. D3’s scaleBand and scaleLinear map countries and population values, while d3.format converts large numbers into abbreviated strings like “1.23B” for axis ticks and tooltips.

Loading thumbnail…

Refactoring a Bar Chart with React & D3

This example demonstrates how to refactor a bar chart into reusable React components, combining D3 scales with React’s declarative rendering. It visualizes the top 10 countries by population from a UN 2019 dataset, loaded via `d3.csv`. The code separates axes and marks into `AxisBottom`, `AxisLeft`, and `Marks` components, using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, all rendered as SVG within React’s state management.

Loading thumbnail…

Making a Bar Chart with React & D3

This example demonstrates a bar chart visualizing the top 10 most populous countries from a 2019 UN population dataset. The chart uses React state to manage the fetched CSV data and renders an SVG visualization via D3 scales, including labeled tick marks for both axes. The code leverages `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear` for data loading and positioning, while React's `useState` and `useEffect` hooks handle data retrieval and conditional rendering. The bars are drawn as SVG rectangles sized proportionally to population values.

Loading thumbnail…

Rendering Data with React

This visualization displays a pie chart of CSS named colors, loaded from a CSV file. Using D3 utilities such as `csv` and `pie`, the data feeds a React application that renders SVG paths, with each segment's fill color mapped to its corresponding hex value. React state manages the asynchronous data loading and rendering lifecycle.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading and displaying CSS named colors as vertical color stripes, with data fetched asynchronously from a remote CSV file. The React component uses the `useState` and `useEffect` hooks to manage the data-loading state, showing a “Loading…” message until the data arrives. It employs D3’s `csv` function to parse the external dataset, then maps each row to a styled `<div>` element whose background color corresponds to the `RGB hex value` column. The visualization updates dynamically once the data is ready, rendering 148 color swatches in a full-width strip.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for a collection of automobiles, using a scatter plot of semi-transparent points with tooltips displaying vehicle names. It is built with the Vega-Lite API, which compiles specifications into Vega and renders them as SVG, while D3.js loads the data from a CSV file hosted on GitHub. The visualization adapts to the full window size and applies a custom configuration to adjust axis and label styling for improved readability.

Loading thumbnail…

Mouse Follower

This example displays a single circle that follows the mouse cursor across the full browser window. The circle is rendered as an SVG element with its position updated on every mouse movement event. Built with React, the code uses the `useState` and `useCallback` hooks to manage and optimize the cursor position state, while `ReactDOM.render` mounts the component. The SVG viewport is set to the window’s dimensions, and the circle’s center coordinates are directly bound to the tracked mouse position.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file from a remote URL using the Fetch API in a plain HTML page. It fetches a CSV file containing CSS named colors from a GitHub gist and logs the raw text content to the browser console. The code uses the async/await syntax with `fetch()` and `response.text()` to handle the asynchronous data retrieval. No external libraries or visualization frameworks are used; the focus is solely on the initial step of acquiring and inspecting CSV data for later processing.

Loading thumbnail…

Smiley Face Part VI

This example displays a grid of eighteen cartoon smiley faces, each with randomized facial features such as eye offset, eye radius, mouth width, and stroke thickness. Built with React and D3 v5, the visualization uses reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth generated via the `d3.arc()` API. Each face renders as an SVG element, and the random variation in parameters creates a playful, slightly irregular family of faces that remain centered within fixed 160 by 160 pixel viewports.