Skip to main content
SimilarExport ZIP
100%

Mahendra Gullinkala Bonus IC

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Mahendra Gullinkala Bonus IC

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.

MMahendraGullinkala
96% 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
68% 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
67% 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
67% match
Loading thumbnail…

Assignment ICE-6 Bar Graph

This bar chart visualizes the investment of money across different ages, comparing values for twelve countries using a horizontal layout. It loads CSV data from a GitHub gist and renders an SVG with React, using D3 v5 scales (`scaleBand` for the y-axis, `scaleLinear` for the x-axis). The code draws gridlines, tick labels, and rectangles for each bar, with axis positioning handled through SVG transforms and D3’s axis utilities.

HHema1430
66% 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
66% match
Loading thumbnail…

transition of bar chart

This interactive bar chart compares the proportions of different age brackets across U.S. states, using a dropdown menu to switch between age groups. Built with D3 v4 and rendered as SVG, the visualization animates horizontal bars as the selected age bracket changes, with bars transitioning vertically, resizing horizontally, and labels and value texts updating smoothly. The chart is based on data from a CSV file, normalizing each state's population by age bracket to percentages, and displays the top 10 states for the selected age group. Interactivity includes a dropdown menu and a keyboard modifier (Alt) to control animation speed, with a default auto-advance after 5 seconds.

663anp3ca
65% 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
65% match