ccocco1

@ccocco1·5 public vizzes

Let's make a face with D3.js

A simple D3.js example draws a cartoon face using SVG shapes. The code selects an SVG element and appends a yellow circle for the face, two black circles for eyes, and a path for the mouth. The mouth uses `d3.arc()` to generate a partial ring based on specified inner and outer radii and start and end angles. The example demonstrates importing `select` and `arc` from the d3 module and loading D3 v7 via UNPKG.

Aug 23, 2022

Loading thumbnail…

HTML Cars Report

This example demonstrates a stylized HTML report listing two used vehicles with prices, displayed as a static page with oversized monospace text. It shows how VizHub loads D3 through UNPKG, uses an ES6 `import` statement to access the `select` function from D3, and additionally imports a local ES6 module to inject a “Hello VizHub!” message into a separate div. The page structure relies on plain HTML elements, while CSS styling sets the font size and family. The code does not include interactive or data-driven behavior beyond these imports and static content.

Aug 23, 2022

Loading thumbnail…

Cars Report

This example displays the static text "hi" in a large HTML `<pre>` element. It imports a hard-coded JSON array of used cars—each with a year, make, model, and price—from `cars.js` using a JavaScript `export`, but that data is not rendered. The app runs in React with a standard `index.html` loading a `bundle.js` built by the framework; it relies solely on `document.getElementById` and `textContent` to update the message.

Aug 20, 2022

Loading thumbnail…

Smily emoji

A smiling emoji face rendered as a static SVG image, composed of a large yellow circle for the face and two smaller black circles for the eyes, all with thick black outlines. The example demonstrates a minimal React setup in a single HTML file, loading React via a CDN script tag and logging the React object to the console. The SVG elements are drawn directly in the markup without using React components or any data-driven visualization techniques.

Aug 18, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page displaying the text “Hello HTML!” centered with a large font size. It demonstrates the basic structure of an HTML document using a `<style>` block for CSS styling and a `<div>` element for content. No external libraries or JavaScript APIs are used—only native HTML and CSS. The page serves as a bare-bones starter template for a visualization gallery.

Aug 18, 2022