Xavier Bost

@bostxavier·3 public vizzes

Fork of D3 Starter

This example demonstrates a simple animated smiley face built with D3 v6 and rendered as SVG. It shows how to structure a basic D3 project using ES6 imports and a separate bundle file, with the page loading from an HTML shell and stylesheet. The visualization uses `d3.select` and `d3.arc` to construct the face, eyes, and a mouth, while a chained `transition().duration()` animates the left eyebrow rising and falling. The fixed SVG canvas is 960 by 500 pixels, and all elements are positioned via explicit width and height attributes.

Mar 15, 2021

Loading thumbnail…

Tests

This example demonstrates basic SVG shapes rendered on an HTML page using CSS and JavaScript. It shows a circle, a rectangle with a red fill and black stroke, and a group containing a line and a path, all displayed within an SVG element of 960 by 500 pixels. The code uses plain SVG APIs for drawing and CSS for styling, with the `.lines` class applying stroke properties to the line and path. The page loads from `index.html` with linked `styles.css`, providing a minimal setup for testing SVG rendering without any external libraries.

Mar 13, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page that renders the text “Hello HTML” in the center of the browser window using CSS styling. The JavaScript logs “Hello JavaScript!” to the browser’s developer console, demonstrating basic scripting. The code uses plain HTML, CSS, and JavaScript with no external libraries, and the rendering approach relies solely on the browser’s default document flow and the `console.log` API for output.

Mar 12, 2021