Skip to main content
SimilarExport ZIP
100%

Fork of ICE 6 - Likith Chowdary Nuthi

✓ Published0🌍 Public
SSheshidharreddy
Last edited Mar 8, 2022
Created on Mar 8, 2022

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 6 - Likith Chowdary Nuthi

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.

Llikith1266
90% 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…

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

This visualization displays a horizontal bar chart of the top 10 most populous countries in 2019, using React and D3 v5. The code fetches CSV data from a GitHub gist and renders SVG marks with React components, while D3’s `scaleBand`, `scaleLinear`, `csv`, and `max` handle data loading and scaling. Axes are drawn manually from `xScale.ticks()` and y-scale domains, with bars encoded by rectangular marks. The React `useState` and `useEffect` hooks manage asynchronous data loading before rendering the chart.

SSheshidharreddy
85% match
Loading thumbnail…

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

This visualization displays a horizontal bar chart of the top 10 most populous countries in 2019, using React and D3 v5. The code fetches CSV data from a GitHub gist and renders SVG marks with React components, while D3’s `scaleBand`, `scaleLinear`, `csv`, and `max` handle data loading and scaling. Axes are drawn manually from `xScale.ticks()` and y-scale domains, with bars encoded by rectangular marks. The React `useState` and `useEffect` hooks manage asynchronous data loading before rendering the chart.

SSheshidharreddy
85% match
Loading thumbnail…

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

This bar chart displays the top 10 most populous countries from a 2019 CSV dataset, using horizontal bars to compare population sizes. Built with React and D3 v5, the visualization renders SVG marks and channels, with x and y scales created via `d3.scaleLinear` and `d3.scaleBand`. The code loads data using `d3.csv`, maps population values, and generates SVG rectangles, axis ticks, and labels through React components, supported by `d3.axisLeft` and `d3.axisBottom` for coordinate reference.

SSheshidharreddy
85% match
Loading thumbnail…

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

This visualization displays the top 10 most populous countries as a horizontal bar chart rendered with SVG. The chart uses React with hooks `useState` and `useEffect` to load and manage CSV data from a GitHub gist, while D3 v5 provides `csv`, `scaleBand`, and `scaleLinear` for data parsing and scaling. Interactive features include grid lines and axis tick labels generated with D3's `scaleLinear.ticks()`. The bars visually encode population values through their width, with country names positioned along the y-axis.

RRakshithaRao27
84% match
Loading thumbnail…

Fork of ICE-6

A horizontal bar chart displays the top 10 most populous countries for 2019, loaded from a CSV via `d3.csv`. The React component uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.max` to set the domain. Rendered as an SVG, the chart draws blue vertical gridlines and rectangles for each country, with axis labels and tick marks generated from D3’s scale methods.

Ssowmyanagula@my.unt.edu
84% 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
84% match