Ebdulmomen Ahmed

@Ebdulmomen1·4 public vizzes

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. The visualization renders as SVG with React managing the component state and D3’s `scaleBand`, `scaleLinear`, and `max` utilities handling the scales and data transformations. Axes are drawn manually with D3’s tick methods, positioning grid lines and labels. The bars use the `rect` SVG element, with each bar’s width proportional to the country’s 2020 population.

Mar 26, 2022

Loading thumbnail…

Making A Bar Chart With React &D3

This example shows a donut chart of CSS named colors, with each slice representing one color from a CSV dataset loaded via React’s `useEffect` hook. The visualization uses `d3.pie()` to compute slice angles and `d3.arc()` with an inner radius of 0 and outer radius set to the viewport width, rendering each segment as an SVG `<path>` filled with the corresponding hexadecimal value from the data. The chart is centered within a 960×500 SVG canvas, with data fetched asynchronously from a remote gist URL and displayed only after the CSV loads.

Mar 19, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying the resulting dataset's size in kilobytes, row count, and column count. The visualization uses D3 v5 to fetch the CSS Named Colors dataset from a GitHub Gist and parse it with the `d3.csv` and `d3.csvParse` APIs. The code also includes commented-out alternatives using `fetch` with promises and `async`/`await`, illustrating different asynchronous approaches. The output is rendered as text within an HTML `<pre>` element, with the data summary displayed in a large font.

Mar 19, 2022

Loading thumbnail…

Fork of Loading Data with D3 and React

A color wheel visualizes CSS named colors by plotting each color as a slice of a pie chart. The application loads a CSV file from a GitHub gist using `d3.csv`, then computes pie angles with `d3.pie` and draws the chart with `d3.arc` inside a React component. The rendered SVG paths use each color’s hex value for the fill. While data loads, a loading message appears.

Mar 17, 2022