Guillaume Loslier-Pinard

@GuillaumeLoslier·4 public vizzes

Water potability Vega-Lite API Template

This interactive scatterplot visualizes water potability by plotting turbidity against hardness, with point color encoding pH and point size encoding total dissolved solids. Hovering reveals whether each sample is potable (1) or non-potable (0). The visualization is built using the Vega-Lite API template with d3.csv loading data from a Kaggle-derived water quality dataset. Vega-Lite’s declarative API, registered with vega and vega-lite, handles rendering, while vega-tooltip provides interactive hover details. The custom config.js adjusts axis styling for readability.

Feb 6, 2022

Loading thumbnail…

Fork of Mouse Follower

A React-powered SVG visualization tracks the cursor with a purple ellipse. As the mouse moves across the 960×500 viewport, the ellipse’s center updates in real time via the `onMouseMove` handler. The `useState` hook stores the current mouse coordinates, while `useCallback` optimizes the event handler. The component renders a single `<ellipse>` element using React DOM, with a fixed `rx` of 40 and `ry` of 25. The visualization demonstrates reactive state management without external data sources or animation libraries.

Jan 15, 2022

Loading thumbnail…

Fork of Smiley Face Part III

A React and D3.js example renders a stylized, asymmetrical smiley face as an SVG composition. The face features a pink head, orange eyes with white and brown pupils, a blue mouth, magenta hair, and a yellow nose with an orange stroke. The code constructs these shapes using D3's `arc` function to generate the mouth, hair, and nose paths, while circles define the head and facial features. React manages the SVG element, and D3 provides the geometry, resulting in a playful, geometric portrait.

Jan 13, 2022

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example shows a yellow smiley face that fills the entire browser window, with two black eyes and a yellow circular head outlined in black. The face is drawn using React and rendered as an SVG, with the smile left out of the final output. The code uses React 16.9 and ReactDOM to render the SVG elements, and it calculates the center and dimensions of the face based on the window size. The rendering approach uses SVG circles with calculated attributes for the head, eyes, and stroke width, all positioned relative to the center of the viewport.

Jan 11, 2022