Cloron (@Cloron), VizHub

My test page

This example demonstrates a simple static web page built with vanilla HTML, CSS, and JavaScript, displaying a Firefox logo alongside introductory text about Mozilla. The page uses the Google Fonts 'Open Sans' typeface via a linked stylesheet, with styling that includes a blue background, an orange body container, and a shadowed heading. The JavaScript creates a new paragraph element and appends it to the body using `document.createElement` and `appendChild`, while also updating the heading's text content via `textContent`. No external data or visualization libraries are used; the focus is on basic DOM manipulation and page structure.

Mar 28, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a cartoon face in an SVG canvas. The face is composed of a yellow circle for the head, two black ellipses for eyes, and a black path for the mouth with rounded line joins. The code builds the graphic by appending SVG shapes to the root element, using method chaining to set attributes like radii, coordinates, and stroke properties in a concise, procedural manner.

Mar 21, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes styled with CSS, including circles, rectangles, lines, and a path. The SVG scene uses nested `<g>` groups with `transform` attributes for positioning and scaling, while a separate `styles.css` file defines the path’s stroke and line join properties. The React framework structures the markup, and rendering relies on SVG’s native elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`. The code shows static shapes without data binding or interaction.

Mar 21, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes styled with CSS, including circles, rectangles, lines, and a path. The SVG scene uses nested `<g>` groups with `transform` attributes for positioning and scaling, while a separate `styles.css` file defines the path’s stroke and line join properties. The React framework structures the markup, and rendering relies on SVG’s native elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`. The code shows static shapes without data binding or interaction.

Mar 21, 2020