Sergey Shulzhenko

@sergeyshulzhenko·5 public vizzes

Fork of Refactored Bar Chart

This example presents a horizontal bar chart ranking the ten most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The visualization renders SVG bars with scales and axes, displaying population values in billions. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, along with custom axis components that generate ticks and labels. The code also includes an axis label for “Population” and a tooltip formatting function that converts large numbers into concise notation.

Aug 15, 2023

Loading thumbnail…

Bar Chart with React & D3

A horizontal bar chart displays the ten most populous countries in 2020, drawn as SVG rectangles. The React component loads CSV data via D3’s `csv` utility, then uses `scaleBand` for country positions and `scaleLinear` for population values. Grid lines and axis labels are generated from the x-scale’s `ticks()`. The chart updates reactively through React’s `useState` and `useEffect` hooks, with D3 v5 handling data loading and scaling while React manages the SVG rendering.

May 26, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

This radial burst visualization displays all CSS named colors as slices of a pie chart, using each color’s RGB hex value to fill its corresponding slice. The code loads color data from a CSV file via `d3.csv`, then uses `d3.pie` and `d3.arc` to compute the slice geometry, while React manages the component state and renders the SVG paths. The visualization demonstrates a React–D3 integration where D3 handles data loading and layout calculations, and React performs the DOM rendering.

May 26, 2023

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across a 960 by 500 SVG canvas, updating its position in real time as the pointer moves. The React app uses the `useState` hook to store the current mouse coordinates and the `useCallback` hook to handle the `onMouseMove` event on the SVG element. The rendered circle’s center is bound to the state, and ReactDOM re-renders the element on every mouse movement. The visualization relies on React 16.9.0 and SVG for its rendering.

May 26, 2023

Loading thumbnail…

Face

This example builds a stylized cartoon face from reusable React components, including a yellow background circle, two eyes, and an arc-shaped mouth. The components are composed in a FaceContainer that centers all elements within an SVG using a transform. The mouth is drawn with the d3.arc() API, which generates the path using specified inner and outer radii and start and end angles. React 18 and D3 v7 handle the rendering, with visual properties like eye offset, radius, and stroke width passed as props to customize the face.

May 26, 2023