Skip to main content
SimilarExport ZIP
100%

ICE6 - Marks and Channels

✓ Published0🌍 Public
Mmamathareddy1321@gmail.com
Last edited Mar 19, 2025
Created on Mar 19, 2025
Forked from HTML Starter

This bar chart visualizes the number of matches captained by cricket players, sourced from a CSV file of cricket captains. It uses D3.js to load the data and construct an SVG with a band scale for player names and a linear scale for match counts. Rectangles represent each player’s total, with axes and a title added via D3’s axis components and text elements. The chart is rendered in React with a steelblue fill, displaying the ranking of captaincy counts across players.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6 - Marks and channels

This bar chart shows the total number of wins achieved by various cricket captains, with captain names on the x-axis and win counts on the y-axis. The data is loaded from a CSV file and sorted by wins in descending order, with each bar colored uniquely via a d3.scaleOrdinal. Built with D3 v7, the visualization uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for axes, and includes interactive hover effects that change bar color through CSS transitions, along with rotated x-axis labels and axis labels for clarity.

Mmamathareddy1321@gmail.com
90% match
Loading thumbnail…

ICE6 - Marks and Channels

This scatter plot shows the number of wins by different cricket captains, with captain names on the x-axis and win counts on the y-axis. Each green circle represents a captain, turning orange and enlarging on hover while displaying a tooltip with their match count and wins. The visualization loads CSV data from a GitHub gist using d3.csv and renders SVG circles with d3.scaleBand and d3.scaleLinear for axes. Interactive features include d3 transitions on hover and a custom tooltip populated via mouseover events.

Mmamathareddy1321@gmail.com
90% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3 using cricket dataset

This visualization displays the top 10 cricketers from a dataset, showing each player’s 2019 performance as a horizontal bar chart. The bars are rendered as SVG rectangles within a React component, using D3’s `scaleBand` for the categorical y-axis (player names) and `scaleLinear` for the numeric x-axis (population values). Data is loaded asynchronously via `d3.csv` from a GitHub gist, with axes and tick marks generated manually through React elements.

Vvidhyanamini
83% match
Loading thumbnail…

ICE-6 Marks and Channels

This visualization presents two charts examining Test cricket records. The bar chart displays the top 10 players by number of centuries scored, using horizontal bars colored with d3.scaleOrdinal and d3.schemeCategory10. The scatter plot below explores the correlation between matches played and runs scored, though the scatter plot code is incomplete. Both charts load data from a CSV file containing Test cricket statistics, using D3.js v7 to render SVG elements with axes for the quantitative comparisons.

Mmedurisk7@gmail.com
83% match
Loading thumbnail…

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

This example displays the top 10 cricketers by score as horizontal bars, using React to render SVG elements and D3 v5 scales (d3.scaleBand, d3.scaleLinear) to position the bars and axes. It loads a CSV dataset of cricket statistics via d3.csv, slicing the first 10 rows, and draws tick marks and labels for both the x and y axes. The chart, titled “10 Most Popular players,” uses blue gridlines, a left margin for player names, and no other visual encodings beyond bar length.

Ccharanchand9
80% match
Loading thumbnail…

ICE-6: Marks and Channels

A bar chart displays sales data for eleven items, with each item’s sale amount encoded by the horizontal bar length. The visualization uses React to manage state and render the SVG, while D3 v5 scales (`scaleBand`, `scaleLinear`) and CSV loading (`d3.csv`) handle data binding and axis generation. Rectangular marks represent values, with orange gridlines and labeled axes for clarity.

SSaiSree0122
79% match
Loading thumbnail…

ICE-6

This interactive bar chart displays the top 12 bowlers with the most wickets in a calendar year, using a horizontal layout with labeled axes. The visualization loads data from a CSV file via `d3.csv` and renders the chart as an SVG. React manages the component state and lifecycle, while D3's `scaleBand` and `scaleLinear` position the bars and ticks. The code explicitly draws gridlines, axis labels, and rectangles for each data point, with the title "Most Wickets by a Player in a calender Year" displayed above the chart.

AAbhinav-Mullapudi
79% match
Loading thumbnail…

ICE-6 Marks and Channels

This visualization is a horizontal bar chart that displays the length of RGB hex values for various CSS keywords, with each bar colored according to its CSS specification level (e.g., Level 1, 2, 3) using a predefined color mapping. The chart uses React for rendering and D3.js functions `scaleBand`, `scaleLinear`, and `max` to compute the scales and domain from a CSV file loaded via `d3.csv`. The bars are drawn as SVG rectangles, and axes are generated with custom ticks and labels.

Sshreyasribearelly@gmail.com
79% match