gatperdut

@gatperdut·4 public vizzes

Fork of Vega-Lite API Template

This example uses the vega-lite-api to render a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips displaying vehicle names. The visualization loads data from a CSV file using `d3.csv`, applies a custom dark theme through a Vega-Lite config object, and fills the viewport by setting chart width and height to the browser window dimensions. Interactive tooltips are enabled through vega-tooltip's `Handler`, and the chart renders as an SVG using D3 v5.

Mar 19, 2021

Loading thumbnail…

Fork of Mouse Follower

This example displays the dimensions of a loaded CSV dataset, showing row and column counts alongside file size in kilobytes. It uses a React functional component with hooks (`useState`, `useEffect`) to fetch the data asynchronously via `d3.csv`, then formats the summary message with `d3.csvFormat`. The visualization renders as plain text within a `<pre>` element, with the React app bootstrapped through `ReactDOM.render` and D3 v6 included via CDN.

Mar 19, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse a remote CSV file using D3.js, then displays a summary of the dataset in a large text format. It fetches the data from a GitHub gist URL via the `d3.csv` method, which returns a promise. Once resolved, the code calculates the number of rows, columns, and the approximate file size in kilobytes using `d3.csvFormat`. The results are rendered into an HTML `<pre>` element, showcasing basic data inspection and asynchronous loading patterns in D3 v6.

Mar 19, 2021

Loading thumbnail…

Smiley Face Part 1

This interactive SVG smiley face renders a yellow circle with black eyes and a curved mouth, centered on a blank canvas. The face’s position follows mouse movement but remains docked at the screen center until clicked, at which point it becomes draggable. Built with React and D3 v6, the code uses D3’s `arc()` generator to shape the mouth path, while React state and event handlers manage the docking and repositioning logic. Eye and mouth dimensions are randomized per render, and the visualization uses a full-screen SVG without external data.

Mar 19, 2021