danielblnunes

@danielblnunes·4 public vizzes

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates D3’s general update pattern with special cases for handling dynamic data changes in an SVG visualization. It shows a bowl of fruit where apples and lemons are added, removed, or replaced over time, with circles and text labels updating accordingly. The code uses `d3.scaleOrdinal` for color and radius mapping, and employs selection methods like `enter()`, `merge()`, and `exit()` to manage DOM updates. Data comes from an array of fruit objects modified through `pop()` and `filter()`, triggering re-renders via `setTimeout`.

Jun 9, 2020

Loading thumbnail…

Untitled

This example demonstrates the process of creating a React-based web application, starting from a minimal `index.html` file. It uses the React framework to render interactive data visualizations within an HTML page. The code defines a basic structure for the application, with the `index.html` serving as the entry point. The visualization leverages React's component-based architecture to build and manage the UI, though no specific data or chart types are implemented in the provided code. The content currently serves as a foundation for further development.

Jun 8, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data report. It displays a list of cars (year, make, model, and price) that fall below a specified price threshold, initially showing a “Loading…” message. The React-driven code uses JavaScript Promises via `getCars()` to simulate fetching a hardcoded JSON array, then filters and formats the data with `generateReport()` and `formatCar()`. The output is rendered as plain text inside an HTML `<pre>` element, updated after a two-second delay.

Jun 8, 2020

Loading thumbnail…

Cars Report

This example displays a plain-text report of cars under a price threshold, generated from a hardcoded JSON dataset. After a simulated two-second delay via a Promise, it filters the car list by price, formats each entry as a string, and injects the result into a `<pre>` element. The code uses React-free JavaScript modules, including `getCars` for data retrieval, `generateReport` for filtering and formatting, and `document.getElementById` for DOM updates.

Jun 8, 2020