Fork of HTML Starter
This example demonstrates a simple data-summary dashboard that loads a CSV file and displays basic metadata about its contents. It shows the total number of rows, the names of all columns, and the first data row as a JSON string. The code uses D3.js version 7, specifically `d3.csv` to fetch the dataset from a remote GitHub Gist URL, and then manipulates the DOM with `d3.select` and `append` to render the summary into styled paragraph elements. The visualization is minimal, focusing on text-based output rather than charts, and the data source is a static CSV of Champions League records.
AI-generated descriptionSure, here's a README file for the HTML code:
Data Visualization with D3.js
This HTML file demonstrates how to load and display a summary of a CSV data file using the D3.js library.
Getting Started
To run this code, you need to have a CSV file containing your data. Follow these steps:
- Create a new CSV file with your data or use an existing one.
- Upload the CSV file to a service like GitHub Gist or Pastebin to get a public URL for the raw data.
- Open the
index.htmlfile in a text editor and replace"YOUR_CSV_DATA_URL"with the raw URL of your CSV data. - Save the changes to the HTML file.
- Open the HTML file in a web browser.
Code Structure
The HTML file consists of the following sections:
<head>section:- Sets the page title.
- Includes basic CSS styles to format the data summary.
<body>section:- Contains an
<h1>heading and a<div>element with anidofdata-summarywhere the data summary will be displayed. - Includes the D3.js library using a
<script>tag with the sourcehttps://unpkg.com/d3@7.3.0/dist/d3.min.js. - Includes a
<script>section that loads the CSV data usingd3.csv("YOUR_CSV_DATA_URL").
- Contains an
Inside the
.thencallback function:- Logs the loaded data to the console for inspection.
- Selects the
#data-summarydiv usingd3.select("#data-summary"). - Appends paragraph elements (
<p>) with various data summaries:- The number of rows in the data (
data.length). - The column names of the data (
Object.keys(data[0])) assuming the first row contains the column names. - The first row of data (
data[0]) as a JSON string.
- The number of rows in the data (
Customization
You can modify the code inside the .then callback function
to display additional data summaries or visualizations as
needed. You can also update the CSS styles in the <head>
section to change the appearance of the data summary.
Dependencies
This code relies on the following dependencies:
- D3.js (version 7.3.0)
The D3.js library is included from the unpkg.com CDN, so you don't need to download or install it separately.
License
This project is licensed under the MIT License.
Comments
Sign in to join the discussion.