Kwadwo 'Que' Amankwa

@citisolo·7 public vizzes

Let's make a face

A yellow circle forms a face with two black eyes and a wide arc-based mouth, all rendered as SVG elements. The example demonstrates basic D3.js v5 selection and shape generation, using `d3.select` to append circles and set positional attributes, and `d3.arc` to create a mouth path from inner and outer radii plus start and end angles. All geometry is computed from the SVG’s width and height attributes, with no external data.

Sep 25, 2019

Loading thumbnail…

Let's make a face

This example demonstrates a playful construction of a face using SVG shapes, built with D3 v5. The visualization uses a blank SVG canvas and dynamically assembles facial features such as eyes, nose, and mouth. It leverages D3’s selection and manipulation methods to position elements based on simple coordinate logic. The rendered output is a static, stylized face generated entirely through code, with styling handled by an external CSS file using the Ubuntu font.

Sep 21, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how to create a simple text-based visualization using D3.js v5 and ES6 modules within the VizHub environment. It renders the message “Hello VizHub!” in large, centered Ubuntu font on a dark blue background by leveraging D3’s `select` function to set the text content of a `#message` div. The page imports a local ES6 module for the message string and applies styling from an external stylesheet with CSS variables. The visualization updates the DOM directly without data binding or scales, serving as a minimal foundation for exploring interactive charts.

Sep 21, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering using HTML markup and CSS styling, producing circles, rectangles, lines, and paths within a single SVG canvas. The code combines inline attribute styling with stylesheet rules, including a transformed group that shifts shapes and applies a grouped stroke effect using the `lines` class. It uses standard SVG elements (`circle`, `rect`, `line`, `path`) with `transform` and `stroke` attributes, while CSS handles font import and global layout. The visualization is static, showing how SVG primitives combine with CSS for customizable visual output.

Sep 21, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub can render a simple text message using D3 v5 and an ES6 module. It shows a large, styled greeting centered on a dark blue background, with the text imported from a separate module and appended to the DOM via `d3.select`. The visualization uses the Ubuntu font from Google Fonts and applies CSS for layout and color. It serves as a minimal template for setting up projects in the VizHub environment.

Sep 21, 2019

Loading thumbnail…

Hello VizHub

This example displays a static greeting message, "hi," centered on a dark blue background using large Ubuntu typography. The visualization serves as a minimal demonstration of VizHub's project structure, with the message imported from a separate JavaScript module and rendered into an HTML `<pre>` element. It includes a hardcoded JSON array of used car listings, though the code does not currently visualize this data. The implementation relies on standard JavaScript module imports and DOM manipulation via `document.getElementById` rather than any external charting libraries.

Sep 21, 2019

Loading thumbnail…

D3 Tutorial

This example demonstrates a minimal D3.js setup, rendering the text “Hello VizHub!” centered on a dark blue page with large, styled typography. It imports the `select` function from D3 to set the text content of a `div` element, while a separate ES6 module exports the message string. The page’s appearance is controlled entirely through CSS, including a custom Ubuntu font loaded from Google Fonts. The visualization serves as an introductory template for using D3 with modular JavaScript and external styles.

Sep 21, 2019