Fork of Fork of ICE-6 Scatter Plot

100%

Fork of Fork of ICE-6 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 23, 2023

This visualization displays a scatter plot of Commonwealth Games data, with each circle representing a country positioned by its first and second place finishing counts. The circles are colored by country—red for the USA, yellow for China, green for Japan, and black for others—with a sky-blue background. The code loads a German Credit CSV dataset, though the visualization appears to plot sports performance metrics, using D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. It renders as an SVG with circle elements, axis labels, and custom tick font styling.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes Olympic Games data, mapping Thirdposition on the x-axis and Total on the y-axis, with each circle’s fill color indicating the country (India, Pakistan, or Australia highlighted, others black). Using D3 v6, the code loads CSV data, applies linear scales via `scaleLinear`, and renders SVG circles with `selectAll().join()`. The axes are generated with `axisLeft` and `axisBottom`, while custom labels rotate text for clarity.

Cchandanagandla

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

83% match

Loading thumbnail…

ICE-6 Scatter Plot

This animated scatter plot visualizes Olympic medal data for top countries, showing the relationship between total medals and gold, silver, or bronze counts. The visualization cycles through different x-axis variables using a setInterval, dynamically updating the scatter plot and axis labels. Built with D3.js version 6.7.0, it uses SVG rendering with custom color-coded markers for USA, China, and Japan. The implementation leverages D3's csv loader, scaleLinear for axes, and custom circle attributes for elliptical data points.

BBhanuMotupalli

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

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

81% match

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes cricket player performance by mapping petal length against petal width, with color-coded species markers and rotated axis labels for runs scored and player names. The visualization loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to compute scales, and renders circles as SVG elements with `d3.selectAll` and `.join`. Axis construction employs `d3.axisLeft` and `d3.axisBottom`, while the D3 v6 library handles data parsing and DOM manipulation within a React framework.

Mmaheganesh

80% match

Loading thumbnail…

Fork of ICE4 cat face

This example shows a scatter plot of country data loaded from a remote CSV file, with circles positioned by country and region values and colored steelblue. The code uses D3 v6’s `d3.csv` to fetch and parse the dataset, then applies `d3.scaleLinear` for both axes and appends circles via `d3.selectAll().data().enter()`. SVG rendering is used, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Ggaddamthanmayeereddy759@gmail.com

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

79% match