Baffling Science

@bafflingscience·3 public vizzes

Customizing Axis Fork

A horizontal bar chart displays population data for seven countries, ranked from most to least populous. The visualization highlights the dramatic difference between China and India and smaller nations like Serbia, using a stark black-and-lime aesthetic with a hot pink title. Built with D3 v6 in SVG, the code uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for positioning, and custom axis formatting via `axisBottom` and `format('.3s')` to abbreviate values. The chart removes default axis domains and gridlines, replacing them with custom ticks and labels styled through external CSS.

Apr 3, 2021

Loading thumbnail…

Fork of SVG Fundamentals

A fork of an SVG fundamentals demo shows a playful composition of overlapping eyes and nested rectangles rendered with basic SVG shapes. The left eye features concentric circles in black, hot pink, white, and lime, while the right eye layers hot pink, black, white, and tomato circles of varying radii. Three squares—black, lime, and white—stack with thick colored strokes on the right side. The code directly uses inline SVG elements—circle, rect, and stroke attributes—within an HTML page, with no external JavaScript libraries.

Apr 3, 2021

Loading thumbnail…

Fork: SVG Fundamentals

This example presents a minimalist animated landscape of rolling hills beneath a glowing sun. It demonstrates the use of raw SVG elements—including `<rect>`, `<circle>`, and `<path>`—to construct the scene. Gradients defined within `<defs>` create the sky and terrain coloring. The animation relies on SMIL `<animate>` tags to cycle the sun's position and smoothly shift gradient stop colors between palettes, suggesting a slow transition from day to night.

Apr 3, 2021