Skip to main content
SimilarExport ZIP
100%

Fork of Loading Data - Diabetes Data

✓ Published1🌍 Public
Rrpkupfer@wpi.edu
Last edited Sep 8, 2025
Created on Sep 2, 2025

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.

AI-generated description

This dataset documents diabetes information and predicted outcome of diabetic state.
Pregnancies: To express the Number of pregnancies: Quantitative Glucose: To express the Glucose level in blood: Quantitative BloodPressure: To express the Blood pressure measurement: Quantitative SkinThickness: To express the thickness of the skin: Quantitative Insulin: To express the Insulin level in blood: Quantitative BMI: To express the Body mass index: Quantitative DiabetesPedigreeFunction: To express the Diabetes percentage: Quantitative Age: To express the age: Quantitative Outcome: To express the final result 1 is Yes and 0 is No: Categorical

This dataset can be found here: https://www.kaggle.com/datasets/akshaydattatraykhare/diabetes-dataset

MIT Licensed

Similar vizzes

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
86% match
Loading thumbnail…

Fork of Loading Data

This example demonstrates the asynchronous loading of airline flight data from a CSV file, displaying the parsed contents as a JSON string in a preformatted text element. The visualization uses D3 v7’s `csvParse` method to convert the raw text into an array of objects, with numeric fields explicitly coerced to numbers. The code manages a state machine—starting as undefined, transitioning to `'LOADING'`, then resolving to the final dataset—by fetching `data.csv` via the Fetch API and updating the DOM through `select` and `.join` methods. The data source is a Kaggle dataset of airline flights, though the included file uses iris sample data for demonstration.

EEmily Hudson
81% match
Loading thumbnail…

Fork of Loading Data

This example demonstrates asynchronous data loading in D3, displaying the Iris Dataset as a raw JSON string in a `<pre>` element. The visualization initializes with a loading state, fetches the CSV file via `fetch`, and parses it using `d3.csvParse`. After conversion, numeric columns are cast to numbers before being rendered. The code uses `d3.select` and the `.join()` operation to update the displayed data, showcasing a minimal data-loading and state-management pattern with D3 v7.

Bbillmccabeusa@hotmail.com
81% match
Loading thumbnail…

Fork of Loading Data

This example demonstrates asynchronous data loading in a D3.js visualization. The code fetches a CSV file containing the classic Iris flower dataset, parses it, and displays the raw JSON-formatted data prominently as the primary output. The visualization progresses through distinct states—starting with undefined, transitioning to a "LOADING" message, and finally populating with the parsed array of objects. It uses D3's `select`, `join`, `csvParse`, and a state management pattern with `setState` to control the rendering and handle the fetch-and-parse pipeline.

Sskasliwal@wpi.edu
80% match
Loading thumbnail…

Fork of diabeties data

This visualization presents survey data on diabetes awareness, showing the first ten rows of the dataset with details on the number of rows, columns, and file size. The page uses D3.js to load a CSV file from a GitHub gist, while the background displays a static JPEG image of a diabetes-related graphic. The code employs D3's `csv` method for data parsing and displays the information as text elements within the SVG, styled with custom CSS. The visualization is built with Vue and rendered using SVG, with D3 version 5.

VVineela Reddy
80% match
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This visualization demonstrates how to load and parse CSV data using D3.js version 5. It fetches an electric accounts dataset from a GitHub-hosted CSV file and displays basic statistics about the data, including file size in kilobytes, row count, and column count. The implementation uses `d3.csv` to asynchronously retrieve and parse the data, then formats the information with `d3.csvFormat`. The result appears as large text in an HTML `<pre>` element, showing how fetched tabular data can be summarized and presented.

RRadhakrishna246
80% match
Loading thumbnail…

Loading and Parsing diabetes risk CSV Data

This example loads a diabetes risk prediction dataset from UCI’s machine learning repository, sourced from Sylhet Hospital in Bangladesh, and displays its size in kilobytes, row count, and column count. The visualization uses d3.csv to fetch and parse the CSV file, then d3.csvFormat to calculate the file size, with the summary rendered in a large-text <pre> element. It also includes commented-out alternatives using fetch, async/await, and d3.csvParse, demonstrating different ways to handle asynchronous data loading.

Llakalia@wpi.edu
79% match
Loading thumbnail…

Fork of Loading Data

This example demonstrates asynchronous data loading with D3 v7 by fetching and parsing the Iris Dataset from a local CSV file. It shows the raw parsed data as a JSON-formatted text preview inside a `<pre>` element, updating the view once the data arrives. The visualization uses `fetch()` to request `data.csv`, converts the response text with `d3.csvParse`, and coerces numeric columns to numbers before storing them in state. The `viz.js` module manages a loading state, initially rendering nothing until the data is processed, then displaying the full dataset structure.

NNatália
79% match