Skip to main content
SimilarExport ZIP
100%

Charan Bonus ICE Q2

✓ Published1🌍 Public
Ccharanchand9
Last edited Jul 6, 2022
Created on Jul 6, 2022

This visualization displays a 3D scatter plot of cricketer statistics, plotting three quantitative attributes: score on the x-axis, match on the y-axis, and balls on the z-axis. Each data point is rendered as a purple circle with a fixed size and opacity, derived from a CSV file loaded via `d3.csv`. The chart is built using the Plotly JavaScript library, specifically the `Plotly.newPlot` method, with a `scatter3d` trace type. Axis titles and their font colors are configured within the layout's scene object, while the plot area itself uses minimal margins.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Charan Bonus ICE Q2

This visualization displays a 3D scatter plot of cricketer statistics, plotting three quantitative attributes: score on the x-axis, match on the y-axis, and balls on the z-axis. Each data point is rendered as a purple circle with a fixed size and opacity, derived from a CSV file loaded via `d3.csv`. The chart is built using the Plotly JavaScript library, specifically the `Plotly.newPlot` method, with a `scatter3d` trace type. Axis titles and their font colors are configured within the layout's scene object, while the plot area itself uses minimal margins.

Ccharanchand9
100% match
Loading thumbnail…

Charan ICE-7 Q1 Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot displays cricket player statistics, plotting balls faced, match count, age, and score as points on a dual-axis chart. The visualization cycles through these four data columns every two seconds, updating the x-axis scale and circle positions smoothly. Built with D3.js v6, it uses an asynchronous CSV loader, the reusable chart pattern with a `scatterPlot` factory function, and linear scales with SVG circle and axis rendering. The Iris-inspired design rotates through dimensions from the cricket dataset, creating a dynamic exploration of player performance metrics.

Ccharanchand9
85% match
Loading thumbnail…

Bonus ICE - 3D Scatter Plot

This 3D scatter plot displays cricketer data by age, height, and weight, with points colored by player role (batsman, bowler, or all-rounder). The visualization uses Plotly.js’s `scatter3d` trace type, mapping the three numerical attributes to the x, y, and z axes. Point colors are assigned based on role, and the axes feature custom background and grid colors. Data is loaded from a CSV file via D3.js’s `d3.csv` function, demonstrating a combination of Plotly for 3D rendering and D3 for data parsing.

Nnagarajuobbineni
79% match
Loading thumbnail…

Bonus ICE

This example shows a 3D scatter plot of cricket bowling statistics, comparing gameplay metrics across two coordinate spaces. The first trace plots innings, wickets, and balls delivered, while the second trace maps average, economy rate, and strike rate. Both traces use Plotly’s `scatter3d` with marker styling and opacity. Data is loaded via d3.csv from a GitHub-hosted CSV file, and the visualization is rendered inside a div using `Plotly.newPlot` with a zero-margin layout.

NNaveenParitala
79% 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
77% match
Loading thumbnail…

Charan Bonus Ice q1

This example presents a bar chart of sales data, using a drop-shadow filter and ordinal scales to map categories to the x-axis and a linear scale for the y-axis. The chart is built with D3 v2, rendering to SVG with animation support, and includes custom tick formatting for captions. Data transformation occurs in a `TransformChartData` function before the bars are constructed via the `BuildBar` method, which appends the SVG to a container using jQuery selection.

Ccharanchand9
77% match
Loading thumbnail…

Charan Bonus Ice q1

This example presents a bar chart of sales data, using a drop-shadow filter and ordinal scales to map categories to the x-axis and a linear scale for the y-axis. The chart is built with D3 v2, rendering to SVG with animation support, and includes custom tick formatting for captions. Data transformation occurs in a `TransformChartData` function before the bars are constructed via the `BuildBar` method, which appends the SVG to a container using jQuery selection.

Ccharanchand9
77% match
Loading thumbnail…

Bonus ICE - 3D Bar chart

This 3D bar chart visualizes the runs scored by seven cricketers across five months (January through May), using a three-dimensional perspective to compare performance over time. The chart employs Highcharts with the highcharts-3d extension, configuring the chart type as 'column' with 3D options for depth, alpha, beta, and view distance. Each month is represented as a separate series with stacked, grouped columns, while the x-axis lists player names and the y-axis displays runs scored. The z-axis denotes months, and colors distinguish each series within the interactive HTML page.

Aachalasam
76% match