bilalaamer

@bilalaamer·4 public vizzes

D3.js

This example uses SVG and D3.js v5 to render a simple face composed of a yellow circle, two black eye circles, and a mouth drawn with an arc path. The circle is centered using a translated group element, while the eyes are positioned relative to the SVG’s width and height. The mouth is generated with D3’s `arc()` helper, specifying inner and outer radii and start and end angles. The code relies on d3-selection and d3-shape APIs, with data-driven attributes set explicitly rather than bound to a dataset.

Mar 25, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates a simple, abstract visualization: a single large circle drawn on a blank SVG canvas, intended to serve as the initial step in constructing a face. The code uses the D3.js library, specifically the `select` and `append` methods, to create and style the circle with an `r` attribute of 200. The visualization is rendered using SVG within an HTML page, with global CSS applied to hide scrollbars and eliminate page margins. The overall effect is a minimal and clean starting point for a more complex graphical composition.

Mar 25, 2020

Loading thumbnail…

Let's make a face

This example demonstrates how to build a face using the React library. It displays a large, centered text reading “Hello HTML” as a placeholder for facial features. The code is rendered through a simple HTML page styled with CSS, using body text alignment and font sizing. The implementation relies on React’s component structure to organize the visual output. The example serves as a minimal starting point for creating interactive graphical elements with React.

Mar 25, 2020

Loading thumbnail…

HTML Starter

This example displays the text "Hello HTML" centered on a white page at an oversized font size of 13em, demonstrating the minimal structure required for a web page. It uses plain HTML with an embedded `<style>` block and no external libraries or JavaScript. The body’s `text-align` property and `font-size` are set via CSS to achieve the visual effect. This serves as a bare-bones starter template, contrasting with the React-based version referenced in the README.

Mar 25, 2020