Việt An

@vietan0·4 public vizzes

Fork of Polished World Map

This example displays a world map with country boundaries and graticules using a Natural Earth projection. The visualization uses the `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` APIs from D3 to render the map, with React managing the SVG output. The data is loaded from the World Atlas TopoJSON file via the `topojson` library, which provides both land polygons and interior boundaries for countries. The map is styled with a light gray sphere background, teal land and boundary colors, and subtle graticule lines.

Jul 11, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face is rendered as an SVG graphic that fills the entire browser window, with a yellow circular head, two black eyes, and an implied mouth area left blank. The face is centered dynamically using the window’s dimensions, and its size adapts to the viewport height. Built with React and ReactDOM, the visualization uses JSX to construct SVG circle elements, calculating positions and radii from window properties and applying a transform to center the drawing. The code relies on React’s component model to declaratively define the face’s geometry.

Jun 16, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This is a step-by-step tutorial for building a smiley face in SVG, shown as a bright yellow circle with two dark eye circles on a 960×500 canvas. The code renders the face directly using React 18’s `createRoot` and JavaScript, with SVG elements positioned via explicit `cx`, `cy`, and `r` attributes. The example is a static SVG drawing, and the accompanying README includes a YouTube video link, while the console logs "hey" to confirm the React script is running.

Jun 16, 2022

Loading thumbnail…

Fork of Hello HTML

A yellow circle with two smaller black circles forms a simple face in an SVG rendered directly in the HTML. The drawing uses no external libraries, relying solely on SVG circle elements with explicit `cx`, `cy`, and `r` attributes, plus inline fills and stroke styling. A linked `style.css` adds a light gray outline and rounded corners to the `svg` canvas. The example demonstrates basic vector graphics creation and static styling without interaction or data binding.

Jun 16, 2022