umgi

transform 3

This example uses HTML, CSS, and JavaScript to create an animated 3D cylinder of text. Randomly placed paragraphs with placeholder Latin and Japanese characters are wrapped in infinitely spinning cylindrical layers, with a slowly tilting camera. The code applies per-character transforms using CSS custom properties, and the Zepto.js library is used to manipulate the DOM and set styles. The project uses React as noted in the metadata.

Mar 25, 2021

transform 3d

This example builds a 3D cylindrical text display using HTML, CSS, and JavaScript with the Zepto.js library. Each character of a paragraph is wrapped in a `<span>` and given a random `--z` offset, creating a scattered, three-dimensional ring effect. The entire cylinder rotates via a CSS `@keyframes` animation that applies `rotateX` and `rotateY` transforms, while the text itself uses `translateZ` to flow in and out of position. The visual output relies on CSS `perspective` and `transform-style: preserve-3d` to simulate depth.

Mar 25, 2021

6:15 line chart

A line chart displays temperature readings over a week-long period, with each hour marked as a point along a smooth, naturally curved line. Data about San Francisco temperatures is loaded from a CSV file using D3's `csv` utility. React manages the asynchronous data loading via hooks, while D3's `scaleTime` and `scaleLinear` map the timestamp and temperature values to SVG coordinates. The chart renders axes, labels, and the data line with circles as SVG elements, using `d3.line` with `curveNatural` for the path and `d3.timeFormat` for the weekday tick labels.

Mar 4, 2021

2. 0:00 choropleth map

This choropleth map visualizes the share of population infected with HIV across countries for the year 2017, using a yellow-orange-red sequential color scale (d3.scaleSequential with interpolateYlOrRd) to represent prevalence percentages. The map renders geographic country boundaries using d3.geoNaturalEarth1 projection and d3.geoPath, with graticules and interiors drawn as SVG paths. Countries without data appear gray. The React app loads CSV data on HIV prevalence and ISO country codes, joins them via d3.csv and Map lookups, and uses a topojson world atlas for the country shapes.

10:32 brushing

A choropleth-style bubble map of global migration incidents is linked to a brushed date histogram. The map displays circles sized by the total number of dead and missing people, with colors assigned per country. Brushing the histogram filters the map’s circles to show only data within the selected date range. The visualization uses React for state management, d3.scaleSqrt for sizing, d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.brushX for the histogram brush, and data from the Missing Migrants Project.

9:58 map + bin

This example combines a proportional-symbol world map with a time-series histogram of monthly totals for dead and missing migrants, sourced from a CSV of global incident records. The map projects each incident’s coordinates using `d3.geoNaturalEarth1` and sizes red circles via `d3.scaleSqrt`, with country polygons colored by a random hue from `d3.hsl`. The lower panel uses `d3.scaleTime` and `d3.histogram` (with `d3.timeMonths` thresholds) to bin incidents by reported date, then renders the counts as SVG rectangles; axes and ticks are built with React components using `d3.scaleLinear` and `d3.timeFormat`.

9:18 missing migrants

This visualization shows the total number of dead and missing migrants reported over time, aggregated into monthly bins. The bar chart uses `d3.bin` and `d3.timeMonths` to group data from a CSV file containing CSS named colors, with `d3.scaleTime` and `d3.scaleLinear` mapping dates and counts. React manages state, while SVG renders the axes and bars, with tooltips via `<title>` elements.

9:48 missing migrants on a map

This visualization maps missing migrant incidents worldwide, using red circles sized by the total number of dead and missing per location. Countries appear in randomly assigned hues, with graticules and interior borders rendered via d3.geoPath and geoNaturalEarth1 projection. The React app loads CSV data and world-atlas TopoJSON, computing a square-root scale for circle radii. SVG circles are positioned by projecting each incident’s coordinates, while CSS opacity and fill styling distinguish the overlays from the base map.

8:46 map with points

A world map rendered with D3's geoNaturalEarth1 projection displays cities as scaled circles representing population, with each country filled by a random hue derived from a preset green. The visualization uses d3.geoPath for geographic shapes, d3.geoGraticule for grid lines, and d3.scaleSqrt for circle sizing based on city population data loaded via d3.csv. React manages state and renders SVG elements, while topojson feature and mesh APIs extract country boundaries and interior borders from the world-atlas dataset.

8:29 interactive legend

This interactive scatterplot lets users explore the Iris flower dataset by changing the X and Y axes through dropdowns. Hovering over the color legend fades out all data points except those of the selected species, and the legend itself highlights the hovered category. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv to load the data, rendering circles as SVG marks.

