Skip to main content
SimilarExport ZIP
100%

ICE - 6

✓ Published0🌍 Public
MMahitha-Moparthi
Last edited Mar 22, 2023
Created on Mar 22, 2023
Forked from Stylized Bar Chart

This example displays the top 12 YouTube channels ranked by video count as a horizontal bar chart. Using React hooks for state management and data loading, it reads CSV data from a GitHub gist via `d3.csv`. D3’s `scaleBand` and `scaleLinear` map channel names and video counts to SVG rectangles, while custom tick marks and labels draw axes without using `axisLeft` or `axisBottom`. The chart’s height is reduced by an extra 100 pixels, trimming the bottom margin. Data originates from a YouTube dataset, distinct from the UN population source mentioned in the README.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Bar Graph

This horizontal bar chart displays the number of subscribers across different content categories among the top 1000 YouTube channels. The visualization uses React with D3 v5, employing `scaleBand` for categorical y-axis positioning and `scaleLinear` for the quantitative x-axis. Data is loaded via `d3.csv` from a GitHub gist, with the top 12 categories shown. The SVG rendering includes red gridlines and text labels generated through D3’s axis tick methods, while React’s `useState` and `useEffect` manage asynchronous data loading.

SSrujana390
89% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization shows the top 15 YouTube channels by follower count using horizontal bars. The chart renders an SVG with D3 scales for positioning, while React manages the component state and lifecycle. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with the d3.scaleBand and d3.scaleLinear APIs mapping channel names and follower values to screen coordinates. A custom grid of tick marks and labels is drawn manually rather than using d3.axisBottom.

IIndhuKrishnaraj
86% match
Loading thumbnail…

ICE - 7 Pie Chart

This pie chart visualizes the top 10 YouTube channels by genre, with each slice sized according to channel count. The visualization uses D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal()` with `schemeCategory10` for color encoding. Data is loaded from a CSV via `d3.csv` and rendered as SVG paths, with a legend showing each genre and its corresponding channel count. The code sorts the data descending before slicing the top 10 entries.

MMahitha-Moparthi
83% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example displays a bar chart of the top 15 Instagram influencers by follower count, using horizontal bars encoded by channel name on the y-axis and follower totals on the x-axis. Built with React and D3 v5, it loads CSV data from a GitHub gist via `d3.csv` and renders SVG marks and channels using `scaleBand`, `scaleLinear`, and `rect` elements. Axes are drawn manually with `ticks` and grid lines, all managed through React's `useState` and `useEffect` hooks.

NNithish Kumar
82% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example displays the top 20 movies from an IMDB dataset as a horizontal bar chart, where bar length encodes movie rank and each bar is labeled with its numeric rank. Built with React for component state and rendering, it uses D3 v5 APIs such as `csv` for data loading, `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and manual SVG elements for axes and grid lines. The chart updates reactively after the CSV is fetched asynchronously.

Nnsatyaprakash22
81% match
Loading thumbnail…

ICE 6

This example displays a horizontal bar chart of the top 10 most populous countries for 2019, ranked by population count. The visualization uses React with hooks to load CSV data and D3 v5 for scales and rendering, including `scaleBand` and `scaleLinear` for axes, alongside custom SVG elements for bars and gridlines. The dataset is fetched from a GitHub gist and sliced to the first ten entries, with the chart appearing within a React-managed SVG container.

Ssaidhiraj16
81% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the users of OTT platforms as a horizontal bar chart, with each bar’s length encoding the population value. The code uses React’s `useState` and `useEffect` hooks to load CSV data via `d3.csv`, then renders SVG marks using JSX. D3 scales (`scaleBand`, `scaleLinear`) position the bars, while `xScale.ticks()` generates grid lines and tick labels. The data is sourced from a GitHub gist and limited to the first twelve rows.

CCherukuriMilind
81% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of the top 15 movies by Meta_score, sourced from a CSV file of population-by-country data loaded via D3’s `csv` function. Using React with hooks (`useState` and `useEffect`) and D3 scales (`scaleBand`, `scaleLinear`), the SVG renders rectangles for each movie, with axes drawn manually from `xScale.ticks()` and the band domain. The chart demonstrates mark (rect) and channel (length) mapping, with all visualization elements generated in JSX.

TTejaswicmandava
81% match