Activity6_question3

100%

Activity6_question3

✓ Published0🌍 Public

Last edited Apr 14, 2024

Created on Apr 14, 2024

Forked from Fork of Olympic Data stacked Bar Graph

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.

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

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

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

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

79% match

Loading thumbnail…

Act6_Q4.9

A bubble chart displays Paralympic medal counts by country, plotting total medals on the x-axis and gold medals on the y-axis. Circle size encodes total medals, while color distinguishes countries, with a legend listing all nations. The visualization uses D3 v7’s selection methods and scaleOrdinal for color mapping, plus linear scales for positioning and radius. Animated tooltips reveal silver and bronze counts on hover. Data comes from the provided CSV file, rendered as SVG circles with mouseover and mouseleave event handlers for interactivity.

Ggalijawaharnath@gmail.com

78% match

Loading thumbnail…

Activity6_question 2

This interactive stacked bar chart visualizes the population distribution across religious affiliations for 20 countries, sourced from a CSV file. Users can hover over either the legend or the stacked bars to highlight a specific religion, with non-matching segments fading to low opacity. The visualization uses D3's `scaleOrdinal` for colors, `stack()` for creating the stacked segments, and `scaleBand` for the categorical country axis. A custom `colorLegend` module handles the interactive hover states, while `@curran/responsive-axes` manages the axes and labels.

Ssasidhharreddy@gmail.com

77% match

Loading thumbnail…

Activity-6-Question-2

A stacked bar chart shows the percentage of student ratings across six subjects, with each bar segmented into five rating bands from "below 60%" to "above 90%". The chart uses `d3.stack()` to compute the layered data and `d3.scaleOrdinal()` for color encoding. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment. The visualization is rendered as an SVG with axes created via `d3.axisLeft()` and `d3.axisBottom()`, reading data from a local CSV file.

Nnaveen.dodda4321@gmail.com

77% match

Loading thumbnail…

Activity6-Question2

This stacked bar chart depicts the percentage distribution of chocolate ratings across five categories, from "below 5.0" to "above 8.5," for six chocolate brands. Each brand forms a horizontal bar with colored segments representing the proportion of ratings in each category, using a diverging color scheme. Built with D3 v7 and rendered as SVG, the visualization uses `d3.stack()` to generate the stacked data and `d3.scaleOrdinal` for colors, with interactivity via mouseover events that display exact percentages in a tooltip. The chart reads from the CSV file, with axes labeled "Percentage" and a manual legend positioned to the right.

Ggreeshmareddy135@gmail.com

76% match