rkdunn

@rkdunn·3 public vizzes

Shapes with SVG and CSS

This example uses D3.js to build a smiling face entirely from SVG shapes—circles, rectangles, and an arc path—with animated eyebrows. The SVG canvas is selected directly, and D3’s `transition()` and `duration()` methods move the eyebrow group up and down in a looping motion. The page also includes static SVG circles and rectangles with CSS-defined fills to demonstrate basic shape styling. Rendering relies on SVG elements created via D3 selections, with the face centered using width and height attributes from the SVG element.

Jan 2, 2020

Loading thumbnail…

SANKEY Experiment

A Sankey diagram traces student enrollment flows from Del Val Charter in the 2014-15 school year to various destinations in the following year, including other schools, graduation, or unknown outcomes. The visualization uses D3 v5 with the sankey plugin to render SVG nodes and curved links, whose thickness scales with student counts. Nodes are color-coded by school name and draggable, triggering a relayout that recalculates link paths. The data comes from a JSON file containing over sixty school names and their weighted connections.

Jan 2, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” in the center of a plain web page, with the font size set to an extremely large 13em. It serves as a minimal demonstration of a basic HTML document structure, including a `<head>` section with embedded CSS styling and a `<body>` containing the visible content. The page relies solely on standard HTML and CSS, with no external libraries or JavaScript, making it a bare-bones starting point for web development. The styling is applied globally to the body element, centering the text horizontally.

Dec 31, 2019