federicojv

@federicojv·4 public vizzes

Retrials

Retrials presents a world map as a central visual, paired with a one-dimensional time display and a searchable filter panel, all within a web-based dashboard. The interface is constructed using HTML elements, CSS for the fixed layout, and an external world map image. A search form provides text input and a button but does not reveal the underlying interaction logic. The page relies on the custom styles from `styles.css` to structure the main, filter, and sidebar areas, though no specific data visualization libraries are invoked in the provided files.

Feb 17, 2020

Loading thumbnail…

Let's make a face with D3.js

A smiling face rendered in SVG is drawn with D3.js, using geometric shapes for the head, eyes, eyebrows, and a mouth created with the `d3.arc` path generator. The example demonstrates a looping animation where the eyebrows repeatedly move downward and back upward via chained `transition.attrTween` calls, while the static face elements remain fixed. The code relies on D3 selections and attribute manipulation, with the SVG canvas set to 960 by 500 pixels and centered via a transformed group.

Feb 12, 2020

Loading thumbnail…

Shapes with CSS and SVG

This example demonstrates how CSS and SVG can be used together to create and style basic geometric shapes, including circles, rectangles, lines, and paths, within a scalable vector graphic. The SVG elements are organized using transforms for scaling and translation, while CSS classes apply stroke and fill properties, showcasing the interplay between presentation and structure. The example is built with React and renders purely through SVG markup.

Feb 12, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text “Hello World” centered on the screen. The page structure is defined in `index.html`, which includes a `<pre>` element and loads a `bundle.js` script. The `index.js` file uses the DOM API `document.getElementById` to set the text content of that element to the message. It serves as a bare-bones starter template for projects.

Feb 8, 2020