BJorgen

@BJorgen·4 public vizzes

Fork of Vega-Lite API Template

This visualization maps the location and capacity of Mexico’s power plants as an interactive scatter plot, using longitude and latitude for the axes while encoding capacity as point size and primary fuel type as color. It loads data from the World Resources Institute’s global power plant database via D3’s CSV parser. Built with the Vega-Lite API, the chart renders through Vega’s SVG view with custom axis and label styling from a shared config, and includes a tooltip showing each plant’s name.

Mar 9, 2021

Loading thumbnail…

Faces

A grid of 2,000 randomly generated smiley faces renders as SVG, with each face’s eye offset, eye radius, and mouth shape varying unpredictably. The React components (Face, Eyes, Mouth, FaceContainer) compose the visual, while d3’s `range` generates the face count and d3’s `arc` draws the mouth path. The background circle, eyes, and mouth are positioned relative to a centered coordinate system, with the SVG width and height matching the face size.

Mar 1, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-screen SVG canvas. The React component uses the `useState` hook to track the mouse's `clientX` and `clientY` coordinates, updating on every `onMouseMove` event. It renders a single `<circle>` element with its `cx` and `cy` attributes set to the current mouse position.

Mar 1, 2021

Loading thumbnail…

Fork of Hello HTML

This example showcases a minimal SVG drawing of a smiley face, composed of a large yellow circle with two smaller black circles for eyes. The code relies entirely on the HTML5 `<svg>` element and its associated shape tags, such as `<circle>`, to define the graphic. The page uses an inline `<style>` block to remove margins and hide overflow, ensuring the visualization fills the viewport without scrollbars. The rendering approach is direct SVG markup, with no JavaScript libraries like D3 or external data sources involved.

Feb 28, 2021