Bar hover

100%

✓ Published0🌍 Public

Last edited Mar 19, 2024

Created on Feb 20, 2024

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.

AI-generated description

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

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

83% match

Loading thumbnail…

Fork of Responsive Axes

This visualization presents a horizontal bar chart ranking the top ten countries by total Olympic medals, using data from the `@akankshapawar1/olympics` package. The chart’s key feature is its responsive axes, which maintain consistent tick mark density as the window resizes. It uses a `ResizeObserver` to capture viewport dimensions and dynamically adjusts the number of ticks passed to `axisBottom` and `axisLeft` from D3, ensuring the axis labels never become overly crowded or sparse. The example highlights a reusable technique for creating axes that adapt gracefully to any screen size.

AAkanksha

80% match

Loading thumbnail…

Vertical Bar chart

A vertical bar chart displays the top five countries by total Olympic gold medals from 1896 to 2018, sourced from Wikipedia via a CSV file. Using React and D3 v6, the visualization renders SVG rectangles with scales from `scaleBand` and `scaleLinear`. Custom axis components generate tick labels and grid lines, while the data is loaded asynchronously and sorted in `useData`.

Kkragovic

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

78% match

Loading thumbnail…

ICE-6 Bar Graph

This example shows the Olympic medal count for the top 12 countries as a horizontal bar graph, with red gridlines along the x-axis and country labels on the y-axis. The visualization loads data from a CSV file and renders the bars as SVG rectangles sized by each country’s total medal count. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` for data loading, with `select` and `axisLeft`/`axisBottom` available but not applied directly.

RRamya19-hub

78% match

Loading thumbnail…

Winter olympics bar chart

This bar chart shows the top 10 countries by total medals (gold, silver, and bronze) across all Winter Olympics from 1924 to 2018. The data is aggregated from the `@akankshapawar1/olympics` dataset. It uses d3's `scaleBand` and `scaleLinear` to position bars, with axis labels from `@curran/axis-labels`. The visualization renders green bars on a white inner rectangle, highlighting the leading nations' medal counts.

AAkanksha

78% match

Loading thumbnail…

Version one: Medal by Discipline in top 10 Countries

A linked bar and pie chart visualizes medal counts by discipline for the top 10 Olympic countries. Hovering over a country's bar triggers an animated pie chart showing that country's medal distribution across disciplines, using `d3.pie` and `arc` with a `transition.attrTween` for animation. The bar chart uses `d3.scaleBand` and `d3.scaleLinear`, while a custom `colorLegend` function renders the categorical color scale. Data comes from Kaggle’s Olympic Games dataset, counted by individual athletes rather than events.

RRuofan Chen

77% match