Skip to main content
SimilarExport ZIP
100%

Brushable bar chart of total Olympic Medals from 2020 Tokyo Olympics

✓ Published0🌍 Public
TT-Reiser
Last edited Oct 21, 2021
Created on Oct 21, 2021

This brushable bar chart displays the total Olympic medals earned by each country at the 2020 Tokyo Olympics. It uses a mini overview to brush a range of medal counts, which in turn highlights the corresponding bars in the main chart, providing a focused comparison of top-performing nations. The visualization is built with D3.js v3 and rendered as SVG, using `d3.scale.linear` for axial scaling and `d3.svg.axis` for axes. Data is loaded from a CSV file, and the chart is inspired by an example by Ming Liu.

AI-generated description

Brushable bar chart of Yelp data: amount of restaurants in cities

This is a brushable bar chart presenting the total number of Oylmpic medals earned by a country in the 2020 Tokyo Olympics

Inspired by a great example of brushabe bar chart by Ming Liu.

*This is a part of week 8 assignment: Make Something with Brushing

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar chart for the olympic medals

This bar chart shows the number of Olympic medals won by the top 10 countries, with countries on the y-axis and medal counts on the x-axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Axes are customized using `d3.axisLeft` and `d3.axisBottom`, with grid lines and a custom tick format. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and the chart includes axis labels and a title.

Aakhil kata
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
77% 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
75% match
Loading thumbnail…

Version one: Medal Count in Multiple Views with Fast Brushing

Two linked views show Olympic medal counts by country from 2000 to 2014. A world map uses d3.geoNaturalEarth1 and d3.geoPath to render triangular markers sized by total medals, colored by year, while a time histogram below bins medal counts by month using d3.histogram. A d3.brushX selection filters the map to the brushed date range. The visualization uses React with d3.v5, rendering as SVG, with data from a CSV of per-athlete medal counts.

RRuofan Chen
75% match
Loading thumbnail…

Version two: Medal Count in Multiple Views with Fast Brushing

This interactive dashboard combines a bubble map and a time-series histogram to explore Olympic medal counts by country from 2000 to 2014. A brushed time window filters the map, showing only medals from that period as triangular marks scaled by count and colored by year. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map, a brushX histogram for filtering, and CSV data from a gist.

RRuofan Chen
75% 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
75% match
Loading thumbnail…

Bar Chart Race

An animated bar chart race tracks total Summer Olympic medals earned by each country from 1896 onward. The visualization smoothly interpolates bar positions and widths between yearly data snapshots using D3 transitions applied to SVG rectangles, with a reusable join pattern for entering, updating, and exiting elements. A ticker and axis labels update along with the bars, driven by a data-driven keyframe generator. The chart also displays country name labels and animated value counts by leveraging D3’s `transition` and text-tweening, with a replay button to restart the sequence.

AAniketShahane
74% 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
74% match