Fork of ICE6 - Avinash Chinta

100%

Fork of ICE6 - Avinash Chinta

✓ Published0🌍 Public

Last edited Jun 26, 2022

Created on Jun 26, 2022

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.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

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

85% match

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

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

81% match

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

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

79% match

Loading thumbnail…

Fork of Fork of ICE-6 Scatter Plot

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.

Cchandanagandla

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

78% match

Loading thumbnail…

ICE6 - Avinash Chinta

This interactive scatter plot explores the relationship between miles per gallon, horsepower, and weight across different regions of origin, using data from the UCI Machine Learning Repository's Auto MPG dataset. Each circle’s size encodes vehicle weight, while color distinguishes the car’s origin, and hovering reveals the model name. Built with the Vega-Lite API, the visualization registers Vega, Vega-Lite, and Vega-Tooltip to enable interactive tooltips and responsive rendering. The underlying data is fetched asynchronously via d3.csv, with axes configured to exclude the domain line and styled with custom fonts and colors for readability.

Aavinashchinta99

78% match