Fork of Olympic Data stacked Bar Graph

100%

Fork of Olympic Data stacked Bar Graph

✓ Published6🌍 Public

Last edited Apr 8, 2024

Created on Apr 8, 2024

Forked from 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.

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

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

87% match

Loading thumbnail…

Fork of Fork of Olympic Data stacked Bar Graph

A stacked bar chart visualizes a subset of Olympic student performance data, plotting gender-race/ethnicity combinations against stacked score components for math, parental education level, and writing. The visualization uses D3.js v7’s `d3.stack()` with a diverging offset, `d3.scaleBand` for the categorical x-axis, and `d3.scaleLinear` for the y-axis, rendered as SVG rectangles. Data is loaded via `d3.csv` from a GitHub gist, sorted and truncated to the top 20 entries, with axes, rotated labels, and a legend created through D3’s axis and selection APIs.

Ssamithareddy9@gmail.com

82% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays Olympic medal counts for the top 10 countries, with orange bars labeled by country and an x-axis showing medal totals in abbreviated format. The data comes from a CSV file loaded via `d3.csv`. The visualization demonstrates axis customization using `d3.axisLeft` and `d3.axisBottom` with `d3.scaleLinear` and `d3.scaleBand`, including custom tick formatting, tick lines in green, and rotated labels. The chart renders in SVG with a red title and axis labels styled through CSS.

Nnagamaheswar

82% match

Loading thumbnail…

Fork of Olympic Swimming Project - 0.3

This interactive bar chart displays the number of gold medals won by the top ten countries for a selected Olympic swimming event. A dropdown menu lets users choose among events like 100m Freestyle or 200m Breaststroke, and the chart updates accordingly. The visualization uses d3's `scaleBand` and `scaleLinear` for axes, `select` for DOM manipulation, and bar marks with hover states that dim non-hovered bars. Data comes from the included CSV file containing medal results from the Tokyo 2020 Olympics.

AAri Schechter

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

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

80% match

Loading thumbnail…

Fork of Fork of Olympic Swimming Project - 0.4

This interactive bar chart displays the number of gold medals won by the top 10 countries in a selected Olympic swimming event, based on data from the 2020 Tokyo Olympics. Users can choose an event—such as a stroke, distance, or relay—via a dropdown menu, which updates the chart and its title. The visualization also includes a tooltip showing the fastest male and female swimmer for each country, along with their medal counts. Built with D3.js, the visualization uses `scaleBand` and `scaleLinear` for the chart layout, `scaleOrdinal` for color coding, and interactive details-on-demand tooltips.

AAri Schechter

79% match