arontha

@arontha·4 public vizzes

Face with D3.js

A smiling face is drawn as a yellow SVG circle with white outlines, featuring two black eyes that animate by moving down and up via chained `transition().duration()` calls. Built with D3.js v5, the example demonstrates basic SVG shape creation using `d3.select` and attribute assignment for circles, with a commented-out arc-based mouth showing an alternative path approach. The eyes use transform translations over three-second intervals, creating a simple blinking effect without external data.

Aug 18, 2019

Loading thumbnail…

SVG Shapes Dude

A simple, static SVG composition displays overlapping geometric shapes: a large red-stroked blue circle, two yellow rectangles, a red diagonal line, and a white triangular path with rounded joins. The visualization relies entirely on raw SVG elements—circle, rect, line, and path—with stroke and fill attributes set directly in the markup. The embedded CSS file only styles a text class and is unused for the shapes. No JavaScript or data is involved; the rendering approach is purely declarative SVG within an HTML page.

Aug 18, 2019

Loading thumbnail…

Cars Report

This example displays a simple text-based report of used cars, listing each vehicle’s year, make, model, and price in a large preformatted element. It demonstrates basic JavaScript module usage with ES6 `export` and `import` syntax, though the author notes difficulty getting exports to work. The report filters a hardcoded JSON array of five car objects to include only those under a specified price threshold, then formats each entry using a destructuring template literal. The page runs entirely client-side, rendering output by setting `textContent` on a DOM element.

Aug 18, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates the fundamental capability of VizHub: a web page that displays a simple text message using D3.js version 5. The visualization shows a large, centered "Hello VizHub" text in a dark blue background with a custom Ubuntu typeface, loaded via Google Fonts. The code uses D3’s `select` function to target the `#message` div and set its text content, which is imported from a local module named `myMessage.js`. The styling is handled entirely through an external `styles.css` file, defining the background color, text color, alignment, and font size.

Aug 18, 2019