GreenBreakers

@GreenBreakers·3 public vizzes

D3-1: Making a face

A smiling face is drawn using SVG shapes, with a yellow circle for the head, black circles for eyes, and a mouth created as an arc path. The example demonstrates basic SVG element creation and positioning through D3’s `select`, `append`, and `attr` methods, along with the `arc` generator to define the mouth’s shape. Coordinates are centered by translating a group element, and dimensions are read from the SVG attributes. The code uses D3 v5 and renders entirely in SVG.

Jan 9, 2023

Loading thumbnail…

HTML Cars Report

This example renders a simple HTML cars report with a static list of two vehicles and their prices. It uses D3’s `select` function to set the text of a message div, while a local ES6 module exports that message. The page links an external stylesheet for font styling and relies on D3 loaded via UNPKG. The data is hardcoded in the HTML rather than fetched or generated dynamically.

Jan 7, 2023

Loading thumbnail…

cars report

This example demonstrates the basic capabilities of VizHub by rendering a simple text message in the center of the page. It loads D3 v5 via UNPKG and uses the `select` function to target a `div` element with the ID `message`. The text content comes from a local ES6 module, `myMessage.js`, which exports a string constant. The code highlights how to import from D3 and from local modules, with styling applied through an external CSS file.

Jan 7, 2023