Skip to main content
SimilarExport ZIP
100%

ICE-7 Area_Graph (Dhanusree Kodali)

✓ Published2🌍 Public
DDhanusree Kodali
Last edited Jul 3, 2022
Created on Jul 1, 2022

This example uses an area graph to show the number of runs scored by Virat Kohli in the Indian Premier League across multiple years. It layers a circle mark, area mark, and interactive text and rule marks, with a single selection tied to the x-axis that highlights data points on mouseover. The visualization is built with Vega-Lite API and d3.v5, pulling CSV data from a GitHub gist, and uses custom configuration for axis styling and tooltip formatting.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Line Graph_Bharath

This interactive line chart displays MS Dhoni’s career run totals by year, using a blue line with circle markers and a vertical rule that follows the mouseover to highlight exact values. The visualization is built with the vega-lite-api library and rendered using Vega-Lite, with data loaded from a CSV via d3.csv. It includes tooltip handlers and custom styling from a separate config file, offering a clear, hover-driven exploration of performance metrics.

Bbharathsivakumar07
81% match
Loading thumbnail…

Area chart ICE-7

This area chart visualizes the runs scored by 20 cricketers from various teams in 2024, with each player labeled on the x-axis and their total runs on the y-axis. The chart uses D3.js v7 to generate an SVG rendering, employing `d3.area` to create the filled region beneath a `d3.line` overlay, while `d3.scalePoint` positions the players and `d3.scaleLinear` maps the runs. Orange dots are added using `d3.selectAll` with `join` to mark individual data points, and each dot includes a title tooltip showing the player’s name and runs. Data comes from the `cricket_stats.csv` file, loaded asynchronously via `d3.csv`.

Aavinashpandian79@gmail.com
78% 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
76% 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
75% 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
74% 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
74% match
Loading thumbnail…

Fork of Fork of ice-7 sushmithab area chart

This area chart visualizes IPL team performance by plotting points scored against year, with each team represented as a filled area using custom colors. The chart groups data by team using `d3.group` and renders areas with `d3.area`, while tooltips on hover reveal team, year, and points. It leverages D3 v7 scales (`scaleLinear`, `scaleOrdinal`), axes, and a legend, loading CSV data from a gist. The visualization includes SVG rendering and interactive tooltip transitions, with animation implied through hover interactions.

Ssushmitha bungatavula
74% match
Loading thumbnail…

Cricket_Area Chart

This area chart visualizes cricket players’ yearly run totals from 2010 to 2021, using a filled steel-blue path to show the trend. Each data point is marked by a red circle that reveals a tooltip with the player’s name, year, and runs on hover. The visualization uses D3.js v7 with SVG rendering, including `d3.area()` for the area generator, `d3.axisBottom()` and `d3.axisLeft()` for axes, and `d3.scaleLinear()` for scales, alongside manual gridlines and axis labels.

Ssrisailapu.rc@gmail.com
73% match