Interactive Bar Chart Bonus ICE

100%

Interactive Bar Chart Bonus ICE

✓ Published0🌍 Public

Last edited Apr 6, 2023

Created on Apr 6, 2023

This interactive bar chart displays the share of subscribers across YouTube channel categories, using a sample dataset. Hovering over a bar dims it, highlights its value with a dashed reference line, and labels every other category with its percentage difference from the selected one. The visualization uses D3 v5 with a React scaffold, rendering SVG bars with mouseenter and mouseleave handlers, value text, axes, and grid lines via d3.axisBottom and d3.axisLeft.

AI-generated description

React Starter code.

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

85% match

Loading thumbnail…

Bonus ICE

This example visualizes genre and YouTube video upload count per month using an interactive 3D bar chart. It displays multi-series data with each genre represented as a group of bars for the months January through May. The visualization is built with React, using d3.v5 for data processing and the d3-x3d library to render the 3D scene. Data is loaded from a CSV file via d3.csv, parsed, then passed to the chart holder through the barChartMultiSeries component. The X3DOM library handles the 3D rendering in the browser.

MMahitha-Moparthi

80% match

Loading thumbnail…

Interactive Bar Chart Bonus ICE

An interactive bar chart displays sales percentages for ten video game genres, from Racing at 78.9% to Misc at 59.6%. Built with D3.js v5, the SVG chart uses a custom `d3.scaleBand` and `d3.scaleLinear` for axes. Hovering a bar triggers a transition that dims and expands the bar, adds a dashed limit line at the hovered value, and annotates each bar with its percentage difference from the selected genre, using `d3.select` and `.attr('opacity')`. The data is a sample of the Video Game Sales Dataset.

MManohar Kowthavarapu

79% 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

77% match

Loading thumbnail…

bar chart from bonus ice

An interactive bar chart displays global sales figures for ten video games and programming languages, with hover highlighting that reveals the percentage difference between the selected bar and all others. Built with React and D3 v5, the visualization uses SVG rendering and transitions to animate bar opacity and width changes on mouse events. D3 scales (`scaleBand`, `scaleLinear`) drive the axes, while grid lines and axis generators (`d3.axisLeft`, `d3.axisBottom`) structure the layout. A dashed horizontal line and divergence labels appear on hover, with data sourced from a hardcoded sample array containing names, sales values, and colors.

TTejamod

76% match

Loading thumbnail…

ICE - 6

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.

MMahitha-Moparthi

76% match

Loading thumbnail…

Bar chart Interactive

This interactive bar chart displays the "love meter" percentages for various programming languages, allowing users to hover over a bar to see its value highlighted with a reference line and divergence labels. The visualization uses D3.js v5 within a React environment, rendering SVG elements with animation transitions. It employs `d3.scaleBand`, `d3.scaleLinear`, and axes for structured plotting, while mouse events trigger opacity changes, bar enlargement, and the temporary display of difference annotations. The data is embedded directly in the code, inspired by the Stack Overflow 2018 developer survey.

KKeerthipriyaBankuru

75% match

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and a pie chart to explore categorical data across different regions. Hovering over a bar filters the pie chart and legend to show the breakdown of sub-categories for that region. The visualization uses D3.js (v3) to render SVG elements with animated transitions, and is built within a React framework. The bar chart displays frequencies for each region, while the pie chart and legend update dynamically to reflect the selected region's distribution, using mouseover and mouseout events to trigger the updates.

Vvans01

75% match