Lucas Fiorini

@tukaz·4 public vizzes

React

This example shows a horizontal bar chart of population by country, with the top five most populous nations ranked on the y-axis and population values on the x-axis. Hovering over a bar reveals its exact figure via a tooltip. The visualization is built with React components, using d3.scaleBand and d3.scaleLinear for layout, while d3.csv loads the UN Population 2019 dataset. Axes are rendered as SVG elements with tick labels formatted using d3.format.

Jun 13, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top five most populous countries as a set of bare rectangular bars, with no axes or labels, loaded from the United Nations World Population Prospects 2019 dataset. Using React state and effects, it fetches the CSV data with `d3.csv`, truncates it to five rows, and renders the bars as SVG `<rect>` elements. The bar widths are scaled by population via `scaleLinear`, while the vertical positions use `scaleBand`, producing a minimal, unadorned chart.

Jun 12, 2022

Loading thumbnail…

Fork of tukaz make a face 2

This example shows a single cartoon face rendered with SVG that can be dragged around the screen by pressing and holding the mouse button. The face is built from React components for the head, eyes, and mouth, using D3's `arc` generator to draw the mouth shape. The app tracks mouse movement via React state and event handlers, repositioning the face container absolutely within the page whenever the mouse moves while pressed. With a viewport height of 500 pixels, the face follows the cursor freely, demonstrating a simple interactive drag interaction in a React and D3 hybrid setup.

May 31, 2022

Loading thumbnail…

tukaz make a face

A yellow, black-stroked face with two eyes and an arched mouth follows the mouse while the button is pressed, dragging across the screen. The face is composed of SVG primitives rendered through React components, using D3’s `arc` generator to shape the mouth and `range` to construct a sequence of faces. Mouse events (`onMouseDown`, `onMouseUp`, `onMouseMove`) toggle a pressed state and update the face’s absolute position, demonstrating interactive event handling in a hybrid React/D3 workflow.

May 31, 2022