Fork of Olympic Swimming Project - 0.3

100%

Fork of Olympic Swimming Project - 0.3

✓ Published1🌍 Public

Last edited Nov 16, 2024

Created on Nov 14, 2024

Forked from Olympic Swimming Project - 0.2

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.

AI-generated description

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Olympic Swimming Project - 0.2

This interactive bar chart visualizes the number of gold medals won by the top 10 countries for a selected Olympic swimming event, using data from the Tokyo 2020 Olympics. Users can switch between events via a dropdown menu, which filters the dataset for gold medal winners and aggregates counts by country. The visualization uses D3's `scaleBand` and `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for bar colors, and employs the `xAxis` and `yAxis` helper components from `@curran/axis-labels` for labeling.

AAri Schechter

92% match

Loading thumbnail…

olympic-swimming-project

This interactive visualization presents a bar chart that ranks the top 10 countries by the number of gold medals won in the 100-meter freestyle swimming event at the 2020 Tokyo Olympics. The chart displays each country along the x-axis and its corresponding gold medal count on the y-axis. The data comes from a CSV file containing Olympic swimming results. The visualization is built using D3.js, employing `scaleBand` for the categorical x-axis and `scaleLinear` for the numerical y-axis, with bar marks rendered as `rect` elements.

AAri Schechter

90% match

Loading thumbnail…

Olympic Swimming Project - Final

This interactive bar chart explores Olympic swimming data from 1912 to 2020, showing the top 10 countries by gold medals for a selected event. Users choose an event from a dropdown menu, and the chart updates to display medal counts per country, with hover tooltips revealing each country’s fastest male and female swimmer. The visualization uses D3’s `scaleBand`, `scaleLinear`, and axis components, while an ordinal color scale assigns each country a unique color. Data comes from a CSV file sourced from Kaggle.

AAri Schechter

89% match

Loading thumbnail…

Olympic Swimming Project

The Olympic Swimming Project visualization displays a bar chart showing the count of gold medal winners by country for the 100m freestyle event, with each bar colored distinctly. It processes Tokyo 2020 swimming data from a CSV file, filtering for rank 1 results, then aggregates and ranks the top ten countries. The chart is created using D3's scaleBand for the categorical x-axis, scaleLinear for the numeric y-axis, and scaleOrdinal for bar coloring, with axis labels added via the @curran/axis-labels library. The visualization highlights national dominance in a specific swimming discipline through an accessible, color-coded bar format.

AAri Schechter

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

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

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

79% match