Aruj Joshi

@gtalin·3 public vizzes

Refactored code -- stylized Bar chart

This visualization displays the top 10 most populous countries as a horizontal bar chart, using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, the SVG renders bars, left-aligned country labels, and a bottom axis with population values formatted in billions. The code demonstrates reusable components (Marks, AxisBottom, AxisLeft) and accessor functions to decouple the data mapping, with styling applied via the Poppins font and a custom color scheme.

Feb 1, 2022

Loading thumbnail…

Fork of Axes with React & D3 -- Refactor code

This example shows a horizontal bar chart of the top 10 most populous countries, using React components and D3 scales. The React code defines AxisBottom, AxisLeft, and Marks components to render the SVG axes and bars, while a custom useFetch hook loads CSV data from the United Nations World Population Prospects 2019 via d3.csv. D3’s scaleBand and scaleLinear position the bars and map population values to pixel widths. The data source is accessed through a GitHub gist, and the visualization uses d3.v5 with React 16.9.

Feb 1, 2022

Loading thumbnail…

Fork of Mouse Follower

An interactive React application renders a single SVG circle that follows the mouse cursor across a 960 by 500 viewport. The component tracks pointer position via an `onMouseMove` event handler and updates React state with the client coordinates. The circle’s center coordinates are bound to this state, causing a smooth repositioning on every movement. The code uses React 16.9 with hooks (`useState`, `useCallback`) and renders through `ReactDOM`.

Feb 1, 2022