MarcusABR

@MarcusABR·3 public vizzes

D3

A smiling face built from modular React components draws on D3 for one curved path. BackgroundCircle, Eyes, and Mouth each render SVG primitives, with Mouth using D3's arc generator to create a smile between computed angles. The example demonstrates splitting UI elements into separate ES6 files while composing them with React fragments. D3 v5, React 16.9, and ReactDOM render the static scene at 960 by 500 pixels.

Nov 4, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a minimalist bar chart with no axes, using horizontal bars whose lengths encode population values. Built with React and D3 v5, the code loads UN World Population Prospects 2019 data via `d3.csv`, then constructs scales with `scaleBand` and `scaleLinear` to map countries and populations to SVG rectangles. The chart renders purely through React state management and JSX, with each bar’s width derived from the population maximum.

Nov 2, 2022

Loading thumbnail…

Fork of Hello HTML

This example shows a single static SVG face composed of three circles: a large yellow circle for the head and two smaller black circles for eyes. The rendering uses plain SVG elements embedded directly in an HTML page, with no JavaScript libraries or data sources involved. The code relies on the SVG `circle` element and basic CSS styling to set the yellow fill and black stroke, while the body margin is removed to avoid scrollbars. It is a minimal illustration of how to draw simple shapes with SVG in a web document.

Nov 1, 2022