Pratik Gohil

@Pratik-Gohil·9 public vizzes

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by projected 2020 population from a United Nations dataset, using horizontal bars with a teal fill and a Poppins font. The example highlights labeled axes and a population label, with tooltips showing formatted values. Built with React and D3 v6, it uses scaleBand and scaleLinear for layout, and formats tick labels with a custom SI-formatting function that converts billions from “G” to “B”. The SVG rendering is driven by reusable AxisBottom, AxisLeft, and Marks components.

Apr 24, 2021

Loading thumbnail…

Refactored Bar Chart

This example is a horizontal bar chart showing the populations of ten countries, derived from the 2020 column of a UN Population dataset loaded as CSV. It displays the data using SVG `<rect>` marks positioned by a d3 scaleBand for countries on the y-axis and a d3 scaleLinear for population on the x-axis, with axes rendered as custom React components. The chart is built with React and d3 v6, separating data loading in a `useData` hook and using functional components like `AxisBottom`, `AxisLeft`, and `Marks` to create a clean, refactored implementation.

Apr 24, 2021

Loading thumbnail…

Axes With React & D3

This example shows a horizontal bar chart of the top 10 most populous countries for 2020, using React to manage state and render SVG elements while D3 provides scales and tick generation. The code loads UN population data from a CSV via d3.csv, then uses d3.scaleBand for the y-axis countries and d3.scaleLinear for the x-axis population values. D3’s scale.ticks method generates the x-axis tick marks, which React maps to line and text elements within a transformed group.

Apr 24, 2021

Loading thumbnail…

Population Bar Chart With Margin Convention

This example shows a horizontal bar chart of the top 10 countries by 2020 population, using React to render SVG elements. The chart applies a common margin convention, translating a group element to inset the plotting area within a fixed 960×500 viewport. It uses D3’s `scaleBand` and `scaleLinear` to map countries and population counts to pixel coordinates, loading data from a CSV of UN population figures. Bars are drawn as `<rect>` elements inside the transformed group, demonstrating a clean separation between axes, labels, and content.

Apr 24, 2021

Loading thumbnail…

Population Bar Chart

This bar chart displays the top 10 countries by projected 2020 population, ranked along the y-axis with horizontal bars extending left. It loads CSV data from a GitHub gist using D3’s `csv` function, parses the population column with a row accessor, and renders the result as SVG rectangles via React. D3’s `scaleBand` positions the country labels, while `scaleLinear` maps population values to bar widths within a fixed 960×500 viewport.

Apr 24, 2021

Loading thumbnail…

Loading Data With React & D3

This example demonstrates a donut chart visualization of CSS named colors, where each color appears as a slice in a circular layout. It loads data from a CSV file using `d3.csv` within a React component’s `useEffect` hook, then renders the slices as SVG paths using `d3.pie` and `d3.arc`. The chart fills each slice with its corresponding hex color value from the dataset, creating a colorful wheel that showcases all named CSS colors at a glance. The visualization uses React’s state management to handle the asynchronous data loading, showing a "Loading..." message until the data is ready.

Apr 23, 2021

Loading thumbnail…

Mouse Follower

A circle of 15-pixel radius follows the mouse cursor across an SVG canvas. The visualization updates the circle's center coordinates in response to mouse movement events, rendering through React's state management and the SVG element's event handling. The example uses a React component with a `useCallback`-wrapped mouse-move handler to update client coordinates, and D3's `arc` import, though it primarily relies on React's rendering for the visual output.

Apr 23, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js, displaying summary statistics about the dataset in large text. It fetches a CSS named colors CSV file from a GitHub gist via `d3.csv`, then computes the formatted data size with `d3.csvFormat`, the total row count, and the number of columns. The results appear as a formatted message in a `<pre>` element. The visualization highlights D3’s built-in CSV handling and asynchronous data loading through promises.

Apr 23, 2021

Loading thumbnail…

Face

A yellow circle with a black border forms a face, featuring two black eyes and a black mouth rendered as a simple line. Built with React and D3, the SVG face is centered in a 960×500 viewport, with each eye placed using fixed offsets and the mouth drawn via D3’s `arc` generator to produce a smile-shaped path. The face’s outline uses a thick stroke, while the eyes and mouth rely on basic SVG circle and path elements.

Apr 23, 2021