M Abdul Rokhim

@mabdulrokhim·2 public vizzes

Fork of React Starter

This example shows a yellow smiley face drawn with React and SVG, centered on a 960×500 canvas. The face consists of a yellow circle with a black stroke, two offset eyes, and a mouth created using the `d3.arc` API with specified inner and outer radii and angle ranges. The code uses React 16.13.1 and ReactDOM to render the SVG elements, while D3 v7 provides the arc path generator. All shapes are positioned using a translated coordinate system, with no external data source; the visualization is purely programmatic.

Oct 8, 2022

Loading thumbnail…

Data Visualization with D3, JavaScript, React - Smile Face

This example shows a smiley face rendered as a static SVG composition, combining a yellow head, two eyes, and a mouth line. The visualization is built with React 18 and ReactDOM, which manage the page’s root element, while the drawing itself is defined directly in SVG markup using basic shapes like circles and a line. The code sets explicit pixel positions for each element, with a filled circle for the face, smaller circles for eyes, and a styled line for the smile, all within a 960 by 500 viewport. The bundled JavaScript outputs a simple “Hello React! Semua” message, but the primary visual remains the hand-coded SVG illustration rather than data-driven graphics.

Oct 8, 2022