Alejo Cortiñaz

@alejoRGB·5 public vizzes

Fork of Vega-Lite API Template

This example visualizes the relationship between horsepower and acceleration for automobiles from the auto-mpg dataset. A scatter plot encodes acceleration on the x-axis and horsepower on the y-axis, with semi-transparent points to reveal density. The visualization is built using the Vega-Lite API in conjunction with D3’s `csv` loader to fetch data. Vega and Vega-Lite handle rendering, while vega-tooltip provides interactive hover details. The code customizes axis styling and removes chart domains for a cleaner appearance.

Aug 2, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between fuel efficiency, horsepower, and origin in a dataset of classic cars. The plot positions each vehicle by its miles per gallon and horsepower, colors points by the country of origin, and sizes them according to vehicle weight. Built using the Vega-Lite API, the visualization is rendered as an SVG via the vega-lite-api, with data fetched from the UCI Auto MPG dataset. Custom configuration adjusts the axis styling and tooltip appearance.

Jul 12, 2022

Loading thumbnail…

Loading data with React and d3

This example shows how to load a CSV dataset with d3 and manage it through React state. The app fetches a named colors CSV from a GitHub gist using `d3.csv` inside a `useEffect` hook, then stores the parsed data with `useState`. While loading, it displays a "Loading..." message; once the data arrives, it uses a custom `message` function to report the dataset’s column count, row count, and size in kilobytes. The visualization itself is minimal—just text rendered in a `<pre>` element via React, demonstrating data loading without any charts.

Jul 12, 2022

Loading thumbnail…

Loading and parsing csv data

This example demonstrates how to load and parse CSV data from a remote URL, using the D3.js v7 library’s `d3.csv` method to fetch and parse the file. It then displays a summary of the dataset, showing the number of columns, rows, and the approximate size of the formatted data in kilobytes, all rendered as plain text in an HTML `<pre>` element. The data source is a GitHub gist containing CSS named colors.

Jul 12, 2022

Loading thumbnail…

Smiley face p1

A grid of yellow smiley faces with black outlines, eyes, and a mouth is rendered. Each face is positioned and sized identically, but the eye radius varies randomly per face, creating subtle differences. The visualization is built with React components, using D3’s `arc` to define the mouth’s shape. The SVG is constructed from separate components for the background circle, eyes, and mouth, all contained within a group that translates the coordinate system.

Jul 7, 2022