Alec Burch

@alecburch·3 public vizzes

Monoliths on a Globe

This visualization displays three monolith locations—Utah, Romania, and California—as red circles on an interactive orthographic globe, with circle size and tooltip (via d3-tip) representing population. Users drag to rotate the globe using d3.drag and zoom with d3.zoom, which adjust the d3.geoOrthographic projection. The code renders country boundaries with d3.geoPath from TopoJSON world-atlas data, switching between 110m and 50m resolutions during interaction for performance. Data comes from a local CSV file.

Dec 4, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled using Cascading Style Sheets (CSS). It shows circles and rectangles with varying fill properties, some defined directly as attributes and others through CSS classes, alongside lines and paths with stroke settings. The Scalable Vector Graphics (SVG) markup uses grouping and transform elements to organize and position the shapes. The accompanying CSS stylesheet applies stroke width, colors, and line join and cap styles to the line elements and path.

Jun 5, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn onto an SVG canvas using D3 selections, with circles for the eyes, rectangles for the eyebrows, and a D3 arc generator for the mouth. The eyebrows rise and lower via chained `transition` calls that animate the `transform` attribute over two seconds each. The example demonstrates fundamental DOM manipulation with `d3.select` and `append`, plus D3 v5’s modular imports for `select` and `arc`.

Jun 3, 2019