CSCE: ICE-7 Area chart

100%

CSCE: ICE-7 Area chart

✓ Published0🌍 Public

Last edited Mar 29, 2022

Created on Mar 29, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

CSCE 5320: ICE-7 Line chart

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".

NNaveenParitala

86% match

Loading thumbnail…

ICE-7 Area chart

This area chart displays yearly runs scored, with a smooth curve and a sky-blue filled region beneath the line. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, while axes are rendered with `axisBottom` and `axisLeft`. Data is loaded from a CSV file via `d3.csv`, with years parsed as dates and runs as numbers. The chart includes formatted tick labels and prominent axis titles, all styled with CSS.

LLG0498

83% 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-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

81% 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…

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

79% match

Loading thumbnail…

ICE7_Area_chart

This area chart visualizes soccer data with previous points plotted over time. It uses D3 version 6, specifically `scaleTime`, `scaleLinear`, and the `area` generator with `curveBasis` to create a smooth filled path. The SVG rendering includes styled axes with tick marks and labels, and the data is loaded from an external CSV via `csv()`.

DDeeraj Thakkilapati

79% match