jabowen2020@gmail.com

@Butchito·6 public vizzes

Population by Language

This animated visualization compares the global distribution of languages by total and native speakers. It displays a static ranking of languages with their speaker counts, using colored circles and text labels to represent each language. The visualization is built with D3 v7, rendering into an SVG container. The code references data for languages such as English, Mandarin Chinese, and Hindi, with the potential for interactive zoom, though zoom functionality is noted as currently broken.

Mar 9, 2024

Loading thumbnail…

World city population

This visualization displays a world map with dots representing cities, sized by population. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with landmasses, graticules, and country borders rendered as SVG paths from TopoJSON data. City coordinates are projected using the same projection function, and each city is drawn as a small semi-transparent circle. The data comes from a CSV file loaded with `d3.csv` in React, and the visualization is built with React components, D3 v5, and SVG, styled with a clean, minimalist aesthetic.

Feb 28, 2024

Loading thumbnail…

Scatter Fun

This scatter plot displays the Iris dataset, mapping sepal length and sepal width onto a full-window SVG canvas. Each flower is rendered as a circle with a fixed radius of five pixels. The visualization loads the data from a remote CSV file using `d3.csv` and parses numeric fields. It applies `d3.scaleLinear` to compute the x and y scales, and `d3.axisLeft` and `d3.axisBottom` to draw the corresponding axes. The plot fills the entire viewport, with margins applied for axis placement.

Feb 19, 2024

Loading thumbnail…

bad imitation of snow

Thirty-three grey circles ripple across an SVG canvas, their vertical positions driven by a tangent function that shifts with an incrementing time variable. Each frame updates the circle positions and radii using D3’s data join and selection methods. The animation runs at 60 frames per second via `setInterval`, calling `vizData` to bind and update the circles. The code demonstrates dynamic visual feedback from mathematical functions, with the `makeData` generator producing coordinates and radii from trigonometric expressions.

Feb 16, 2024

Loading thumbnail…

Ep 5 Trial

This example visualizes a dynamic field of 33 asterisk-shaped symbols that drift vertically in a sine-wave pattern across the screen. The view continuously animates as each glyph’s position and radius change over time, creating a shifting constellation effect. The visualization is built with the D3.js library (version 6.6.2), using the `select` and `selectAll` APIs to manage SVG text elements. Data is generated procedurally in `makeData.js` using D3’s `range` and `scaleLinear`, while `vizData.js` employs `symbol` and `symbolAsterisk` to render the glyphs. The animation updates at 60 frames per second via `setInterval`.

Feb 16, 2024

Loading thumbnail…

Animated Clock

A stylized clock face displays twelve tan, rounded arc segments for the hour positions, with black hour and minute hands rotating continuously. The animation uses SVG `animateTransform` elements to rotate the hands at different speeds, completing a full revolution every 60 seconds for the minute hand and every 720 seconds for the hour hand. D3.js version 6.6.2 generates the arc paths and labels using the `d3.arc()` generator with `centroid()` positioning, while the white tick marks are static SVG lines rotated around the center.

Feb 16, 2024