Eddie Musabula

@Picassoiam·4 public vizzes

Mr Musa's Face with D3.js

This example renders a stylized face with SVG shapes, featuring a yellow circle for the head, two black eyes of differing sizes, and a mouth drawn as an arc path. The code uses D3.js v5 selection methods like `select` and `append` to build the SVG, and the `arc` generator to define the mouth’s curved shape. Positioning relies on the SVG’s width and height attributes for centering, with hardcoded offsets for eye placement, producing a playful, geometric portrait.

May 9, 2020

Loading thumbnail…

Plotting Bar Chart

This example displays a single, centered block of text reading “Hello HTML” on a plain white background, making it a minimal demonstration of HTML and CSS rendering. The page uses inline styles to set the text alignment, font size, and overall layout, with no JavaScript or external libraries involved. The visualization is purely static, showing how basic web technologies can present content without additional frameworks or data processing. The code relies solely on standard HTML tags and CSS properties to achieve its visual output.

Feb 9, 2020

Loading thumbnail…

Cool Face

This example renders a smiling face using React and SVG, with the D3 shape API’s `arc()` function generating the mouth path. The face consists of a yellow circle with a black stroke for the head, two white eye circles positioned symmetrically, and a curved mouth created from an arc with inner and outer radii. All elements are centered via a translated group, and the layout uses hardcoded dimensions (960×500) without any data binding or interactive behavior.

Feb 4, 2020

Loading thumbnail…

HTML Starter

This example renders a static Smiley face SVG using React and D3.js. The code constructs a yellow circle with black stroke, two eyes, and a mouth arc generated using D3’s `arc()` function with specified inner/outer radii and start/end angles. It imports React, ReactDOM, and the D3 arc API, and uses React’s `render` method to draw the SVG into a root div. The layout is centered via a `transform` translate, and dimensions are fixed at 960 by 500.

Feb 4, 2020