JosoArenas

@JosoArenas·6 public vizzes

SandBox

This example displays the text "Hello HTML" in large, centered type on a plain webpage. It demonstrates how a JavaScript `for` loop with `var` scoping affects a closure, logging the final value of `i` (which is `3`) to the console upon page load. The code uses native browser APIs for HTML, CSS, and JavaScript, with no external libraries or data sources.

Jul 7, 2021

Loading thumbnail…

Loading data with React

This example shows how to load and summarize a CSV dataset using React state management. D3’s `csv` utility fetches the data, while React’s `useState` and `useEffect` hooks track the loading state and store the parsed result. The visualization displays a plain-text summary of the dataset, listing its size in kilobytes, row count, and column count, computed with `d3.csvFormat`. Before the data arrives, the interface shows a "Loading..." message. The data comes from a remote GitHub gist containing CSS named colors.

Jul 1, 2021

Loading thumbnail…

Following circle

A circle tracks the mouse cursor across the screen. Built with React and SVG, the component uses React Hooks like `useState` and `useCallback` to update the circle’s center coordinates on every `mousemove` event. It renders a single SVG circle whose radius is fixed at 40 pixels.

Jul 1, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates loading and parsing CSV data using D3 v5, displaying basic statistics about the dataset in a large HTML element. The code fetches a CSV file containing CSS named colors from a GitHub gist, uses `d3.csv()` to parse it asynchronously, and then computes the formatted size in kilobytes, the number of rows, and the number of columns. The results are rendered as text in a `<pre>` element, with the message built from `d3.csvFormat(data).length` and the parsed array’s properties.

Jul 1, 2021

Loading thumbnail…

Smiley face part 1

A simple smiley face uses SVG circles and an arc path to show a minimal character. The example composes a yellow background circle with black stroke, two black eye circles, and a mouth created with d3.arc to define a crescent shape. The React app renders the components in SVG, centered within a 960x500 viewport, demonstrating basic shape composition and the d3.arc API.

Jun 24, 2021

Loading thumbnail…

Cars report

This example displays a static message, “Barado Pitto,” in large text on a web page. It loads D3 via UNPKG and demonstrates local ES6 module imports, though the visible output is a simple text element updated through the Document Object Model. The page includes a hardcoded dataset of six car records with year, make, model, and price, but the code does not render this data visually. The implementation uses `document.getElementById` to set text content, with styling provided by a CSS file.

Jun 11, 2021