ICE 6

100%

ICE 6 - Likith Chowdary Nuthi

✓ Published1🌍 Public

Last edited Mar 8, 2022

Created on Mar 4, 2022

Forked from ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 10 countries by Olympic gold medal counts using a horizontal bar chart. The chart is built with React components and D3.js, specifically using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gold medal values are loaded from a CSV file via `d3.csv`, with the data sliced to ten entries. Each bar is rendered as an SVG `<rect>` element, with gridlines and axis labels generated through D3’s tick methods.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of ICE 6 - Likith Chowdary Nuthi

This bar chart displays the gold medal counts for the top 10 countries from a CSV dataset of Olympic medal records. The visualization uses D3.js version 5 within a React application, employing `scaleBand` for the categorical country axis and `scaleLinear` for the numeric gold medal axis. The SVG output renders orange bars with green gridlines and axis labels. Data is loaded asynchronously using D3’s `csv` function, and React’s `useState` and `useEffect` hooks manage the data loading and rendering process.

SSheshidharreddy

90% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the number of gold medals won by the top ten countries in the Tokyo Olympics, using a horizontal bar chart ordered from highest to lowest medal count. The chart is rendered as SVG within a React application, with D3 v5 handling data loading via `d3.csv`, scaling through `scaleBand` and `scaleLinear`, and gridline creation with `xScale.ticks`. Each rectangular bar uses a distinct fill color from a hardcoded array, with the data sourced from a remote CSV file.

AAmanullah007

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

86% match

Loading thumbnail…

ICE6 - Avinash Chinta

This visualization displays Olympic medal data for multiple countries, plotting each nation as a circle based on its total medals and bronze medal count. The color and size of each circle vary according to the country’s gold and silver medal tallies. Built with React and D3 v6, the code uses `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and scale data from a GitHub-hosted CSV, then renders the result as SVG circles with labels.

Aavinashchinta99

84% match

Loading thumbnail…

ICE-6(Sai Nitish): Rendering Marks and Channels with React & D3

This example displays the top 20 countries by gold rates, using horizontal bars where length encodes the population value and the y-axis lists country names. Built with React and D3, it loads CSV data via `d3.csv`, scales positions with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles for bars plus axis ticks and labels. The visualization is rendered entirely as SVG elements, with data fetched from a GitHub gist and displayed in a React component using `ReactDOM.render`.

Ssainitish1999

83% match

Loading thumbnail…

ICE-6: Avinash Chinta

A horizontal bar chart displays total medal counts for twelve countries in the Tokyo Olympics, with country names on the y-axis and medal totals on the x-axis. Built with React and rendered as SVG, the visualization uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, and bars are drawn as `rect` elements with a green fill.

Aavinashchinta99

83% match

Loading thumbnail…

ICE - 6

This visualization displays the top 10 most populous countries using a horizontal bar chart rendered with SVG in React. It loads population data from a CSV file via `d3.csv`, then uses `d3.scaleBand` and `d3.scaleLinear` to map states and population values to bar positions and lengths. The chart includes custom grid lines, axis tick labels, and styled bars, with dynamic data loading handled through React hooks (`useState`, `useEffect`).

KKolliTeja

82% match

Loading thumbnail…

This example displays a horizontal bar chart of the top 10 most populous countries for 2019, ranked by population count. The visualization uses React with hooks to load CSV data and D3 v5 for scales and rendering, including `scaleBand` and `scaleLinear` for axes, alongside custom SVG elements for bars and gridlines. The dataset is fetched from a GitHub gist and sliced to the first ten entries, with the chart appearing within a React-managed SVG container.

Ssaidhiraj16

82% match