Tobbiedev

@Tobbiedev·3 public vizzes

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, labels, or other visual encodings beyond the raw rectangle widths. It uses React with hooks (`useState`, `useEffect`) to fetch and load data from the United Nations World Population Prospects 2019 CSV, then renders SVG `<rect>` elements via `d3.scaleBand` for vertical positioning and `d3.scaleLinear` for bar widths. The chart omits all chart furniture, making the bars float against a blank background.

Jun 8, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG graphic, centered within the viewport. The face consists of three main shapes: a yellow circle for the head, two small black circles for the eyes, and a curved mouth created using an arc path. The code uses React to define the component structure and D3’s `arc()` function to generate the mouth’s path geometry, with all coordinates calculated relative to the center point. The SVG circles and path are styled with a thick black stroke and yellow fill.

Jun 4, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a responsive smiley face rendered as an interactive SVG graphic. The face scales to the browser window, with a yellow circle for the head, two black eyes, and a centered placement based on window dimensions. Using React and ReactDOM, the code defines constant values for eye offset, radius, and stroke width, then constructs SVG circle elements within a transformed group. The visualization adapts to its container, with all geometry derived from the viewport size.

Jun 4, 2021