ICE6 - Avinash Chinta

100%

ICE6 - Avinash Chinta

✓ Published0🌍 Public

Last edited Jun 26, 2022

Created on Jun 26, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

ICE6 - Avinash Chinta

This scatter plot visualizes Olympic medal counts by country, using the Data Canvas Sense Your City dataset. The visualization displays each country's total medals on the x-axis against its name on the y-axis, with individual data points rendered as circles. Built with React and D3 v5, the code implements d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, while SVG circles with tooltip titles show precise medal values on hover. The chart includes labeled axes and a distinct teal color scheme for data marks.

Aavinashchinta99

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

90% match

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot displays Olympic medal data, comparing each country’s total medals against its bronze medal count. Each circle’s fill color encodes the country (orange for USA, blue for China, green for Japan, black otherwise), while the circle’s `rx` and `ry` attributes visually encode gold and silver medal counts, respectively. Built with React and D3 v6, it loads CSV data, uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for axes, and renders SVG circles via `select` and `.join`. The plot includes rotated axis labels for silver and gold medals.

BBhanuMotupalli

85% match

Loading thumbnail…

Fork of ICE6 - Avinash Chinta

This visualization displays the relationship between countries and their total medal counts using a circular scatter plot, with each point representing a country positioned along the y-axis and its medal total along the x-axis. The code uses the vega-lite-api to construct the chart, registering with vega, vega-lite, and vega-tooltip for interactive hover details. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the Auto MPG dataset, while the visualization renders to SVG with a customized dark theme and transparent background.

Aavinashchinta99

85% match

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

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

83% match

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

83% match

Loading thumbnail…

ICE7 - Scatter Plot

The visualization is an animated scatter plot of Olympic medal data, using D3.js to render colored, elliptical circles that represent countries by their gold, silver, bronze, and total medal counts. It cycles through different x-axis variables on a timer, updating the scales and axes dynamically. The plot uses D3's `csv` loader for data parsing, `scaleLinear` for axes, and custom SVG circles with hardcoded color mappings for USA, China, and Japan within a `setInterval` loop.

Aavinashchinta99

83% match