Mar 2, 2021

8:14 Scatter Plot + legend

This interactive scatter plot visualizes the Iris flower dataset, with dropdown menus to select which measurements appear on the x and y axes. A color legend distinguishes the three plant species. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for colors, and D3’s `csv` loader to fetch and parse the data. SVG circles with tooltips render each data point, while custom React components handle the axes and legend.

Mar 2, 2021

7:28 Scatter Plot with menus

This visualization displays the classic Iris flower dataset as an interactive scatter plot, enabling exploration of relationships between sepal and petal measurements. Users can dynamically select which attribute appears on each axis via two dropdown menus. The plot uses D3 scales and axes, with points colored by species. Built with React and D3 v5, it renders as an SVG, loading the CSV data asynchronously and using React state to update the visualization upon selection changes.

Mar 2, 2021

6:46 world map

This visualization displays a world map where each country is filled with a random hue derived from a preset green color using D3’s HSL color manipulation. The map is rendered with the Natural Earth projection via `d3.geoPath`, and includes graticules, a sphere outline, and country interiors in white. The code loads GeoJSON topology from the World Atlas, processes it with `topojson.feature` and `topojson.mesh`, and uses React state to manage the asynchronous data fetch.

5:53 Scatter Plot

This scatter plot displays the relationship between sepal length and sepal width in the classic Iris dataset, loaded via a CSV URL using D3's `csv` utility. The visualization is built with React, using SVG rendering and D3’s `scaleLinear` with `.nice()` to compute axis ranges. Each point is an SVG circle with a hover tooltip showing the x-value, formatted with D3’s `format` function. The axes are generated by custom React components, `AxisBottom` and `AxisLeft`, which map ticks and labels using the scales.

5:29 styling

This example displays a horizontal bar chart ranking the populations of ten countries using data from a UN Population CSV file. React hooks manage the data-fetching state, while D3’s `scaleBand` and `scaleLinear` map country names and population values to SVG rectangles rendered inside a React component. The visualization includes styled axes with formatted tick labels (using D3’s `format`), a labeled x-axis, and a tooltip on each bar via the SVG `<title>` element, all styled with the Poppins font.

5:17 refactoring

This example shows a horizontal bar chart of population data for the top 10 countries, sourced from the United Nations’ 2019 population estimates. The visualization uses React to render SVG elements, with D3 utilities such as `scaleBand`, `scaleLinear`, and `csv` for data loading and scaling. The y-axis labels are positioned using the band scale’s bandwidth, while the bars are drawn as rectangular marks whose widths derive from the linear population scale.

5:03 axies

This chart displays the ten most populous countries in 2020 as horizontal bars, using a linear scale to encode population size on the x-axis and a band scale for country names on the y-axis. The React-driven interface loads the UN Population 2019 CSV via D3’s `csv` utility, then renders an SVG with gridlines, tick labels, and colored rectangles. Both `scaleBand` and `scaleLinear` from d3 are used for positioning, while React’s `useState` and `useEffect` manage the asynchronous data loading and component updates.

4:45 bar chart

This bar chart displays the top 10 countries by projected 2020 population, with horizontal bars sorted by country name. React manages the asynchronous data loading via `useState` and `useEffect`, while D3 utilities `csv`, `scaleBand`, and `scaleLinear` handle parsing and scaling. The chart renders as SVG rectangles, with the data sourced from a UN population CSV fetched from GitHub, and shows a loading state until the data arrives.

Fork of Loading Data with React & D3

This visualization displays a pie chart of CSS named colors, rendered as an SVG. It loads color data from a CSV file using `d3.csv` and manages the asynchronous loading state with React's `useState` and `useEffect` hooks. The chart is drawn using `d3.pie` and `d3.arc` to compute path geometries, with each slice filled by the color's hex value from the dataset.

Fork of Vega-Lite API Template

This line chart tracks the monthly popularity of JavaScript, C#, and TypeScript from 2004 to 2021. The visualization uses Vega-Lite's grammar of graphics through the `vega-lite-api` library, encoding time on the x-axis, count on the y-axis, and technology as a color-coded series. Data is loaded from a local CSV string using `d3.csvParse`. The chart is rendered as an SVG with a custom dark color scheme for axis labels and titles, configured through Vega-Lite's configuration API. Tooltips are enabled via the `vega-tooltip` Handler.

Feb 27, 2021