Dhvanil Vaghasiya

@dhvanilvaghasiya·10 public vizzes

Adding ticks in D3 Bar Chart UN World Population 2020

This example visualizes the top 10 most populous countries in 2020 from UN World Population Prospects data. It uses React to render an SVG bar chart via `ReactDOM.render`, with D3 v5 utilities like `scaleBand`, `scaleLinear`, and `csv` to load and scale the data. The chart displays x-axis tick marks and labels via `xScale.ticks()`, along with y-axis country labels, and includes grid lines and rectangular bars sized by population.

Feb 2, 2023

Loading thumbnail…

Margin in D3 Bar Chart UN World Population 2020

This example displays a horizontal bar chart of the population of the top ten countries in 2020, sourced from UN World Population Prospects 2019. It uses React to render SVG rectangles, with D3’s `scaleBand` and `scaleLinear` mapping country names and population values to positions and widths. A margin object defines the chart’s inner dimensions, and the bars are grouped within a translated `<g>` element. Loading is handled by `d3.csv` with a row function that parses the population column.

Feb 2, 2023

Loading thumbnail…

Margin Bar Chart UN World Population 2020

A horizontal bar chart displays the ten most populous countries in 2020 from the UN World Population Prospects 2019 dataset. The visualization uses React for rendering an SVG, with D3 v5 utilities `csv`, `scaleBand`, `scaleLinear`, and `max` to load and scale the data. Population values are extracted from the `2020` column, and the chart emphasizes axis margins through a fixed layout.

Jan 31, 2023

Loading thumbnail…

UN World Population 2020

This example shows the top 10 most populous countries in 2020 using a horizontal bar chart, with each bar’s length proportional to the population from the UN World Population Prospects 2019 dataset. It loads the CSV data with d3.csv, transforms the 2020 column into numbers, and renders the bars as SVG rectangles using React’s useState and useEffect hooks. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the population scale, with the bars positioned and sized via the React map function.

Jan 31, 2023

Loading thumbnail…

Representing Data using React and D3

This example displays CSS named colors as a radial burst, with each color occupying an equal wedge of a pie chart. It uses React hooks (`useState` and `useEffect`) to load a CSV of color data via D3's `csv` utility, then renders the chart as SVG paths. The pie layout is computed with `d3.pie()` and each arc is drawn using `d3.arc()` with an inner radius of zero. The fill for each path comes directly from the `RGB hex value` column in the dataset.

Jan 31, 2023

Loading thumbnail…

Loading data in React Program

This example demonstrates how to load and inspect a CSV dataset within a React application using D3 utilities. It fetches a list of CSS named colors from a GitHub gist via `d3.csv`, then displays the dataset’s row count, column count, and approximate file size in kilobytes using custom message formatting. The React component uses the `useState` and `useEffect` hooks to manage the asynchronous data loading state, showing a loading message until the data arrives. The visualization is purely textual, rendered inside a `<pre>` element, and relies on `d3.csvFormat` to calculate the data’s size.

Jan 30, 2023

Loading thumbnail…

Parsing CSV Data

This example displays a text summary of a CSV dataset loaded from a remote URL. Using the D3.js `d3.csv` method, it fetches and parses the file, then reports the row count, column count, and approximate file size in kilobytes into an HTML `<pre>` element. The sample data comes from a raw GitHub-hosted CSV file containing CSS named colors. The page is minimal, with a large-font style applied to the output container.

Jan 30, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature trends over time using a Vega-Lite line chart, with the data sourced from the Auto MPG Data Set via a GitHub Gist. The visualization is built programmatically through the Vega-Lite API, which registers Vega and Vega-Lite libraries, and employs d3.csv to fetch the dataset. The chart encodes timestamps on the x-axis and temperature values on the y-axis, with a semitransparent line style. Custom configuration adjusts axis styling, font sizes, and colors for improved readability, while the view auto-sizes to fit the browser window.

Jan 29, 2023

Loading thumbnail…

Moving circle with mouse cursor

A yellow circle follows the cursor across a 960x500 SVG canvas. The application tracks the mouse pointer's client coordinates and re-renders the circle's center position on every move event. Built with React 16.9 and D3 v5, it uses React's `useState` hook to manage the dynamic mouse position state, while SVG elements handle the visual rendering within a fullscreen, overflow-hidden layout.

Jan 27, 2023

Loading thumbnail…

Making of a SVG

This example generates a grid of eighteen cartoon faces, each rendered as a collection of SVG shapes including a yellow background circle, black eyes, and a smile. The faces are composed using React components like `Face`, `BgCircle`, `Eyes`, and `MouthArc`, with the latter leveraging the `d3.arc()` API to draw the mouth path. Randomized eye radius, mouth width, and mouth radius give each face a distinct expression. The `FaceContainer` wraps the SVG elements, translating the coordinate system to center each face within its designated width and height.

Dec 22, 2022