Task-8

100%

✓ Published0🌍 Public

Last edited Apr 10, 2024

Created on Apr 10, 2024

Forked from Fork of Olympic Data stacked Bar Graph

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`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Olympic Data stacked Bar Graph

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.

AAkanksha

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

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

81% match

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

80% 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.

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

77% match

Loading thumbnail…

Bar chart

A horizontal bar chart displays Olympic medal counts for ten countries, sourced from data.csv. Using the React framework and D3 v5, the visualization maps medal counts to bar widths via a linear scale and country names to vertical positions via a band scale. The SVG rendering includes axes created with axisLeft and axisBottom, with bars styled as rect elements. Data is loaded and parsed asynchronously with csv, converting medalCount values to numbers for quantitative scaling.

KKams2015

76% match

Loading thumbnail…

Version one: Medal by Discipline in top 10 Countries

A linked bar and pie chart visualizes medal counts by discipline for the top 10 Olympic countries. Hovering over a country's bar triggers an animated pie chart showing that country's medal distribution across disciplines, using `d3.pie` and `arc` with a `transition.attrTween` for animation. The bar chart uses `d3.scaleBand` and `d3.scaleLinear`, while a custom `colorLegend` function renders the categorical color scale. Data comes from Kaggle’s Olympic Games dataset, counted by individual athletes rather than events.

RRuofan Chen

75% match