Sports dataset ICE-5 Assignment
This visualization presents a sports dataset summary with a preview table of the first five rows and dynamic SVG bar charts. The page loads data from a raw Gist CSV file using `d3.csv` and automatically detects numeric columns for statistical analysis. Using D3 v7, it renders horizontal bars scaled with `d3.scaleLinear`, positioned within an SVG viewBox, while CSS styles the accompanying tables and decorative shapes. The interface provides column names, data types, and descriptive statistics like mean, min, and max for each numeric field.
AI-generated descriptionICE‑5 Starter (VizHub ready)
How to use
Create your own CSV (not the sample!) in Google Sheets or Excel.
- Each student must use a different dataset.
- Aim for 5–10 columns and at least ~20 rows.
Export as CSV.
Create a public Gist for your CSV:
- Go to https://gist.github.com → new gist → paste your CSV → create public gist.
- Click the Raw button and copy the URL. This is your dataset link for Q1.
Open
app.jsand replace:const CSV_URL = "REPLACE_WITH_YOUR_RAW_GIST_URL.csv";with your raw Gist URL.
Open this folder in VizHub (or upload the three files manually:
index.html,styles.css,app.js).- Make sure your CSV Gist is public.
- Your page will show a summary + preview table and has an SVG picture.
Submit:
- Q1: The raw Gist URL of your CSV.
- Q2: The VizHub link to your page.
- Q3: (already covered) The page renders the first 5 rows with CSS styling.
The inline SVG is in
index.html(Section “SVG Picture”). Replace or enhance it as you like.