UGarCil

Let's make a face!

A bright yellow smiley face is drawn in SVG using D3 v5. The code selects an SVG element and builds the face by appending a circle for the head, two black circles for the eyes, and a path for the mouth. The mouth path is generated with the D3 `arc` generator, using an outer radius and angles to create a half-circle shape. The face is centered via a group transform, with eye spacing and vertical offsets applied to position the features.

Let's make a face with D3.js!

A smiling face built with D3.js animates its eyebrows in a looping vertical motion. The visualization demonstrates core SVG manipulation through D3 selections, appending circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. Chained `transition()` calls with 2000-millisecond durations continuously shift the eyebrow group’s transform attribute, creating the expressive movement against a 960×500 SVG canvas.

HTML Cars Report

This example displays a minimal HTML-based interface for a cars report, presenting a short list of model years (2012, 2013, and 2220) as plain text. It shows how the year “2012” is visually emphasized with blue styling while the others remain default-colored. The page relies on standard HTML for structure and a linked external stylesheet for presentation. The rendering approach uses the browser’s default document flow, with body text sized at 5em in a monospace font. No JavaScript libraries or advanced APIs are involved, as the visualization is purely static markup and CSS.

HTML Cars Report

This example renders a small set of primitive SVG shapes to demonstrate basic report-style graphics. A blue circle and rectangle are grouped together, while a separate line and a polyline path appear in blue with thick strokes. The visualization uses plain SVG markup with inline attributes and CSS classes, rendering shapes such as `<circle>`, `<rect>`, `<line>`, and `<path>` directly in the SVG element. The styling applies a monospace font and hidden overflow via an external stylesheet.

Shapes with SVG and CSS

This example shows a pair of basic SVG shapes—a red circle and a red-filled rectangle—positioned on a 960x500 canvas. The page renders these geometric primitives through the inline SVG markup within the HTML body, while a linked stylesheet (`styles.css`) applies global resets like zero margins and hidden overflow. The code uses the native SVG elements `circle` and `rect` with their `r`, `cx`, `cy`, `x`, `y`, `width`, `height`, and `fill` attributes, and includes a CSS class named `.highlighted` that colors text red. No JavaScript or external charting libraries are involved; the visualization relies solely on static SVG and CSS presentation.

Jul 22, 2020

Spiders

This example displays the first species name from a small embedded JSON array of spider taxa, rendering it as large text centered on the page via a React-free vanilla JavaScript setup. The code imports the parsed array from `SPI.js` using `JSON.parse`, selects the message element with `document.getElementById`, and assigns the text content. The page uses basic HTML and CSS for styling, with the bundled script `bundle.js` executed on load. The data source is a hardcoded list of three spider species names, and no external visualization libraries are used.

Jul 22, 2020

Hello World

This example displays the make of the first car in a dataset as a large HTML message. It imports car records from a `cars` module and uses JavaScript array methods to filter and format entries by price, though only the initial make is rendered. The visualization relies on a simple DOM text update via `document.getElementById` in a React-based starter project, with the data defined as a JSON string and parsed for use.

HTML Starter

This example displays the text “Hello HTML” centered on a blank page, with a font size of 13em defined via inline CSS. It serves as a minimal HTML page template, also loading a script that logs “Hello JavaScript!” to the browser’s developer console. The page uses no external libraries or frameworks, relying solely on native HTML, CSS, and JavaScript. It provides a starting point for simple web experiments, with the styling applied directly through the `<style>` tag and behavior in a basic `<script>` block.

HTML Starter

This example demonstrates a minimal HTML page that renders the text “Hello HTML” in large, centered type using inline CSS. It serves as a barebones starting point for web-based visualizations, with no external libraries or data sources. The page includes a script tag that logs “Hello JavaScript!” to the browser’s developer console, showcasing basic inline scripting alongside static HTML content. The styling uses the `body` element with `text-align: center` and a 13-em font size for visual impact.

Cars Report

This example demonstrates the core capabilities of VizHub through a minimal setup: a browser page rendered from an HTML file, an ES6 module, and D3.js. The code imports the `select` function from D3 and uses it to set the text content of a `#message` div, displaying the string exported from `myMessage.js`. Styling comes from an external Google Fonts import and a dark blue background with large light text. The visualization is static, conveying a simple messaging pattern rather than data-driven rendering, with the report title “Cars Report” in the HTML head.