Nenad Jovanovic

@Nenyy-mon·4 public vizzes

Loading Data with React + D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG. It demonstrates loading CSV data with `d3.csv` and managing the asynchronous result through React’s `useState` and `useEffect` hooks. The chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with `max` calculating the domain. A loading state is displayed until the data arrives from the provided UN Population CSV URL.

Oct 23, 2023

Loading thumbnail…

coronavirus dataviz

This visualization presents the global spread of coronavirus using a geographic map. It displays a force-directed simulation of nodes overlaid on a world map, with the data loaded from an external CSV file. The code constructs the map using `d3.geoPath` and manages the moving points with `d3.forceSimulation`, which animates their positions. The visualization is built with D3 version 5, utilizing its core modules for data loading, geographical projection, and interactive simulation, providing a dynamic view of the pandemic's progression across regions.

Oct 23, 2023

Loading thumbnail…

Fork of Data viz Tweaking a face 2

A React and SVG visualization tracks the mouse cursor with a single circle. The circle updates its position in real time using React state, with `onMouseMove` handling events on an SVG element. Built with React 16.9 and rendered via `ReactDOM`, the example demonstrates a simple interactive pattern where the circle follows mouse coordinates across a 960 by 500 viewport. No external data source is used; the interaction is purely based on user input events.

Oct 19, 2023

Loading thumbnail…

Data viz

A grid of 18 randomly generated cartoon faces fills the SVG canvas, each face composed of a yellow circle, two eyes, and a d3 arc-based mouth. The React components `Face`, `BackgroundCircle`, `EyeCircles`, `Mouth`, and `FaceContainer` render each face with randomized stroke widths, eye offsets, eye radii, and mouth dimensions. The visualization uses d3.v7’s `arc` generator to draw the mouth path and the `range` function to create the face array. Each render produces a unique arrangement of facial features.

Oct 18, 2023