FloridaPlates (@FloridaPlates), VizHub

Let's make a face

A yellow circle face with black-outlined eyes, rectangular eyebrows, and an arc-shaped mouth is drawn using D3 v5 selections and SVG primitives. The visualization centers the face within an SVG canvas using a translated group, positioning features relative to shared constants for spacing and offsets. The mouth is generated with the `d3.arc` path generator, configured with inner and outer radii and explicit start and end angles. All shapes are appended directly to the SVG via D3's `select` and `append` methods, with no external data source beyond the hardcoded dimensions.

Oct 11, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates the basic setup of a VizHub visualization, showing a blank SVG canvas with a red background rendered using D3 v5. The code imports the D3 library via CDN and selects the SVG element using `d3.select` to apply styling. It also includes an ES6 module (`myMessage.js`) exporting a string, though the message is not displayed in the visualization. The page styling comes from an external CSS file that imports the Ubuntu font.

Oct 11, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates the basic setup of a VizHub visualization, showing a blank SVG canvas with a red background rendered using D3 v5. The code imports the D3 library via CDN and selects the SVG element using `d3.select` to apply styling. It also includes an ES6 module (`myMessage.js`) exporting a string, though the message is not displayed in the visualization. The page styling comes from an external CSS file that imports the Ubuntu font.

Oct 11, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates the simplest form of a VizHub visualization: a static, screen-centered message. It uses the D3.js library’s `select` function to target the HTML `#message` div and set its text to the string "Hello VizHub!", which is defined in a separate ES6 module (`myMessage.js`). The page’s styling, including a large Ubuntu font and dark blue background, is applied via an external CSS file. The visualization has no data source, as it simply showcases the minimal setup of an interactive web-based coding environment.

Oct 10, 2019