Maxim

@ItsCoolOnMars·3 public vizzes

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React components to render SVG elements, with D3 v5 functions including `scaleBand`, `scaleLinear`, `max`, and `format` to handle scaling and axis tick formatting. Horizontal bars represent population values with tooltips showing formatted numbers, while custom Axis components generate the tick marks and labels.

Jun 19, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how React and D3 can work together to load and summarize data from an external API. The visualization shows the result of fetching a JSON dataset from an Azure-hosted solar financial analysis endpoint, then displaying the file size in kilobytes and the number of top-level keys in the data object. Using React’s `useState` and `useEffect` hooks, the app triggers a D3 `json()` request, stores the response in component state, and conditionally renders a loading message or the computed summary. The code uses ReactDOM for rendering and the `encodeURI` and `JSON.stringify` methods to calculate the data size.

Jun 18, 2021

Loading thumbnail…

react face

A cheerful yellow smiley face rendered as an SVG using React and D3. The face is composed of a circle for the head, two smaller circles for eyes, and a mouth drawn with D3’s `arc` generator, which creates a path from angular ranges. React components define the SVG elements, while D3’s `arc` API computes the mouth’s path geometry. The code imports `arc` from `d3` and uses ReactDOM to mount the component into the DOM.

Jun 7, 2021