Yuqi Tang

@Yukiyukiyeah·4 public vizzes

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows and a shifting mouth is drawn as SVG elements using D3.js v5. The code builds the face by appending circles, rectangles, and an arc path to a group, then applies chained `transition` calls with a 2000-millisecond duration to move the eyebrows upward and alter the mouth’s end angle. It uses D3’s `select`, `arc`, and attribute manipulation to demonstrate fundamental DOM updates and transitions without any data source.

Aug 7, 2021

Loading thumbnail…

Fork of D3.js Face

A cheerful cartoon face rendered in SVG uses D3.js v7 to draw concentric arcs and circles. The face includes a yellow head, two black eyes, rectangular eyebrows, and a mouth built with the `d3.arc` shape generator. The eyebrows animate vertically through chained `transition` calls, moving down and back up over two seconds each. The code imports `select` and `arc` from D3 and uses SVG attribute manipulation to position elements relative to the viewport center.

Aug 7, 2021

Loading thumbnail…

Fork of HTML Starter

This example renders a single yellow circle centered on an SVG canvas. The circle uses a fixed radius, a black stroke, and a yellow fill, with the canvas dimensions hardcoded at 960 by 500 pixels. The visualization is built with React and ReactDOM, using JSX to declare the SVG `<circle>` element, while the page itself loads React from a CDN in the HTML file.

Aug 7, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML” in a massive 13em font, centered on a plain white page, demonstrating a minimal HTML/CSS/JavaScript setup. It uses an inline `<style>` block for the visual styling and a `<script>` tag to log “Hello JavaScript” to the browser’s console. The code shows no data visualization, relying instead on basic DOM rendering and the browser’s native console API. It is a fork of the HTML starter, intended as a foundational template for further experiments.

Aug 7, 2021