Natália

@Na-Na-Ti·5 public vizzes

Fork of Loading Data

This example demonstrates asynchronous data loading with D3 v7 by fetching and parsing the Iris Dataset from a local CSV file. It shows the raw parsed data as a JSON-formatted text preview inside a `<pre>` element, updating the view once the data arrives. The visualization uses `fetch()` to request `data.csv`, converts the response text with `d3.csvParse`, and coerces numeric columns to numbers before storing them in state. The `viz.js` module manages a loading state, initially rendering nothing until the data is processed, then displaying the full dataset structure.

Sep 18, 2023

Loading thumbnail…

Fork of Mouse Follower

This fork demonstrates a unidirectional data flow pattern that updates an SVG circle to follow the mouse cursor. The visualization tracks pointer position and renders a simple responsive point on the canvas. Built with React and D3 (v7), the implementation uses `select` to target DOM nodes and `csvParse` to load and parse the Iris flower dataset from `data.csv`. The data loading follows a state machine pattern, transitioning from `undefined` to `'LOADING'` to the final parsed array, with numeric conversions applied to the measurement columns.

Sep 16, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering and text output within a web page. It draws red and green circles, a yellow rectangle with a blue stroke, and an invalid triangle element, all inside a 960x500 SVG canvas. The code uses D3 version 7's `select` API to set the body text to "Hello D3 version 7." The visualization is pure SVG markup defined in static HTML, with no data source or dynamic interaction.

Aug 22, 2023

Loading thumbnail…

Cars Report

This example displays the make of the first car in a hardcoded JSON array of five vehicles, showing a simple text report. The page renders the message "Honda" in large, centered text within an HTML `<pre>` element. The visualization uses JavaScript to import the car data from a separate `cars.js` module, parse it as JSON, and assign the first record's make to the message element via the Document Object Model’s `getElementById` method. It demonstrates basic data handling and page updating without any charting library.

Jul 25, 2023

Loading thumbnail…

Untitled

This example presents a static HTML page that displays the centered message "Hello HTML!" in a large, bold font. The page is styled using a CSS rule that sets the font size to 13em and aligns the text centrally within the body. The implementation uses plain HTML and CSS, with no JavaScript, frameworks, or external data sources, providing a minimalist demonstration of basic web styling.

Jul 25, 2023