oferveze

@oferveze·4 public vizzes

Data & D3

A bar chart displays the top 10 countries by 2020 population, sourced from a UN dataset loaded via d3.csv. React manages the component state, rendering an SVG that uses d3.scaleBand for country categories and d3.scaleLinear for population values, with gridlines generated from xScale.ticks(). The visualization updates asynchronously after data fetching, showing a loading message until the CSV is parsed.

Jan 20, 2022

Loading thumbnail…

Veze

A smiling face built with yellow circular shapes and black outlines is rendered as an SVG using React 17 and D3 v7. The code constructs concentric circles for the eyes and mouth, with the mouth generated as an arc path using D3’s `arc` helper. Fixed dimensions and coordinates position all elements, while the `transform` attribute centers the drawing. The example demonstrates combining React’s declarative JSX with D3’s geometry utilities for static, data-driven graphics.

Jan 20, 2022

Loading thumbnail…

PlayCSV

PlayCSV demonstrates loading and parsing a remote CSV file using D3.js. The example fetches a dataset of CSS color names from a GitHub gist via `d3.csv` and logs the parsed array of objects to the browser console. It relies on D3 v7’s asynchronous data loading pattern, which returns a promise that resolves with the tabular data. The visualization itself is minimal—no graphical output is present—focusing solely on illustrating how to access and inspect structured data through the library’s CSV parser.

Jan 20, 2022

Loading thumbnail…

Mouse Follower Veze

A single dark circle follows the mouse cursor across a blank SVG canvas. The circle’s center updates to the pointer’s client coordinates on every mouse move, creating a direct and immediate tracking effect. The example uses React’s `useState` and `useCallback` hooks to manage and update the circle’s position, while rendering occurs through an SVG `<circle>` element. D3’s `arc` function is imported but not used, and the code relies on ReactDOM to mount the interactive component.

Jan 20, 2022