Skip to main content
SimilarExport ZIP
100%

Mahendra Gullinkala Bonus IC

✓ Published1🌍 Public
MMahendraGullinkala
Last edited Apr 4, 2023
Created on Apr 4, 2023

A bar chart displays savings values across age groups from 20 to 38, with animated highlighting on hover. The visualization uses d3.v5 with SVG rendering, employing d3.scaleBand and d3.scaleLinear for axes. Hover interactions trigger transitions that enlarge the selected bar, draw a dashed reference line, and display divergence values between the hovered age and all others. Data comes from a hardcoded sample array, with axis labels and grid lines styled via CSS.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Mahendra Gullinkala Bonus IC

This bar chart visualizes savings growth across age groups, from age 20 to 38, with each bar representing savings in dollars. Built with D3 v5, the visualization renders as an SVG with interactive hover effects that highlight the selected bar and display the difference between that bar and all others. The chart uses D3's scaleBand and scaleLinear for the axes, with animated transitions on mouse enter and leave events to alter bar opacity, position, and width.

MMahendraGullinkala
96% match
Loading thumbnail…

Fork of Mahendra Gullinkala Bonus IC

A bar chart compares savings amounts across age groups from 20 to 38, using sample data embedded in the code. Hovering over a bar highlights it and draws a dashed reference line, while displaying the numerical difference between the hovered bar and each other bar. The visualization uses d3.v5 with SVG rendering and animated transitions on mouseenter and mouseleave events. Axes, grid lines, and labels are generated via d3.scaleBand, d3.scaleLinear, and d3.axisLeft/axisBottom, with a red background container and black bars.

SSushmaNamidi@my.unt.edu
92% match
Loading thumbnail…

Mahendra Gullinkala - IC6

A horizontal bar chart displays the highest individual scores for 20 cricket players, ranked by name along the y-axis and score magnitude along the x-axis. The visualization uses React to manage state and lifecycle, loading CSV data via d3.csv and parsing numeric values on input. d3.scaleBand and d3.scaleLinear map player names and scores to SVG rectangles, while gridlines and axis tick labels are generated manually using xScale.ticks() and d3’s axis formatting utilities. The chart updates reactively when data arrives, with a red vertical gridline marking each tick value.

Mmaheganesh
73% match
Loading thumbnail…

Average Mark for each module

This bar chart displays the average marks for each age group from 18 to 69, sourced from the attend_data.csv file. It uses D3 v4 with SVG rendering and animated transitions, where bars sequentially grow in height. Hovering over a bar triggers a mouseover event that highlights it in orange, enlarges it, and displays its exact value, while mouseout restores the original state. The chart includes axes with percentage tick labels and custom styling.

BBrahmareddym1996
71% match
Loading thumbnail…

Average Mark for each module

This bar chart displays the average marks for each age group from 18 to 69, sourced from the attend_data.csv file. It uses D3 v4 with SVG rendering and animated transitions, where bars sequentially grow in height. Hovering over a bar triggers a mouseover event that highlights it in orange, enlarges it, and displays its exact value, while mouseout restores the original state. The chart includes axes with percentage tick labels and custom styling.

BBrahmareddym1996
71% match
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the distribution of colors in a sample dataset, with each bar representing a color percentage and labeled with its value. The D3.js v5 example uses an SVG rendering approach with interactive hover effects that highlight the selected bar, display a red dashed threshold line, and show divergence percentages between the hovered color and others. Built with `d3.scaleBand` and `d3.scaleLinear` for axes, the chart includes grid lines, a title, and axis labels, with animations driven by `transition` for bar highlighting and opacity changes on mouse events.

GGogineni44
70% match
Loading thumbnail…

Mahendra Gullinkala - IC6

This visualization shows the highest runs scored by each of the top 20 cricket players, displayed as a horizontal bar chart with player names on the y-axis and run values on the x-axis. The chart uses React and D3 v5 to fetch CSV data from a GitHub gist, process it, and render SVG bars. D3’s `scaleBand` and `scaleLinear` handle the axis mappings, while `axisLeft`, `axisBottom`, and `max` are imported for layout and scaling calculations. The bars are drawn as SVG rectangles, with red tick gridlines and labels generated from the linear scale’s ticks.

Mmaheganesh
70% 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
69% match