yann-toullec

@yann-toullec·3 public vizzes

HTML Starter

This example displays a minimal web page with the text “Hello HTML” centered on a white background. The page uses a plain HTML document with a CSS style block that sets the body’s text alignment and font size. A JavaScript script tag logs the message “Hello JavaScript!” to the browser’s console. The example demonstrates the basic structure of an HTML page, including the document type declaration, head, and body sections, without relying on any external libraries or frameworks.

Oct 20, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic SVG shapes—circles, rectangles, lines, and paths—using React and SVG elements within a simple HTML page. It shows how CSS classes control stroke styling, while SVG attributes like `fill` and `stroke-width` set individual shape colors directly. The visualization also uses `<g>` groups to apply shared styling and transformations, such as translating shapes and applying a uniform fill and stroke. The code relies on standard SVG APIs and CSS, with no external JavaScript libraries beyond React for rendering.

Oct 19, 2020

Loading thumbnail…

Cars Report

The Cars Report example displays the first car’s make from a small inline JSON dataset. It uses D3, loaded via UNPKG, to parse the data, and demonstrates local ES6 module imports. The visualization renders the string "Honda" in a large `<pre>` element, showing a minimal data-to-text pipeline. It also includes a separate `myMessage.js` module, though the main output does not use it.

Oct 14, 2020