diogomirandabarbosa25@gmail.com

@diogoomb·10 public vizzes

The margin convection

This example displays a horizontal bar chart ranking the top ten countries by population in 2020, using data loaded from a CSV file. The visualization uses React state to asynchronously fetch the data with `d3.csv`, then renders SVG bars whose widths are scaled by a `scaleLinear` and whose positions are set by a `scaleBand`. The chart is framed with margins and uses a `g` element transformed to align the plot area.

Aug 14, 2024

Loading thumbnail…

Rendering data with react & d3

This example displays a horizontal bar chart of the top ten countries by 2020 population, using data loaded from a GitHub-hosted CSV file. The visualization is built with React and D3, where React’s `useState` and `useEffect` manage the asynchronous data fetching state, and D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` utilities handle data parsing and scaling. The resulting SVG rectangles are generated directly within React’s declarative JSX markup, showing a clean integration of D3’s quantitative toolkit with React’s component model.

Aug 13, 2024

Loading thumbnail…

Rendering Data with React

A donut chart visualizes all named CSS colors from a remote CSV file, with each color rendered as a slice filled with its actual RGB hex value. The React app uses the `useState` and `useEffect` hooks to asynchronously load the data via d3.csv, then computes the pie angles with d3.pie and draws the paths using d3.arc. Data is rendered into SVG within a React component, demonstrating how React manages state while D3 handles the geometric calculations.

Aug 13, 2024

Loading thumbnail…

Random Data with React

This example displays a vertical stack of colored horizontal bars, one for each CSS named color, loaded from a remote CSV file. The visualization uses React's `useState` and `useEffect` hooks to asynchronously fetch and store the data with `d3.csv`, then renders each row as a `div` whose background color is set to the hex value from the dataset. The bars are 960 pixels wide and 5 pixels tall, creating a continuous spectrum. The code integrates D3 v7 for data loading with React 16.9 for component rendering and state management.

Aug 1, 2024

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset using D3 and React. It fetches a list of CSS named colors from a GitHub gist via `d3.csv`, then stores the parsed result in React state with the `useState` and `useEffect` hooks. While the data loads, the app displays “Loading...”; once ready, it prints a text summary generated from the data, showing file size in kilobytes, row count, and column count using `d3.csvFormat` and the data’s `columns` property. The visualization is purely textual, rendered inside a `<pre>` element.

Jul 31, 2024

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js v7, displaying the file size, row count, and column count in a large preformatted text element. It fetches a remote CSV file containing CSS named colors and processes it with `d3.csv`, which parses the data and provides access to its columns via `data.columns`. The visualization also calculates the formatted data size using `d3.csvFormat` and converts it to kilobytes. The code includes commented alternatives using the Fetch API and `d3.csvParse` for manual parsing.

Jul 28, 2024

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas in this React visualization. The app tracks the pointer's `clientX` and `clientY` coordinates on every `mousemove` event, storing them in state and updating the circle's `cx` and `cy` attributes accordingly. React 16.9 handles the component state with the `useState` and `useCallback` hooks, while `ReactDOM.render` mounts the application to the DOM. The rendering uses React's JSX syntax to produce the SVG output.

Jul 28, 2024

Loading thumbnail…

html

A grid of eighteen identical smiley faces is rendered, each composed of a yellow circle with black eyes and a mouth drawn as a half-circle arc. The faces vary randomly in eye radius due to `Math.random()` calls on each render. Built with React and D3, the `Face` component composes reusable subcomponents like `BackgroundCircle`, `Eyes`, and `Mouth`, which uses `d3.arc` to generate the mouth path. All shapes are drawn as SVG elements within a transformed `<g>` group, centered per face.

Jul 27, 2024

Loading thumbnail…

HTML

This example demonstrates the fundamental structure of a VizHub V3 visualization, rendering a centered “Hello World!” message inside a container DIV. It shows how the exported `main` function receives a `container` element with measurable dimensions, eliminating the need for an `index.html` file. The code uses plain HTML and inline CSS to set the font size and text alignment, with the size value serving as an interactive widget that can be adjusted by alt-dragging in the editor for real-time hot reloading feedback.

Jul 27, 2024

Loading thumbnail…

Fork of HTML Starter

This example displays a static, centered "Hello HTML!" message using plain CSS styling, with the text rendered in a large 13em font size. The page demonstrates a minimal structure with a standalone HTML file containing embedded CSS in a `<style>` tag and JavaScript omitted from the visible code. It uses no external libraries or data sources, relying solely on the browser’s built-in rendering of HTML and CSS. The example serves as a baseline for understanding how to combine markup and styling in a single document.

Jul 27, 2024