Felipe Oyarzún Ramos

@felipeOyarzun·3 public vizzes

Fork of Let's make a face with D3.js!

This example shows a yellow smiley face drawn with D3.js v5, featuring two eyes, a curved mouth, and animated eyebrows that move up and down in a repeated transition. The face is constructed using SVG primitives like `circle`, `rect`, and `path` with the `d3.arc` shape generator for the mouth. The eyebrows animate via chained `transition` calls with a 2-second duration each, translating the eyebrow group vertically. The code demonstrates fundamental DOM selection and manipulation using `d3.select` and `d3.append` on an SVG canvas.

Feb 15, 2023

Loading thumbnail…

hols

This visualization displays a series of car brands and their models in a simple HTML page. The code imports a string from a separate module and sets it as the text content of an HTML element with the ID "demo," initially rendering the word "hole." The example uses the `document.getElementById` API to update the displayed text. No external library or framework is apparent in the rendered output, as it is a minimal React starter project that showcases basic DOM manipulation.

Oct 7, 2020

Loading thumbnail…

Sized Points on a Map

This visualization displays global cities with populations exceeding 50,000 as semi-transparent circles sized proportionally to population using a square-root scale. The map uses a natural Earth projection, with country boundaries, interiors, and graticules rendered via d3.geoPath from TopoJSON world-atlas data. City coordinates are projected using d3.geoNaturalEarth1, with population data loaded from a Simplemaps CSV. The React component applies the size scale to each circle’s radius, creating an immediate visual comparison of urban population distribution across continents.

Oct 7, 2020