Roberto M

@mayanhavoc·7 public vizzes

Loading and parsing CSV data

This example demonstrates loading a CSV file from a remote URL and displaying basic statistics about the dataset, including its size in kilobytes, row count, and column count. The visualization uses D3.js v7, specifically the `d3.csv` function to asynchronously fetch and parse the data from a GitHub gist containing CSS named colors. The parsed data is then processed with `d3.csvFormat` to calculate the file size, while the row and column counts are retrieved from the data object's properties. The results are presented as plain text in a large `<pre>` element on the page.

Feb 19, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a minimalist data-loading interface that displays summary statistics about a CSV dataset, including its file size in kilobytes, row count, and column count. Built with React and D3 v7, it uses the `useState` and `useEffect` hooks to asynchronously fetch and store data via `d3.csv`. The imported `message` function formats the statistics, which are rendered as text inside a `<pre>` element within a styled dark-themed SVG container.

Feb 19, 2022

Loading thumbnail…

Netflix catalog

This visualization displays Netflix catalog data as a scatter plot, with each circle representing a title and positioned by country code and cumulative weeks spent in the top 10, while color encodes the show title. It uses the vega-lite-api to construct the chart, with d3.csv fetching data from a GitHub-hosted CSV file. The rendering relies on Vega and Vega-Lite, with custom configuration for axis styling and tooltips handled through vega-tooltip. Data originates from a Netflix catalog dataset sourced via the UCI Machine Learning Repository.

Nov 24, 2021

Loading thumbnail…

Steven Seagal film budget

An interactive scatter plot displays the budget of every Steven Seagal film by year, with tooltips revealing each movie’s title. Points are semi-transparent and sized uniformly, allowing overlaps to suggest density of releases. The visualization is built with the vega-lite-api library, which registers vega and vega-lite to render SVG output. Data is loaded asynchronously via d3.csv from a GitHub gist, and the chart dimensions automatically fit the full browser viewport.

Nov 24, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between vehicle horsepower, fuel efficiency (mpg), and weight, with points colored by country of origin and labeled by model name using hover tooltips. It renders an interactive scatter plot from the UCI Auto MPG dataset, loaded via CSV through `d3.csv`. The chart is built using the Vega-Lite API, which composes specifications programmatically, leverages `vl.markCircle` for rendering, and integrates `vega-tooltip` for interactivity within an SVG-based D3 view.

Nov 24, 2021

Loading thumbnail…

Mouse follower

A yellow circle follows the mouse cursor across a full-screen interactive visualization. The example demonstrates real-time pointer tracking using React state and event handling. It renders a single SVG circle element whose position updates via the `onMouseMove` event, using React's `useState` and `useCallback` hooks to manage and optimize the coordinate updates. The visualization fills the browser window with no margins, and the circle starts at the center of the screen before responding to user movement.

Nov 23, 2021

Loading thumbnail…

data_viz_intro_part1

A grid of eighteen randomly generated smiley faces fills the screen, each composed of a yellow circle, two eyes, and a mouth shaped as a half-ring. The faces are rendered as React components using SVG, with the mouth arc drawn via the `d3.arc()` API. Each face’s dimensions and feature positions are randomized on every render, and the `Face` component composes smaller `BackgroundCircle`, `Eyes`, and `Mouth` components, all wrapped in a `FaceContainer` that applies a translation transform.

Nov 22, 2021