Skip to main content
SimilarExport ZIP
100%

Fork of Fork Ice-5 nagasai

✓ Published0🌍 Public
Nnagasai.mandalapu@gmail.com
Last edited Mar 28, 2024
Created on Mar 7, 2024
Forked from Fork Ice-5 nagasai

This visualization displays the points earned by soccer teams in Group A from a CSV dataset, with each team plotted along a categorical x-axis and their points scaled along a linear y-axis. The chart uses a line to connect the points across teams, making it easy to compare performance trends within the group. The code leverages D3.js v7, specifically `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and the SVG is rendered with margins and axis labels for clarity.

AI-generated description

I created a Vizhub webpage using html, css, and svg.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart Nagasai

A soccer group points pie chart visualizes the distribution of points among Group A teams. The chart encodes each team’s points as a slice’s arc length, with a categorical color scale from `d3.scaleOrdinal` and `schemeSet3`. The code fetches CSV data, aggregates it by group, and renders the pie using `d3.pie` and `d3.arc` generators inside an SVG. Slice labels display team names using `arcGenerator.centroid`, while only Group A is shown, leaving Group B unrendered.

Nnagasai.mandalapu@gmail.com
86% match
Loading thumbnail…

Fork of Fork of Fork of ICE - 7 Pie Chart Nagasai

This example visualizes soccer team point totals as a pie chart, with each slice representing a team and its size proportional to points earned. The code uses D3.js v7 APIs including `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with the `schemeCategory10` color palette. Data is loaded via `d3.csv()` from a remote GitHub gist, then filtered to extract team names and points. SVG paths are drawn for slices, and labels are positioned using an outer arc generator with `centroid()` for readability.

Nnagasai.mandalapu@gmail.com
84% 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
74% match
Loading thumbnail…

Fork Ice-5 nagasai

This visualization presents a summary of test cricket records for the top 83 batsmen over the last 25 years, using a simple webpage layout. It displays the data file’s size in kilobytes and bytes, along with row and column counts, in a green text block. The page also includes an SVG rendering of a cricket field and ball, built with basic SVG elements like circles, rectangles, and lines. The code uses D3.js v7’s `d3.csv` method to load and parse the external CSV data, while the HTML structure and CSS styling organize the content and colors.

Nnagasai.mandalapu@gmail.com
74% match
Loading thumbnail…

Fork of company List

This visualization displays sports-related data from a CSV file as a horizontal bar chart, ranking the top 11 entries by their 2021 match counts. The chart uses React for component-based rendering and D3 v5 for data loading and scale construction. Specifically, it employs `d3.csv` for data fetching, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. The SVG rectangles are colored purple and rendered directly within a React component, with axes and tick labels generated manually using D3's scale methods.

NNaimisha-M
74% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart krishna

This pie chart visualizes the number of goals scored by top football players, with each slice representing a player’s goal count. The chart uses a simple flat design, with each slice labeled in thousands (e.g., "1.2K") and a legend listing player names alongside their corresponding goal values. The code leverages D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute slice geometry and map colors, while data is loaded from a CSV file using `d3.csv`. The chart is rendered as an SVG, with text and legend elements positioned manually for clarity.

Nnagasai.mandalapu@gmail.com
73% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example adapts a reusable D3 scatter plot to visualize soccer statistics, cycling through three different variable pairings every three seconds. It uses `d3.csv` to load a dataset containing goals for and against, wins, draws, losses, and points. The animation smoothly updates the plot's axes and circle positions by re-binding data and calling `axisLeft` and `axisBottom` within a setInterval loop. The SVG circles are rendered with a fixed radius, and the chart adjusts to the full window size.

Nnagasai.mandalapu@gmail.com
73% match
Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example visualizes the win records of multiple sports teams over a series of years, with each team represented by a separate colored line. The chart uses D3.js v7 to load CSV data from a remote Gist and render an SVG line chart with axes, labels, and a legend. The code specifically uses `d3.csv` with `d3.autoType` for data parsing, `d3.scaleLinear` and `d3.scaleOrdinal` for scales, `d3.line` for path generation, and `d3.axisBottom`/`d3.axisLeft` for the axes, with `d3.schemeCategory10` providing the line colors.

Ppraveennayak1702@gmail.com
72% match