Vilmer98

@Vilmer98·6 public vizzes

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car’s horsepower against its miles-per-gallon. Points are colored by country of origin, with size encoded by vehicle weight, and tooltips reveal the car’s name. The visualization is built using the Vega-Lite API (vl) with a custom config for axis styling, and rendered dynamically to fit the browser window. Data is loaded asynchronously via d3.csv, while Vega, Vega-Lite, and Vega-Embed handle the chart specification and SVG rendering.

Aug 6, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a donut chart visualization of Auto MPG dataset records, showing the distribution of composers in the data. The visualization uses Vega-Lite API to construct an arc mark with theta encoding and count aggregation, styled with a pastel color scheme and semi-transparency. Data is loaded asynchronously via D3’s CSV parser from a GitHub Gist, and the chart is rendered with an SVG renderer configured through Vega-Lite, with tooltips enabled via Vega-Tooltip’s handler.

Aug 6, 2022

Loading thumbnail…

Loading data

This example demonstrates how to load and summarize a CSV dataset using D3 and React. The code fetches color data from a GitHub gist via `d3.csv`, stores it in React state with `useState` and `useEffect`, and displays a text summary showing file size in kilobytes, row count, and column count. The rendering uses a `<pre>` element with SVG, and the `message` helper formats the statistics using `d3.csvFormat` and string concatenation, updating dynamically once the data arrives.

Aug 3, 2022

Loading thumbnail…

Colors

This example displays basic statistics about a CSS colors dataset, including its size in kilobytes, row count, and column count, rendered as large text. It loads the data asynchronously from a GitHub gist using `d3.csv`, then computes the file size with `d3.csvFormat` and `Math.round`. The page uses D3 v7 and a plain HTML preamble, with the results injected into a `<pre>` element. The visualization focuses on summarizing the dataset’s dimensions rather than plotting points or shapes.

Aug 3, 2022

Loading thumbnail…

Mouse Follower

A smiley face follows the mouse cursor across an SVG canvas, demonstrating how React state updates can drive dynamic D3 visualizations. The example uses React's `useState` and `useCallback` hooks to track mouse coordinates, which are captured via an `onMouseMove` event handler on the SVG element. A single yellow circle with a black stroke and two smaller eye circles are rendered, with the main circle's position updating in real-time to match the cursor. The code leverages d3.v7 for SVG utilities and React 16.9 for component-based rendering.

Aug 1, 2022

Loading thumbnail…

HTML Starter

This example shows a grid of fifteen cartoon faces, each rendered as an SVG composed of a yellow circle, two eyes, and an arc-based mouth. The code uses React, D3’s `arc` generator for the mouth shape, and `range` from D3 to produce the repeated faces. Each face randomly varies its eye radius and mouth width, demonstrating composable SVG components within a React rendering pipeline.

Jul 30, 2022