Fork of playing with json

100%

Fork of playing with json

✓ Published0🌍 Public

Last edited May 27, 2021

Created on May 27, 2021

This visualization displays cricket batting statistics from a T20 match between Sri Lanka and New Zealand. It uses D3.js v5 (including `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, `d3.axisBottom`, `d3.schemePiYG`, and `d3.scaleSequential`) to render an SVG. Horizontal bars represent each batsman's innings, positioned by their first ball faced and colored by strike rate. Circles mark the last ball faced. The chart includes axis labels and text annotations for player names, runs, and strike rate. Data is loaded from a CSV file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

playing with json

This visualization displays cricket batting data from a T20 match, showing each batsman’s innings as a horizontal bar spanning from their first to last ball faced. The bar’s height and color encode runs scored before dismissal and strike rate, respectively, using a sequential color scale. Circles mark the final ball of each innings, while text labels annotate standout performances. The chart is rendered as SVG using D3 v5, with data parsed from CSV and scales built via `d3.scaleLinear` and `d3.scaleSequential`, axes via `d3.axisLeft` and `d3.axisBottom`, and color interpolation from `d3.interpolateRdYlGn`.

PPabloEscargot

86% match

Loading thumbnail…

full mact v0.1

This visualization displays ball-by-ball data from a single T20 cricket match between Sri Lanka and New Zealand, showing runs scored on each delivery. The code imports match data from a JSON file using `d3.json` and renders the information as an SVG graphic. Built with React and D3 v5, the example uses selections and scales to map individual deliveries, with the raw data structure visible in the console output for debugging purposes.

PPabloEscargot

79% match

Loading thumbnail…

Fork of dataset

This bar chart displays the total Test cricket runs scored by top batsmen, with names on the y-axis and runs on the x-axis. It uses D3.js v5 via UNPKG, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the SVG visualization. The chart loads data from a local CSV file and customizes axis labels while removing default tick lines and domains for a cleaner appearance. The visualization highlights player rankings by bar length, with steelblue rectangles rendered from the parsed dataset.

Vvidhyanamini

79% match

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE7 Pie Chart

This pie chart visualizes the total runs scored by ten top cricketers, with each slice sized proportionally to a player’s run total and colored using d3.schemeCategory10. A legend on the right lists each player’s name and formatted run count. The visualization loads data from a JSON file, processes it with d3.json, and renders SVG paths using d3.pie() and d3.arc(). Color mapping and legend generation rely on d3.scaleOrdinal and d3.format for numeric tick labels.

Eeravellisaimeghana

77% match

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This pie chart visualizes the runs scored by ten top cricketers, showing the proportional contribution of each player's total. The visualization loads data from a JSON file using `d3.json`, then uses `d3.pie` and `d3.arc` to generate the chart segments, which are rendered as SVG paths. A `d3.scaleOrdinal` with `d3.schemeCategory10` sets the color palette, while a custom legend built with appended SVG `rect` and `text` elements lists each player's name and run total. The code uses D3 v5.

Bbhargavarathod

77% match

Loading thumbnail…

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

This visualization displays the top 10 cricketers by score using a horizontal bar chart, with the title and data loaded from a CSV file via `d3.csv`. React manages the component state and renders SVG marks, while D3 v5 provides the scales: `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The x-axis ticks are drawn explicitly using `xScale.ticks()`, but no y-axis line or tick marks are rendered, only text labels. The bar widths encode score values, and the chart lacks axis titles or a legend, making it a minimal representation of the underlying data.

Ccharanchand9

76% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows football statistics as a line chart, plotting goals scored against matches played for a dataset loaded from a CSV file. The chart uses D3 v6’s `scalePoint` for the x-axis (matches played) and `scaleLinear` for the y-axis (goals), with a line generator drawing the trend. Axes are rendered via `axisLeft` and `axisBottom`, while the SVG is created and manipulated with `select` and `append`. The data, sourced from a remote CSV URL, is parsed to numeric values before rendering, and the final line is styled with a steelblue stroke.

Ssujitrayudu01@gmail.com

76% match

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes cricket player performance by mapping petal length against petal width, with color-coded species markers and rotated axis labels for runs scored and player names. The visualization loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to compute scales, and renders circles as SVG elements with `d3.selectAll` and `.join`. Axis construction employs `d3.axisLeft` and `d3.axisBottom`, while the D3 v6 library handles data parsing and DOM manipulation within a React framework.

Mmaheganesh

76% match