Skip to main content
SimilarExport ZIP
100%

Olympic Data stacked Bar Graph

✓ Published1🌍 Public
AAkanksha
Last edited Apr 16, 2024
Created on Apr 5, 2024

This stacked bar chart displays Olympic medal counts by country, with each bar segmented into Gold, Silver, and Bronze using a D3 ordinal color scale. Hovering over the interactive side legend highlights the corresponding medal segment across all bars while dimming others. The visualization relies on D3's `flatRollup` and `stack` utilities for data aggregation and stacking, with axes generated by the `@curran/responsive-axes` library.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Olympic Data stacked Bar Graph

This example shows Olympic medal counts for countries as a horizontal stacked bar chart, with Gold, Silver, and Bronze segments colored using a d3 ordinal scale. Hovering over a legend item highlights that medal type in the bars while fading others. The visualization uses d3.stack for data transformation, d3.scaleBand and d3.scaleLinear for axes, and custom mouseenter/mouseleave handlers to update a hovered state, re-rendering the chart with adjusted opacity and stroke.

EElena Momtcheva
90% match
Loading thumbnail…

data for stacked

This interactive visualization shows the total medal counts for each country in the Winter Olympics from 1924 to 2018, using a bar chart where each country's total is broken down into gold, silver, and bronze segments. The data is sourced from a CSV file containing historical medal records. The implementation uses JavaScript to load and aggregate the data, then displays a single data entry as formatted JSON text, showcasing the preprocessing and transformation logic with plain text output.

AAkanksha
86% match
Loading thumbnail…

data for stacked bar

This example visualizes the total number of Olympic medals won by each country for each Winter Games year, broken down by gold, silver, and bronze counts. A stacked bar chart displays the medal distribution across countries and years, with each bar segment representing a medal type. The code loads a CSV dataset from the Winter Olympic Medals 1924–2018 Kaggle dataset, converts numeric fields, and uses `d3.rollup` to group and sum medal counts by year and country. The flattened data structure is then prepared for rendering, though the main function currently outputs a sample data object as JSON text rather than drawing the chart.

AAkanksha
85% match
Loading thumbnail…

Fork of Fork of Olympic Data stacked Bar Graph

This visualization displays Olympic medal data as a stacked bar chart, breaking down participation by continent (Asia, Africa, Americas, Europe) for each year. The chart uses color-coded segments to compare continental contributions, with an interactive color legend that highlights and fades specific regions on hover. The implementation uses several D3 libraries including `d3.flatRollup`, `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` for rendering. Data is fetched asynchronously from a CSV source hosted on GitHub, then parsed with `csvParse`. Custom helper modules like `colorLegend` and responsive axes from `@curran/responsive-axes` handle interactive elements and layout adjustments.

MM
85% match
Loading thumbnail…

Task-8

This visualization shows Olympic medal counts by country using an interactive stacked bar chart. Hovering over the color legend highlights the corresponding medal category and dims the others. The chart uses D3’s `scaleLinear`, `scaleBand`, and `stack` to create bars, with a `flatRollup` grouping data by country and medal type. A custom `colorLegend` module handles mouse interactions, adjusting opacity and stroke width. The data source is `transformedData` from an external module, rendered responsively with `observeResize`.

Rravularasesh3102@gmail.com
84% match
Loading thumbnail…

Act6_Q2

This visualization displays the top 10 countries by total Olympic medal count using a horizontal stacked bar chart. Each bar represents a country’s medal distribution across gold, silver, and bronze categories. Built with D3 v7, the code uses `d3.stack`, `d3.scaleLinear`, `d3.scaleBand`, and `d3.scaleOrdinal` to structure and color the data, while `d3.axisLeft` and `d3.axisBottom` render the axes. A hover tooltip shows exact medal counts per category. The data comes from the provided `paradata.csv` file.

Ggalijawaharnath@gmail.com
83% match
Loading thumbnail…

Bar hover

A bar chart shows total Olympic medals for the top ten countries, using a dataset from the `@akankshapawar1/olympics` package. D3’s `scaleBand` and `scaleLinear` position the bars, while hover interactions change their fill color between black and gray via React state. The chart includes axis labels and uses d3’s `axisLeft` and `axisBottom` for ticks, with a ResizeObserver for responsive sizing.

AAkanksha
82% match
Loading thumbnail…

Activity6_question3

This interactive stacked bar chart displays the medal counts for different countries, with each bar segmented by medal type (Gold, Silver, Bronze). Users can hover over the color legend to highlight the corresponding segments within the chart, dimming the others. The visualization uses D3.js to construct the chart, employingscaleOrdinal for color assignment and a custom colorLegend to manage interactive filtering. Hovering over a legend item adjusts the stroke and opacity of the matching bar segments, providing a clear and engaging way to explore the data.

Aanushapodapati99@gmail.com
82% match