Pavan ICE-6

100%

✓ Published0🌍 Public

Last edited Mar 20, 2024

Created on Mar 20, 2024

This example displays a bar chart of sports data showing the number of players per team. It uses a green horizontal bar fill for each team, with the player count displayed as text next to the bar. The chart is built with vanilla JavaScript, using the Fetch API to load a CSV file from a GitHub gist, and dynamically creates HTML elements with inline styles to render the bars. The data is sourced from a CSV containing team names and player counts.

AI-generated description

CSCE 5320.002 Scientific Data Visualization (ICE-6)

Bar Chart

Pavan Krishna Yarlagadda (11600263)

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CSCE-5320 ICE-6

This example shows a horizontal bar chart of the top ten cricket players by total runs, with green gridlines and labeled axes. It loads CSV data from a GitHub gist, slices the dataset to the first ten rows, and renders the bars as SVG rectangles using React. The visualization uses `scaleBand` for the player categories and `scaleLinear` for the run values, with `axisBottom` and `axisLeft` omitted in favor of manual tick generation via `xScale.ticks()`. Styling is applied through inline SVG attributes and CSS in the HTML file.

Cchandrakalavanukuri

75% match

Loading thumbnail…

ICE 6: Bar Chart Styling

This visualization displays the length of each game played from a CSV dataset, using a horizontal bar chart where each bar represents a game. The chart is built with React and D3 v5, employing scales from `d3.scaleBand` and `d3.scaleLinear` to map game numbers and lengths to screen coordinates. SVG rectangles are rendered for the bars, while custom tick marks and labels are generated manually using D3’s `scaleLinear.ticks()` and the band scale domain. Data is loaded asynchronously via `d3.csv`, and the chart is styled with green gridlines and blue text.

SSatyaVineeth

74% match

Loading thumbnail…

Fork of ICE6

This example shows a bar chart of the number of colors associated with each college sports team, aggregating the data from a flat list of team-color-count entries. It uses the Chart.js library to render the chart onto a canvas element, with team names on the x-axis and the aggregated color counts on the y-axis. The data is processed by first grouping entries by team and summing their counts, then feeding the resulting arrays into a bar chart configuration with a sky-blue background color.

Cchamarthisreenivasvarma@gmail.com

74% match

Loading thumbnail…

Ice-6

This example displays a horizontal bar chart of cricket batsmen’s number of not-outs in test matches, with player names on the y-axis and the count on the x-axis. The visualization uses D3 v5 with an SVG renderer, employing `d3.scaleLinear` and `d3.scaleBand` for scales and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded from a CSV file via `d3.csv`, and each number of not-outs is parsed as a numeric value before rendering the bars.

Ppeesarie

72% match

Loading thumbnail…

Bar graph-Praveen

This bar graph visualization displays cricket team wins across three years, with each team represented by a colored bar and the bar height indicating the number of wins for Year 3. The code uses D3.js v7 to load CSV data from a GitHub gist and render an SVG chart with d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 to assign distinct colors to each bar. Axes include labels for "Team Name" and "Wins", with hover effects on the bars.

Ppraveennayak1702@gmail.com

72% match

Loading thumbnail…

Fork of ICE-7 Pie Chart

This example displays a pie chart of cricket players’ total runs, highlighting the proportionate contribution of each player to the overall team score. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw SVG path segments, with a `scaleOrdinal` color scheme distinguishing players. A legend to the right maps each color to a player name and their runs formatted in thousands. Data is loaded asynchronously from a CSV gist via `d3.csv`.

Ppravallikayaram12

72% match

Loading thumbnail…

DV ICE 6

This example visualizes the top 10 revenue-generating athletes using a bar chart that maps TotalPay to bar width and athlete names to vertical bands. The chart uses React for component state and lifecycle, while D3 v5 handles data loading via `d3.csv` and scales (`scaleLinear` and `scaleBand`) to position elements. SVG rectangles render the bars, and axes are custom-built with D3’s `scaleBand` and `scaleLinear` APIs, styling tick text and lines directly. The data is fetched from a remote CSV file hosted on GitHub Gist.

Mmanishcheruku

71% match

Loading thumbnail…

ICE_6

This example displays the top 10 all-time leading run-scorers in cricket as a horizontal bar chart. The SVG visualization uses D3 v5 with `d3.scaleLinear` and `d3.scaleBand` to map runs and player names, while `d3.axisLeft` and `d3.axisBottom` render the axes. Data comes from a CSV file loaded via `d3.csv`, with run values parsed as numbers. Each player’s total runs are shown as orange bars, with a titled chart and formatted tick labels using `d3.format`.

Vvineeth-001

71% match