chenxlong3

@chenxlong3·5 public vizzes

Fork of Smiley Face Part II

A fork of “Smiley Face Part II” renders a classic yellow smiley face that fills the browser window, scaling its size to the viewport dimensions. The face is drawn with React components and SVG primitives, using two separate `<circle>` elements for the eyes and a larger `<circle>` for the face outline. The code positions the face via a `<g>` transform, centering it on the screen, and computes the face radius and eye offsets from window inner height and width. Only the head and eyes appear; no mouth or other features are shown.

Sep 28, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG smiley face renders a yellow circle with two black-outlined eyes centered on a 960 by 500 canvas. The face is built directly in the HTML markup using numbered `<circle>` elements, with the head at position (480, 250) and eyes offset horizontally. The example accompanies a video tutorial on constructing faces step by step. While the page loads React and ReactDOM from CDN scripts, the current visualization uses plain SVG geometry without any React components or interactive behavior.

Sep 28, 2021

Loading thumbnail…

Fork of Hello VizHub

This example displays a single centered message, "Hello VizHub!", using D3’s `select` method to target a div by ID and set its text content. It demonstrates loading D3 v5 via UNPKG and importing a local ES6 module (`myMessage.js`) that exports a string constant. The page structure is defined in `index.html`, with styling from `styles.css` that centers the text and sets a large font size. The visualization highlights how to combine external library imports with modular JavaScript code in a D3-based project.

Sep 28, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3 v7 setup by rendering the text "Hello D3 version 6" directly in the browser. The page uses an HTML file that loads D3 from a CDN, while a bundled JavaScript file imports the `select` function from D3 to target the body element and set its text content. Although the title references version 6, the code explicitly uses d3.v7, and the body’s large font size makes the output visually prominent. No data or complex visual encodings are involved, focusing purely on initialization and DOM manipulation.

Sep 26, 2021

Loading thumbnail…

Fork of HTML Starter

This is a minimal HTML page demonstrating fundamental web technologies: CSS for styling and JavaScript for interactivity. The page displays the text "Hello HTML" in a large 13em font, centered on the screen. The embedded script logs "Hello JavaScript!" to the browser's console, showcasing basic client-side scripting. The example uses plain HTML, CSS, and JavaScript without any external libraries or frameworks, serving as a bare-bones template for web visualization projects.

Sep 26, 2021