Loading Data 2

100%

Loading Data 2

✓ Published1🌍 Public

Last edited Sep 7, 2025

Created on Sep 3, 2025

This example demonstrates loading a heart failure prediction dataset from a CSV file via a file input, then displaying its contents as a formatted JSON object. The visualization initially fetches `heart.csv` using D3's `fetch` and `csvParse` functions, converting numeric columns to numbers. Users can subsequently load their own CSV file, which is read using the `FileReader` API and parsed by `d3.csvParse`, updating the displayed state. The code relies on D3's `select`, `selectAll`, and `join` operations to render the data.

AI-generated description

This is my second dataset, with a heart faliure prediction dataset from kaggle.

https://www.kaggle.com/datasets/fedesoriano/heart-failure-prediction Ordinal Columns:

"Age": Numerical, 
"Sex": Categorical, 
"ChestPainType": Ordinal,
"RestingBP": Numerical, 
"Cholesterol": Numerical, 
"FastingBS": Numerical, 
"RestingECG": Categorical, 
"MaxHR": Numerical,
"ExerciseAngina": Categorical, 
"Oldpeak": Numerical, 
"ST_Slope": Categorical, 
"HeartDisease": Numerical

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading Data 3

This example demonstrates how to load and display CSV data from either a local file or a remote source using D3 v7's `csvParse` and `fetch` APIs. It presents a file input that lets users choose a CSV file, while also automatically loading a default `plane.csv` dataset containing airline flight information. The parsed data is rendered as a JSON-formatted text preview inside a `<pre>` element, with all numeric columns converted to numbers during parsing. The visualization updates dynamically whenever new data is loaded.

AAbhi Yammanuru

76% match

Loading thumbnail…

Loading Data

This example demonstrates how to load and parse a CSV file in D3.js, displaying the raw parsed data as a stringified JSON object in a `<pre>` element. The visualization uses a state management pattern with a `setState` function to handle asynchronous data loading, initially showing a "LOADING" placeholder. It fetches `data.csv`, parses it with `d3.csvParse`, and converts numeric columns to numbers before updating the display. The Iris flower dataset is used as the data source, with the rendering approach being a simple text-based output rather than a graphical chart.

IIshaChid76

76% match

Loading thumbnail…

Fork of Loading Data - Diabetes Data

This example loads a diabetes dataset from a CSV file and displays its raw contents as a JSON-formatted text block. The visualization focuses on the data-loading process, using a state machine to transition from an undefined state to a loading state and finally to the parsed data. The code parses the CSV using D3’s `csvParse` function and converts numeric fields from strings to numbers. The data, sourced from Kaggle, is rendered by fetching the file and displaying the parsed array in a `<pre>` element.

Rrpkupfer@wpi.edu

76% match

Loading thumbnail…

Loading and parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js. It shows the process of fetching an external CSV file and converting its rows into JavaScript objects for further visualization use. The code employs D3's `d3.csv()` method to handle the asynchronous data retrieval and parsing. The rendered output is presented within an HTML page that contains a single script block, with the data ultimately displayed in the browser's console rather than as a graphical chart.

Ppaulrosedigital

75% match

Loading thumbnail…

Loading Data - Health Insurance

This example demonstrates how to load and parse a CSV file containing health insurance data using D3 v7. The visualization displays the raw parsed data as a JSON object in a `<pre>` element, showing fields such as age, sex, BMI, children, smoker status, region, and charges. It uses `d3.csvParse` to convert the CSV text into an array of objects, then manually coerces numeric fields with the unary plus operator. The code implements a loading state that transitions from undefined to "LOADING" before populating with the fetched data via the Fetch API.

MMatt Hagger

75% match

Loading thumbnail…

Fork of Loading Data - Lifestyle Health

This visualization demonstrates how to load and parse a CSV dataset using D3 v7, displaying the raw parsed data as JSON in a `<pre>` element. The example uses `csvParse` to convert survey data about lifestyle and health metrics, explicitly coercing numeric fields with the unary `+` operator. A state management pattern handles asynchronous data loading, showing a 'LOADING' placeholder before the fetched dataset appears. The code relies on `select` and `join` to render the data, sourced from a Kaggle dataset on disease risk from daily habits.

BBrian Hulbert

75% match

Loading thumbnail…

Heart Disease

This visualization displays summary statistics for a heart disease dataset sourced from Kaggle.com, showing the file size in kilobytes, row count, and column count in large blue text. The code uses d3.csv to load the CSV file from a GitHub Gist, then d3.csvFormat to calculate the data size and accesses the data's length and columns properties to extract the metrics. It demonstrates both async/await with fetch and a promise-based d3.csv approach, though only the latter is active in the current version.

RRyanYun0017

75% match

Loading thumbnail…

Loading Data

This example demonstrates how to load and parse a CSV file in D3.js, displaying the Iris dataset as formatted JSON text in a `<pre>` element. The visualization initially shows a "LOADING" state, then fetches `data.csv` via the Fetch API and parses it using `d3.csvParse`. The code explicitly converts string measurements into numbers for all four numeric columns. State management is handled through a simple `setState` pattern, where the `viz` function checks whether data is loaded, triggers the asynchronous fetch, and re-renders once the parsed array of objects is available.

CCurran Kelleher

75% match