Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

CHAMPIONS LEAGUE DATA.HTML

Public visualization

Viewing a saved revision (read-only)

7901ccac10e44b568e65425466bdc4c1

CHAMPIONS LEAGUE DATA.HTML

0 stars0🌍 Public
BBALAJI MANDAVA
Last edited Mar 4, 2024
Created on Mar 4, 2024
Forked from HTML Starter

This visualization displays the distribution of goals scored across Champions League matches, using a swarm plot to reveal clusters and outliers. It loads match data and renders circles representing individual goals, with positioning influenced by goal counts. The implementation combines D3.js force simulation for layout and D3 scales for mapping statistics to visual attributes.

AI-generated description

Champions League Dataset

This dataset contains information about the Champions League matches. The data is sourced from this CSV file.

Overview

The dataset includes details such as match date, teams, scores, and additional information about Champions League matches.

Raw Data URL

Champions League Dataset Raw URL

Usage

To use this dataset in your code, you can fetch and parse the data using D3.js or any other suitable method. Here's an example HTML code that loads and parses the data with D3.js:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <script src="https://unpkg.com/d3@7.3.0/dist/d3.min.js"></script>
    <title>D3.js Data Loading and Visualization</title>
  </head>
  <body>
    <script>
      // Use D3.js to fetch and parse CSV data
      d3.csv(
        'https://gist.githubusercontent.com/balajimandava/ad5e12d1a51b7392a504a10a19023d4f/raw/9bb242622c9a2b7fa43f40bf1bccdbe9f822132a/CHAMPIONS%2520LEAGUE%2520DATASET.CSV',
      )
        .then(function (data) {
          console.log(data); // Display data in the console for verification
          // Your D3.js visualization code goes here
        })
        .catch(function (error) {
          console.error('Error loading data:', error);
        });
    </script>
  </body>
</html>