guptambergatech

@guptambergatech·9 public vizzes

Refactored bar chart

This example shows a horizontal bar chart of the top 10 countries by population for 2020, with bars extending from a shared baseline and labeled axes. It is built as a React application that uses D3 v7’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The chart is rendered as SVG, with axes and marks split into reusable components (`AxisBottom`, `AxisLeft`, `Marks`), and data is loaded asynchronously from a CSV via `d3.csv`.

Jan 9, 2022

Loading thumbnail…

The Axis Convention

This example visualizes the top 10 most populous countries from a United Nations 2019 dataset using horizontal bars. The chart renders with React and D3 v7, computing linear and band scales via `scaleLinear` and `scaleBand` to map population values and country names. Axis ticks and labels are generated from the scales’ tick methods, with SVG rectangles representing each country’s population, drawn within an SVG canvas sized to the browser window.

Jan 9, 2022

Loading thumbnail…

The Margin Convention

This example demonstrates a horizontal bar chart of the top 10 most populous countries using UN population data from 2019. It applies the margin convention by defining a margin object and translating the chart group accordingly, ensuring axes and labels have space. The visualization uses React for component rendering and D3 v7 APIs including `scaleBand`, `scaleLinear`, and `max` to map data to SVG rectangles. Populated via `d3.csv`, the chart updates when data loads, with the SVG sized to the full window.

Jan 9, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a bar chart of population data for the top 10 countries in 2020, loaded from a CSV file and rendered as SVG rectangles. The app uses React hooks (useState, useEffect) to fetch and store the data, then maps it to bars with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Bars are positioned using the yScale and sized by xScale on population values, with the chart filling the entire window.

Jan 9, 2022

Loading thumbnail…

Rendering Data with React & D3

This example shows a full-screen smiley face rendered as a donut chart, with each slice colored by a hex value loaded from a remote CSV file. The React component uses the `useState` and `useEffect` hooks to fetch the data via `d3.csv`, then applies `d3.pie` and `d3.arc` to generate SVG path elements. The face’s features are implied by the circular pie layout, with the inner radius set to zero and the outer radius matching the viewport width.

Jan 9, 2022

Loading thumbnail…

Smily Face Part 1

A grid of randomly generated smiley faces renders as SVG in a React app. Each face is composed of a yellow circle, two dark eye circles, and an arc for the mouth, with positions and sizes varied using the JavaScript `Math.random()` function. The code uses d3’s `arc` generator to create the mouth path, while custom React components like `BackCircle`, `Eyes`, and `FaceContainer` structure the drawing. The layout repeats the same face component 18 times without animating or updating the random parameters.

Jan 8, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows the complete set of CSS named colors as a radial burst of pie slices, with each slice filled by its corresponding RGB hex value. The visualization uses D3’s `csv` loader to fetch color data, `pie` and `arc` generators to compute slice geometry, and React to render the SVG paths. The chart is centered with a fixed width and height, and a loading state appears while data is fetched. The code demonstrates combining D3’s data manipulation with React’s declarative component rendering.

Jan 8, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v7’s `d3.csv` method, then displays basic summary statistics about the dataset in a large `<pre>` element. The code fetches a remote CSV from a GitHub gist and reports its size in kilobytes, row count, and column count. It also includes commented‑out alternatives using the Fetch API and `d3.csvParse` for manual text handling. The page is a minimal HTML document with no other visual elements, focusing purely on the data‑loading and parsing workflow.

Jan 6, 2022

Loading thumbnail…

Interact with React

A smiley face drawn with SVG circles follows the mouse cursor across the full viewport. The React `useState` and `useCallback` hooks track pointer coordinates from the SVG’s `onMouseMove` event, updating a 10-pixel-radius circle’s `cx` and `cy` attributes in real time. ReactDOM renders the component into the `#root` element using React 16.9, with no fixed data source or external libraries beyond the SVG primitives.

Jan 6, 2022