Caparino

@Caparino·6 public vizzes

Fork of Smiley Face Part II

A circle follows the mouse cursor across an SVG canvas. The visualization uses React state to track the pointer's x and y coordinates via the `onMouseMove` event, updating the circle's `cx` and `cy` attributes in real time. Mouse position is captured from the event's `clientX` and `clientY` properties within a `handleMouseMove` callback, and the circle radius is fixed at 30 pixels. The rendered output is a plain black circle on a white background, with no additional data or styling.

Jun 5, 2022

Loading thumbnail…

Fork of HTML Starter

A simple web page fetches and parses CSV data, displaying the raw text in the browser console. The code uses the Fetch API to retrieve a CSV file containing CSS named colors from a GitHub gist, then logs the parsed text output. The page itself renders no visual content, serving only as a data-loading exercise. The script contains an asynchronous function that handles the network request and response text conversion, with the parsed data printed for inspection.

Jun 5, 2022

Loading thumbnail…

SANKEY Experiment

This visualization uses a Sankey diagram to trace the flow of job applicants through a hiring pipeline, from sources like LinkedIn and referrals to outcomes such as "Interview" and "Hired." The interactive SVG graphic allows users to drag node rectangles to rearrange the layout, with the connecting links updating their paths in real time. Built with React and D3.js v4, the code loads data from a CSV file (sankey.csv) and implements custom node positioning through the `d3.drag` API, demonstrating a hand-crafted Sankey layout algorithm rather than a dedicated library.

Jun 5, 2022

Loading thumbnail…

Untitled

This example embeds an image inside a Google Visualization table cell, demonstrating how HTML content can be rendered within a chart. It displays a single row with a politician label and a green W3Schools image, using the Google Charts loader and the `google.visualization.Table` API with `allowHtml: true` to enable the image tag. The table is drawn into a fixed-size div, and the code relies on the `google.charts.load` and `google.load` calls to initialize the visualization libraries.

Jun 4, 2022

Loading thumbnail…

Fork of Smiley Face Part V

A grid of eighteen randomized cartoon faces renders in SVG via React components, each face assembled from reusable parts like a yellow background circle, eyes, and an arc-based mouth. The code splits the Face, Eyes, Mouth, and FaceContainer into separate ES6 modules, using React Fragments to group the eye circles. D3’s `arc` generator creates the mouth path, while `d3.range` produces the arrangement of faces. Each face’s proportions—stroke width, eye offset, eye radius, and mouth dimensions—are assigned random values for variety.

Jun 4, 2022

Loading thumbnail…

Untitled

An interactive React-based Sankey diagram visualizes flow data from a remote JSON file, displaying nodes and links with color gradients between source and target. The chart uses D3.js's sankey layout algorithm for node positioning and link calculation, rendered as SVG paths and rectangles. A drag-and-drop interaction lets users reposition nodes in edit mode, while react-spring is available for potential animations. The visualization includes node labels and values, with a color scheme differentiating flow pathways.

Jun 4, 2022