Minh Nguyen

@MeoAtelier·11 public vizzes

Fork of Density plot

This visualization shows density contours of eye-tracking fixation points from the Old Faithful dataset, overlaid on a map of Antwerp's metro system. The contour plot highlights areas of concentrated gaze, with colors ranging along a diverging PiYG scale to indicate varying density values. The code uses `d3.contourDensity` to compute the contours and `d3.geoPath` to render them as SVG paths. Interactive mouse movement dynamically adjusts the bandwidth of the density estimation, updating the contour shapes in real time. The data, loaded from `data.csv` via `d3.csv`, includes fixation coordinates and durations for multiple participants and stimuli.

Jun 11, 2021

Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript : Mar 27,2021 : group of circles, more circles - Animations

A dense grid of 10,000 SVG circles animates in a generative art piece inspired by Sol LeWitt. The circles, each with a random stroke color and no fill, pulse between 0 and 20 pixels in radius over a 20-second cycle, creating a flowing, rhythmic field of concentric outlines. The animation is driven by CSS `@keyframes` applied to the `r` property, while the grid itself is generated with vanilla JavaScript using the SVG API to create and position elements.

Jun 11, 2021

Loading thumbnail…

Fork of Scan Path

The visualization displays eye-tracking scan paths over a map of Antwerp’s metro system, with each participant’s fixations drawn as colored circles and connected by sequential lines. Circle size encodes fixation duration, while color identifies the user, and hovering reveals exact duration and participant details. Built with D3 v5, it uses `scaleLinear` for the x/y axes, `scaleOrdinal` with `schemeCategory10` for colors, and `nest` to group data by user, rendering paths and circles as SVG elements on a styled background.

Jun 11, 2021

Loading thumbnail…

Fork of Bangladesh poverty MAP

A choropleth map of Bangladesh displays district-level poverty rates, showing the percentage of the population in poor and extreme poverty conditions for each division through a white-to-red color scale. Hovering over a district reveals a tooltip with the city name, ID, and specific poverty statistics. Built with D3 v5, it uses d3.json to load TopoJSON geographic data and sales data, d3.geoMercator and d3.geoPath for map projection and rendering, and d3.zoom for pan and zoom interactions on the SVG output.

Jun 11, 2021

Loading thumbnail…

Fork of Globe Zoom - Animate

This interactive globe visualization allows users to explore geographic data through an animated, zoomable Earth. It presents a globe that automatically rotates, with countries rendered as filled polygons and graticules shown as lines. The visualization uses a custom fork of the D3 v3 library, integrating `d3.geo.orthographic` projection, `d3.geo.path` for rendering, and `d3.geo.zoom` for interactive panning and scaling. Data is loaded from external CSV files and displayed as colored points on the globe, with tooltips providing details on hover. The interface includes menu buttons for switching between different map projections and datasets, all styled with a dark theme and CSS animations.

Jun 11, 2021

Loading thumbnail…

Fork of Multivariate Choropleth Experiments

This example visualizes multidimensional racial demographic data for New York census tracts, showing the relative populations of White, Black, and Asian residents. It uses a multivariate choropleth approach where each tract’s fill color results from blending three HCL color scales (one per race) via multiplicative alpha blending in `d3.scaleSqrt`, with data from the American Community Survey. The map renders as SVG using `d3.geoPath` and TopoJSON, supports zooming via `d3.zoom`, and includes an ordinal color legend. Hovering reveals exact population counts in a tooltip.

Jun 11, 2021

Loading thumbnail…

Ttemplate

This example displays a large, bold greeting message centered on the screen, showcasing minimal styling with inline CSS. The page is built with plain HTML and uses no JavaScript libraries or data sources. It demonstrates a simple, text-only visualization with responsive font sizing and a clean, uncluttered layout. The code defines the entire presentation directly in the HTML file, making it easy to modify and reuse as a starter template.

Apr 21, 2020

Loading thumbnail…

React Starter

This example shows a minimal React application that renders the text “Hello React!” centered on the page. It uses React and ReactDOM to create a functional component and mount it to the `#root` DOM element. The static message is styled with a large font size via a CSS class defined in the HTML file. The code relies on React 16.10.0 and ReactDOM, with no external data or interactive visualization.

Apr 20, 2020

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This visualization presents migrant deaths on a world map using a bubble chart, with a linked time-series histogram below for brushing. It shows the geographic distribution of the “Total Dead and Missing” metric, sized with `d3.scaleSqrt`, while the histogram aggregates deaths by month. Users can brush the histogram to filter map bubbles. Built with React and D3 v5, it uses `d3.geoNaturalEarth1` projection, `topojson` for land and interior boundaries, and `d3.brushX` for interactive selection. Data comes from the Missing Migrants Project.

Apr 19, 2020

Loading thumbnail…

Choropleth Map Interactivty selection

This example shows an interactive choropleth map where clicking a legend category highlights matching countries and dims all others. Built with D3 v5 using `d3.geoMercator` and `d3.geoPath` for SVG rendering, it also applies `d3.zoom` for panning. The legend uses `d3.scaleOrdinal` with `schemeSpectral`, and click events toggle the selected category. Data comes from the World Atlas TopoJSON and TSV files, loaded via `Promise.all`.

Apr 19, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations using D3 v5 within a React framework. It renders SVG rectangles whose widths are scaled linearly by population values and heights by an ordinal band scale for countries. The code specifically uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3, with data loaded from a CSV file. Population values are multiplied by ten during import, and the chart includes margins and unlabeled axes.

Apr 19, 2020