Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Olympic Data stacked Bar Graph

✓ Published0🌍 Public
MM
Last edited Apr 10, 2024
Created on Apr 10, 2024

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.

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
87% match
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
85% 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
85% 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
83% match
Loading thumbnail…

Fork of Fork of Olympic Data stacked Bar Graph

This stacked bar chart visualizes population data for U.S. states, with each bar segmented by color to show the proportional contribution of different data categories. The visualization uses a horizontal layout where bar lengths are scaled linearly against population values. Built with the d3 library, the chart employs `scaleLinear`, `scaleBand`, `stack`, and `flatRollup` to process and arrange the data. The color legend supports interactive hover effects, allowing viewers to highlight specific categories within the stacked bars. Data comes from a CSV file loaded directly from a GitHub gist.

MM
83% match
Loading thumbnail…

Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart visualizes the estimated per-continent population and total COVID-19 case counts from a local CSV file for the year 2010, using an ordinal color scale to represent continents. The visualization is built with D3 and implements a custom `colorLegend` component that enables hovering over legend items to highlight corresponding segments in the stacked bars. The chart also incorporates responsive axes and a stacking algorithm that groups data by continent, with interactive fading and stroke emphasis applied to the selected category.

DDivyaKota2@my.unt.edu
81% match
Loading thumbnail…

Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart visualizes the estimated per-continent population and total COVID-19 case counts from a local CSV file for the year 2010, using an ordinal color scale to represent continents. The visualization is built with D3 and implements a custom `colorLegend` component that enables hovering over legend items to highlight corresponding segments in the stacked bars. The chart also incorporates responsive axes and a stacking algorithm that groups data by continent, with interactive fading and stroke emphasis applied to the selected category.

DDivyaKota2@my.unt.edu
81% match
Loading thumbnail…

Fork of Fork of Fork of Interactive Stacked Bar Chart

This stacked bar chart visualizes the estimated per-continent population and total COVID-19 case counts from a local CSV file for the year 2010, using an ordinal color scale to represent continents. The visualization is built with D3 and implements a custom `colorLegend` component that enables hovering over legend items to highlight corresponding segments in the stacked bars. The chart also incorporates responsive axes and a stacking algorithm that groups data by continent, with interactive fading and stroke emphasis applied to the selected category.

DDivyaKota2@my.unt.edu
81% match