jexchan

@jexchan·3 public vizzes

D3 Selection Exploration

This example demonstrates D3 selections with animated circles that move sinusoidally across the screen. Using the `d3.interval` timer, it updates an SVG `circle` element per frame, binding data with `.data()` and a key function, then applying `.join('circle')` to handle enter, update, and exit states efficiently. The code relies on D3 v7’s `select` and `range` utilities, rendering to SVG with `attr` calls for position and radius.

Aug 26, 2022

Loading thumbnail…

JavaScript Exercise

This example demonstrates basic JavaScript array manipulation with console output, displaying results for range generation, summation via reduce, and filtering even numbers. The page renders a large “Hello HTML!” message using CSS styling with a 13em font size. The code defines a custom `range` function that creates an array of sequential integers, then applies `Array.prototype.reduce` and `Array.prototype.filter` to compute a sum and extract even values. The HTML structure uses a single div element with a message class, combining static markup with dynamic script execution in the browser console.

Aug 18, 2022

Loading thumbnail…

Untitled

This example demonstrates basic SVG shape construction on a static HTML page, combining a diagonal line, a rounded rectangle, and a vibrant green circle within a translated group. The visualization labels the shapes as "Rectangle" and "Circle" using monospaced text, while a larger title announces "d3.js 学习 Day01" (D3.js Learning Day 01). The code relies on raw SVG elements—`line`, `rect`, `circle`, `g`, and `text`—styled with inline CSS and attributes like `transform`, `fill`, and `stroke`. No JavaScript libraries are imported; it is a pure HTML/CSS/SVG composition.

Aug 9, 2022