Fork of ice-7 sushmithab line chart

100%

Fork of ice-7 sushmithab line chart

✓ Published1🌍 Public

Last edited Oct 26, 2025

Created on Oct 25, 2025

This line chart visualization displays IPL team points across seasons, with each team represented by a colored line and interactive data points. D3.js (v7) loads CSV data from a GitHub gist via `d3.csv`, processes it with `d3.group` to nest records by team, and renders the chart using SVG elements. The visualization includes axis labels, a legend, and tooltips on mouseover, built with D3 scales (`scaleLinear`, `scaleOrdinal`), axes, and the `line` generator. Circle markers use event handlers for hover interactions, while animations appear through D3 transitions on tooltip opacity changes.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

ice-7 sushmithab scatterplot

This interactive scatter plot visualizes IPL team performance from 2015 to 2024, showing the relationship between year and points scored for each team. Each point is color-coded and shape-coded by team, with hover tooltips revealing detailed statistics. The visualization uses D3.js v7 with SVG rendering, employing d3.scaleLinear for axes, d3.scaleOrdinal for color and shape encoding, and d3.symbol for varied point markers. Data is loaded from a remote CSV file containing team performance records. The chart includes custom team colors, a legend, and smooth hover interactions.

Ssushmitha bungatavula

88% match

Loading thumbnail…

Fork of ice-7 sushmithab pie chart

This pie chart visualizes the distribution of total points earned by IPL teams from 2015–2024, using data loaded via `d3.csv` from a GitHub gist. D3 v7’s `d3.pie` and `d3.arc` generate the SVG slices, labeled with each team’s percentage. A `d3.scaleOrdinal` with `d3.schemeTableau10` assigns colors, and a custom legend lists each team’s points and share. The chart updates dynamically when new CSV data is parsed, with slices and legend rendered inside a single SVG container.

Kkoppulasudhakar03@gmail.com

88% match

Loading thumbnail…

Fork of Fork of ice-7 sushmithab pie chart

This pie chart visualizes the distribution of total points accumulated by IPL teams from 2015 to 2024. It displays each team's slice with its percentage label directly on the arc, alongside a legend showing team names, raw point totals, and percentages. The visualization loads data from a remote CSV file using `d3.csv`, aggregates points per team, and renders the pie chart as SVG using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with a Tableau10 color scheme.

Kkoppulasudhakar03@gmail.com

86% match

Loading thumbnail…

ice-7 sushmithab pie chart

This pie chart visualizes the distribution of total points accumulated by IPL teams from 2015 to 2024, aggregated from a CSV dataset. Each slice represents a team’s share of the overall points, with percentage labels displayed directly on the chart and a legend listing each team’s total points and percentage. The visualization uses D3.js v7, employing the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to generate the circular layout and color scheme. The chart is rendered as an SVG and includes a legend, with data loaded via `d3.csv`.

Ssushmitha bungatavula

85% match

Loading thumbnail…

Fork of ICE 7 Pie Chart

This pie chart displays the total championship wins for each IPL team up to 2019, using data from a CSV file. The D3.js v5 code uses `d3.pie` to compute the arc segments, which are rendered as SVG paths with `d3.arc`. The chart is colored with a `d3.scaleOrdinal` color scale, and legends are generated manually using SVG circles and text elements. The data is loaded asynchronously via a custom `getData` function that utilizes `d3.csv`.

Sskambhore04

81% match

Loading thumbnail…

Fork of ICE-7

This line chart shows sales data over time, with years on the x-axis and sales values on the y-axis, using orange strokes to highlight trends. It loads CSV data from a GitHub gist, parsing dates with `d3.timeParse` and rendering an SVG via D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` functions. Grid lines and axis labels are customized through CSS, while margins and tick padding adjust the layout.

TTulluripallavi

78% match

Loading thumbnail…

Fork of Fork of ICE-7 Line Chart

This visualization shows a single red line chart tracking one data series across time, with a clean, labeled SVG rendering and a bold title. The chart uses D3 v5 to create scales and axes, with tick marks and axis labels styled via CSS. The line itself is drawn as an SVG path with the `line_path` class, while the data is bundled and executed from `bundle.js`, suggesting the data is pre-processed or loaded separately. The page layout centers the chart within a 960x500 viewport.

Aabdhaseeeb

78% match