Mareno Demmers

@mhjdemmers·5 public vizzes

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the UCI Machine Learning Repository, visualizing horsepower against country of origin with points sized by a fixed constant. The code builds the visualization programmatically using the Vega-Lite API, registering Vega and Vega-Lite libraries with vega-tooltip for interactivity. Data is loaded asynchronously via `d3.csv`, and the chart is configured with custom styling for improved readability, rendering as a full-window SVG fit to the viewport.

Oct 17, 2024

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a minimal React and D3 integration for loading and summarizing CSV data. It fetches a remote CSV file from a GitHub gist and displays a text summary with the file size in kilobytes, row count, and column count. The visualization uses React hooks (`useState`, `useEffect`) to manage the asynchronous data loading, while the `d3.csv` method handles parsing. The output is rendered as SVG-independent plain text inside a `<pre>` element, showing how React and D3 can work together for data preprocessing.

Oct 10, 2024

Loading thumbnail…

Parsing CSV Data with D3

This example demonstrates how to load and parse CSV data using D3’s `d3.csv` method, displaying the file size, row count, and column count as large text in the browser. The code fetches a remote CSV file from a GitHub gist, parses it with `d3.csv`, and uses `d3.csvFormat` to measure the formatted data’s size in kilobytes. The results are rendered into a `<pre>` element via `document.getElementById`, with the visualization relying entirely on D3’s data-handling APIs rather than any drawing or charting functions.

Oct 10, 2024

Loading thumbnail…

MouseFollower

A single black circle tracks the mouse cursor across a full-window SVG canvas. The visualization demonstrates real-time interaction using React state and event handling. The circle's center coordinates update on every mouse movement via the `onMouseMove` event, with `useState` and `useCallback` managing position updates. Rendered with ReactDOM and SVG elements, the example shows a minimal interactive data display where the circle directly mirrors user input.

Oct 10, 2024

Loading thumbnail…

Face part 1

A grid of eighteen randomly generated cartoon faces, each composed of a yellow circular background, two black eyes, and an arc-shaped mouth, renders in a 3×6 layout. The faces are created using React components, with SVG circles for the head and eyes, and a D3 arc for the mouth. Feature sizes and positions vary per face through randomized parameters.

Oct 9, 2024