BELLOUCH EL HASSAN

@Dracarysthemall·4 public vizzes

Fork of Rendering Data with React & D3

This example shows a radial burst of every named CSS color, with each wedge rendered as a slice of a pie chart. It loads color data from a CSV file using `d3.csv`, then uses React hooks (`useState`, `useEffect`) to manage the asynchronous data fetch and render the SVG paths. D3’s `pie()` generator computes the angles, while `arc().innerRadius(0).outerRadius(width)` creates the full-radius wedges, with each path’s fill set to its corresponding hex value.

Sep 7, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A full-window smiley face rendered as a scalable vector graphic, with a yellow circular head, black outline, and two eyes, all centered dynamically to the viewport. The face is built using React components that define SVG circles, with positions derived from window dimensions and fixed offsets for the eyes. React 16.9 is loaded via a CDN and renders the SVG onto a root div, while the style hides scrollbars for a clean, immersive display.

Sep 4, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with a black outline forms the head of a simple face, accompanied by two smaller black circles positioned as eyes on an SVG canvas. The example uses raw SVG elements—`<circle>` tags with explicit `cx`, `cy`, and `r` attributes—to construct the static facial features. No JavaScript libraries or interaction are involved; rendering is purely declarative markup within an HTML document. The face lacks a mouth, suggesting an incomplete or in-progress design.

Sep 4, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face rendered with three circles: a large yellow head and two smaller black eyes. The SVG is drawn with fixed coordinates and hardcoded stroke and fill values, using React and JSX for markup. The code directly places a 960x500 SVG element, positioning the face and eyes with absolute pixel values, and sets the body margin to zero to hide overflow. It is a minimal, static visualization that demonstrates basic SVG circle rendering without any interactive or animated behavior.

Sep 4, 2021