daigou65 (@daigou65), VizHub

Fork of HTML Starter

This example demonstrates the simplest possible D3.js usage: it appends a paragraph element to the page and sets its text to “Hi, Whats up?”. The code selects the body with `d3.select`, appends a `<p>` element, and populates it via `.text()`. It loads D3 v3 from a remote CDN and includes an empty CSS style block. The visualization is a minimal static HTML page, serving as a bare-bones starting point for more complex projects.

Nov 25, 2023

Loading thumbnail…

Java Script

This example demonstrates basic JavaScript array operations in a minimal HTML page. The code creates a range of numbers from 0 to 9 using a custom `range` function, logs each value to the console, and then filters for even numbers before sorting. It uses vanilla JavaScript with the `forEach` and `filter` array methods, plus `console.log` for output. The page includes CSS styling for a large centered message but displays no visual data, focusing instead on console-based programming fundamentals.

Nov 24, 2023

Loading thumbnail…

SVG Animation using CSS Transition

A single red rectangle with a black border animates smoothly when hovered, transitioning its fill color to green and expanding its stroke width over three seconds. This simple example demonstrates SVG animation achieved through CSS transitions, applied directly to the `rect` element using the `transition: all 3000ms` property. The page is a bare HTML document with embedded CSS and JavaScript, showcasing how CSS can drive SVG property changes without explicit JavaScript animation logic. The HTML includes a minimal SVG canvas of 960 by 500 pixels, with the rectangle's styling and hover state defined entirely in the stylesheet.

Nov 23, 2023

Loading thumbnail…

SVG with CSS Animation

This example demonstrates the interplay between HTML and CSS for rendering and animating text in a web browser. It presents a static HTML page with a large, centered message that uses CSS styling for visual formatting. The core functionality relies on the HTML `<div>` element for content structure and the CSS `font-size` and `text-align` properties for layout and appearance. Although the example references a React starter, this specific implementation uses plain HTML and CSS without JavaScript or additional animation libraries, showcasing a bare-minimum approach to web-based visualization.

Nov 23, 2023

Loading thumbnail…

SVG with CSS Animation

This example demonstrates the interplay between HTML and CSS for rendering and animating text in a web browser. It presents a static HTML page with a large, centered message that uses CSS styling for visual formatting. The core functionality relies on the HTML `<div>` element for content structure and the CSS `font-size` and `text-align` properties for layout and appearance. Although the example references a React starter, this specific implementation uses plain HTML and CSS without JavaScript or additional animation libraries, showcasing a bare-minimum approach to web-based visualization.

Nov 23, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes—a red circle, a yellow rectangle with a blue stroke, and a navy line—rendered directly in an HTML page using the SVG namespace. It shows how CSS styling and inline presentation attributes control the visual appearance of these elements. The second lesson builds on this by adding a CSS `transition` to a rectangle, so hover interactions animate the fill color and stroke width over three seconds. The code uses plain SVG markup with CSS rules, not a JavaScript library like D3 or React.

Nov 23, 2023