aleoncavallo

@aleoncavallo·7 public vizzes

fetch

This example demonstrates how to load data from a remote CSV URL using the browser’s built-in `fetch` API. It displays the static text “Hola!” in large type, while logging the raw `fetch` response object to the console—no parsing or rendering of the data occurs. The page is a bare HTML file with inline CSS and JavaScript, providing a minimal starting point for fetching external datasets, such as the Argentine government’s COVID-19 vaccination personnel statistics. The example uses no external libraries, relying solely on native web APIs.

Dec 19, 2021

Loading thumbnail…

nonaga

A single static face is rendered repeatedly twenty times, with each iteration randomly assigning a color, eye radius, mouth radius, and mouth width. The data visualization shows a grid of varied cartoon-like faces, emphasizing random parameter variation to create visual diversity. Built with React and D3 v7, the code uses D3's `arc` generator in `Mouth.js` to draw the mouth path, while React components structure the face elements (background circle, eyes, mouth) as SVG. The rendering approach is SVG output, with color choices pulled from a hardcoded array of ten distinct colors.

Oct 31, 2021

Loading thumbnail…

Cargando y analizando datos en CSV

This example demonstrates how to load and analyze CSV data in a web page, initially displaying a large, centered "hola!" message. Built with plain JavaScript and HTML, it relies on standard browser APIs to fetch and interpret CSV files, though the current code does not yet include a charting library or explicit data-processing logic. The presentation uses basic CSS styling for text layout, and the data source is defined by the user through the CSV file loading process. The visualization serves as a starting point for exploring tabular data, with the message serving as a placeholder before analysis begins.

Oct 26, 2021

Loading thumbnail…

Mouse mors

A smiling face rendered as a responsive SVG fills the browser window, with a yellow circle for the head, black stroke outline, two black eyes, and a mouth implied by the circle’s boundary. The React component uses `window.innerWidth` and `window.innerHeight` to size the viewport, centering the face via a `<g>` transform. It relies on React 16.9 and ReactDOM to render SVG elements, with all geometry defined through JSX attributes like `cx`, `cy`, and `r`. The code contains no interactive or animated behavior.

Oct 18, 2021

Loading thumbnail…

una nueva carita feliz!!

A grid of randomly colored smiley faces fills the canvas, each face a unique variation of eye size, mouth width, and background hue. The composition shows how reusable React components, like `Face`, `Eyes`, and `Mouth`, are instantiated multiple times with different parameter values. The rendering uses SVG within React, while the `d3.arc` API defines the mouth shape, and `d3.range` generates the array of face instances.

Oct 17, 2021

Loading thumbnail…

Fork of Camino a una carita feliz...

This example renders a smiley face using React and D3.js, drawing a yellow circle with black stroke, two eyes, and a mouth arc on an SVG canvas. The code uses `d3.arc` from the D3 library to generate the mouth's path, with the arc defined by specific inner and outer radii and angular start and end points in radians. The face is centered via a transform, and all shapes are positioned relative to the center using numeric offsets. The visualization uses React's `ReactDOM.render` to mount the SVG into the page, with dimensions fixed at 500 by 500 pixels.

Oct 16, 2021

Loading thumbnail…

Camino a una carita feliz...

A simple smiling face is drawn using raw SVG primitives: a yellow circle for the head, two small black circles for eyes, and a curved stroke for the mouth. The page contains no JavaScript and relies solely on static SVG elements defined directly in the HTML. The rendering uses inline SVG within an `index.html` file, with explicit `cx`, `cy`, and `r` attributes to position the shapes on a 960 by 500 canvas. The example demonstrates basic vector graphics composition without any external libraries or data sources.

Oct 16, 2021