CSCE 5320: ICE-7 Line chart

100%

CSCE 5320: ICE-7 Line chart

✓ Published0🌍 Public

Last edited Mar 29, 2022

Created on Mar 29, 2022

This line chart shows the number of wickets taken for each inn, plotted over time. The visualization uses D3.js v5 with an SVG rendering. It loads data from a CSV file and applies a time-based x-axis and linear y-axis. The chart creates a single blue line path using D3's line generator, with axes and labels positioned using margin calculations. The x-axis displays "Inns" and the y-axis displays "Wkts".

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

CSCE: ICE-7 Area chart

This area chart displays the number of wickets taken per innings, using a smooth curve to fill the area beneath the line, with time-scaled innings on the x-axis and a linear scale for wickets on the y-axis. The visualization is built with d3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` and `line` generators with `curveBasis` to create the filled path and stroke. Data loads from a remote CSV file via `d3.csv`, and the SVG rendering applies custom styling for the orange background, bold axis labels, and thick stroke.

NNaveenParitala

86% match

Loading thumbnail…

ice7

This line chart shows the number of wickets taken in ODI cricket from 2000 to 2010, with year on the x-axis and wicket count on the y-axis. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for gridlines, and a `line` generator to create the blue path. The data is loaded from a CSV and rendered as SVG.

Vvineeth0000

82% match

Loading thumbnail…

CSCE-5320 ICE-6 ICC Most Wickets

This chart displays the top 20 bowlers by wickets in ICC tournaments, using a horizontal bar chart rendered with SVG. Each blue rectangle represents a player’s total wickets, with scales and axes built using `scaleBand` and `scaleLinear`, and annotated via `axisBottom` and `axisLeft` callbacks. The data is loaded asynchronously from a CSV file using `d3.csv`, and the interface is constructed with React components and hooks like `useState` and `useEffect`.

NNaveenParitala

80% match

Loading thumbnail…

CSCE 5320: ICE-7 Pie Chart

This example shows the distribution of cricket wickets among players as a pie chart, with a legend identifying each player and their corresponding wicket count. The data comes from a CSV file loaded via `d3.csv` from a GitHub gist. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw the SVG paths, with `scaleOrdinal` assigning a categorical color palette. Legend rectangles and text labels are appended to the SVG, and wicket values are formatted with `d3.format` for compact display.

NNaveenParitala

79% match

Loading thumbnail…

ICE7

This visualization shows the number of wickets taken in ODI cricket from 2000 to 2010, with a filled area chart highlighting the trend over time. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `line()`, and `area()` generators with `curveBasis` to render smooth paths in SVG. Axes are created via `axisBottom` and `axisLeft`, and data is loaded from a remote CSV using `csv()`. The chart includes styled tick lines, axis labels, and a bold orange fill for the area under the curve.

Vvineeth0000

79% match

Loading thumbnail…

ICE-7 Line Chart

This example shows a line chart depicting cricket run data over time, with the y-axis representing runs and the x-axis representing players. The chart uses a red gradient stroke for the line and includes labeled axes for clarity. The visualization is built with D3 v6, using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes, while a `line` generator with `curveBasis` smooths the data path. Data is loaded from a CSV file via `csv()`, and the SVG rendering is styled with CSS classes.

LLG0498

77% match

Loading thumbnail…

ICE 7 task

This example visualizes the number of catches by non-wicket-keepers in cricket, plotting each player against their catch count over time using an SVG line chart. The visualization employs D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `curveBasis`, and `line` to construct the chart, with a gradient stroke applied to the line path. The data is loaded from a CSV file hosted on GitHub, and the chart includes labeled axes and a title, with axes rendered via `axisLeft` and `axisBottom` and custom styling applied through CSS classes.

Ddineshtadepalli12

75% match

Loading thumbnail…

ICE__7

This visualization displays the all-time leading wicket-takers in One Day International cricket, using a pie chart where each slice represents a player’s total wickets. The data is loaded from a CSV file via `d3.csv`, and the chart is rendered as SVG using `pie` and `arc` generators. Slice colors are assigned with `scaleOrdinal`, and a legend lists each player’s name and wicket count, formatted with `format`. The code also defines an `arcGenerator` for centroid positioning, though it does not add labels inside the chart.

Vvineeth-001

75% match