Cristian Pintor

@cpintor·3 public vizzes

Let's make a face with D3.js

A yellow circle with black outlines forms a face with two eyes, animated eyebrows, and a smile, all built using D3.js v5 with SVG rendering. The code uses `d3.select`, `d3.arc`, and `selection.transition` to draw the head, eyes, mouth, and to animate the eyebrows up and down over two seconds. The face is centered on a 960×500 SVG canvas, with all shapes positioned via translations and hardcoded numeric offsets for features like eye spacing and eyebrow dimensions.

Jan 28, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, and a line—using SVG elements within an HTML page. It shows how to apply CSS styling through an external stylesheet and how to use inline presentation attributes like `fill` and `stroke` to control color and borders. The code also groups shapes inside an SVG `<g>` element to apply consistent styling and a transformation. The page uses native SVG markup inside a React-rendered `index.html`, with the `style.css` file enforcing layout rules such as zero margins and hidden overflow.

Jan 28, 2020

Loading thumbnail…

Cars Report

This example demonstrates a filtered, text-based report of car listings, displaying only those priced under $2,000. The page initially shows a “Loading…” message, then presents the report as a plain-text list rendered in a large `<pre>` element. It uses asynchronous JavaScript with `getCars()`, which returns a `Promise` that resolves after a 2-second delay, and `generateReport()` to filter and format the data. The code relies on standard ES6 module imports, template literals, and array methods like `filter` and `map`.

Jan 28, 2020