Skip to main content
SimilarExport ZIP
100%

Scatter Plot ICE-6

✓ Published0🌍 Public
Mmedurisk7@gmail.com
Last edited Mar 20, 2024
Created on Mar 20, 2024

This example visualizes Test Cricket records with a horizontal bar chart showing the top 10 players by number of centuries scored, using a categorical color scale from `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart loads a CSV dataset via `d3.csv`, sorts players by century count, and renders SVG rectangles with axes from `d3.axisLeft` and `d3.axisBottom`. A companion scatter plot is also included, though its data mapping is not detailed in the visible code. The visualization uses D3 v7 and SVG rendering, with the data sourced from a public GitHub gist.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

  • Fork this viz
  • Modify it to show your data
MIT Licensed

Similar vizzes

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
86% match
Loading thumbnail…

ICE-7 Scatter plot

This example visualizes Test Cricket player statistics with a scatter plot that maps runs against batting averages, animating through different data fields every three seconds to explore relationships between metrics like strike rate and innings played. The visualization uses D3.js version 6.7.0, employing the `scaleLinear` and `scaleOrdinal` functions for positioning and color encoding, while SVG symbols represent player types. Data from a CSV file hosted on GitHub Gist is loaded asynchronously, with circles colored by country and shaped by player role. The reusable chart module implements a configurable API, cycling through four quantitative fields on the x-axis.

Mmedurisk7@gmail.com
85% 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
83% match
Loading thumbnail…

Fork of ICE-7 Scatter plot

This interactive scatter plot visualizes Test Cricket records, showing the relationship between two selected metrics for each player. It cycles through different x-axis fields—Runs, Average, Strike Rate, and Innings—every three seconds, allowing for dynamic comparison of player performance. The visualization uses D3.js, specifically the `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs, to render the plot with symbols and colors representing player type and country. Data is loaded from a remote CSV file hosted on GitHub Gist, and the plot is drawn as an SVG element that updates in place.

Rrohithannadurai@my.unt.edu
82% match
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
81% match
Loading thumbnail…

Fork of ICE-7 Scatter plot

A reusable scatter plot animated with D3 v6 cycles through Runs, Average, Strike Rate, and Innings on the x-axis every three seconds. It visualizes Test Cricket player records from a CSV file, using d3.scaleLinear for axes, d3.scaleOrdinal with symbol types to distinguish player roles, and color to encode country. The SVG renders dynamically via d3.csv loading and a custom scatterPlot module.

Nnagasai.mandalapu@gmail.com
80% 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
80% match
Loading thumbnail…

ICE-7 Pie Chart

This pie chart visualizes the top 10 run-scorers in a cricket dataset, highlighting each player’s share of total runs with a color-coded legend. The chart is built using D3 v5, with `d3.pie` and `d3.arc` generating the SVG segments, while `d3.scaleOrdinal` assigns colors. Data is loaded asynchronously from a CSV file via `d3.csv`. The legend displays player names and run totals formatted as thousands (e.g., “1.2K”), with values calculated from the raw data.

LLG0498
80% match