Skip to main content
SimilarExport ZIP
100%

Fork of Transforming Data

✓ Published0🌍 Public
SSpencer McAvey
Last edited Feb 23, 2023
Created on Jan 25, 2023
Forked from Transforming Data

This example demonstrates the results of applying D3 data-transformation APIs to a dataset of Human Development Index (HDI) indicators for countries across multiple years. It shows how aggregation methods like `flatRollup`, grouping via `flatGroup`, and `bin` summarize and reshape the raw CSV data into compact summaries. The visualization outputs the transformed results as formatted JSON text using `select` and `join`, displaying counts, averages, or binned ranges depending on the uncommented transformation. The code relies on D3 v7 functions such as `csvParse`, `bin`, `min`, `max`, and `extent` to process the data.

AI-generated description

Examples of various data transformation techniques on my HDI dataset :)

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Transforming Data

This example demonstrates the process of transforming a Healthy People 2020 dataset through binned aggregation and summary statistics, showing computed averages of final year estimates grouped by population group. The visualization begins by fetching a CSV file via a GitHub gist URL, then uses d3.csvParse to load the data. It employs d3.flatRollup, d3.sum, and d3.bin to calculate aggregated values and create binned distributions across numeric fields. The output displays the raw parsed data as JSON text using d3.select and .join.

KKhatera Alizada
80% match
Loading thumbnail…

Transforming Data

This visualization demonstrates data transformation techniques, specifically binned aggregation, using the D3.js library. It loads S&P 500 stock data from a CSV file and applies various D3 operations such as `flatGroup` and `flatRollup` to summarize the data. The example groups the dataset by industry and displays the resulting summary as a JSON object on the page. The code also includes commented-out examples of other transformations, such as computing minimum, maximum, extent, and creating binned histograms. The final output shows the transformed data structure in a simple text format.

Kkratikashetty1102@gmail.com
75% match
Loading thumbnail…

Fork of Transforming Data

This example illustrates data transformation techniques on the classic Iris dataset, showing how to summarize raw CSV data into aggregated statistics. The visualization computes the average sepal length for each iris species using d3.flatRollup and d3.sum, then renders the resulting summary as a JSON object in a preformatted text block. The code demonstrates the use of d3.csvParse for data loading and d3.select for DOM manipulation.

AAlena Egorova
74% match
Loading thumbnail…

Fork of Transforming Data

This example demonstrates data transformation by fetching a CSV file of stock data, parsing it with `d3.csvParse`, and grouping the records by industry using `d3.flatGroup`. It then counts the number of stocks per industry and displays the resulting summary as a JSON string in a `<pre>` element. The visualization uses D3 v7's selection and join APIs to render the computed counts, showing a simple text-based aggregation of the underlying dataset.

Kkratikashetty1102@gmail.com
72% match
Loading thumbnail…

Transforming Data

The visualization demonstrates how D3 data transformation APIs can reshape the Iris dataset, computing the average sepal length for each species via `flatRollup` and `sum`. After fetching the CSV with `fetch()`, the data is parsed with `csvParse` and converted to numeric types. Results are displayed as formatted JSON in a `<pre>` element, showing a concise summary of the aggregated values. The example highlights the use of `flatRollup` and `sum` from the D3 API to perform binned aggregation and group operations.

Iindushashi.g@gmail.com
72% match
Loading thumbnail…

Loading HDI Data

This example demonstrates a data-loading workflow for the Human Development Index dataset, which tracks metrics like life expectancy, education, and income per country from 1990 to 2021. The visualization displays the raw parsed data as JSON text in a styled `<pre>` element, showing the dataset’s structure after being fetched and processed. The code uses D3 v7’s `csvParse` to convert the CSV file retrieved via `fetch` into an array of objects, managing a loading state through a simple state-management pattern with `setState`. The data originates from a Kaggle-hosted dataset covering global development indicators.

SSpencer McAvey
71% match
Loading thumbnail…

Transforming Data_NH

This visualization demonstrates binned aggregation and data transformation techniques using D3.js (v7). It loads solar energy data from a CSV file and computes the average maximum wattage per site address using `flatRollup` and `sum` functions. The resulting summary is displayed as formatted JSON text within a `<pre>` element, showcasing how raw tabular data can be programmatically summarized. The example uses D3's `csvParse` for data parsing and `select` for DOM manipulation.

NNavak94
71% match
Loading thumbnail…

D3 data transformation

This example demonstrates several D3.js data transformation techniques on the classic Iris flower dataset. The visualization displays the raw data from a CSV file in a styled preformatted block, while the console logs the results of operations including `d3.min`, `d3.max`, `d3.extent`, `d3.group`, `d3.rollup`, and `d3.bin`. Using D3 v7 APIs like `flatGroup` and `flatRollup`, it shows how to aggregate observations by species and compute averages, culminating in a histogram of sepal lengths generated with `d3.bin`. The code loads data asynchronously via `d3.csvParse` after a fetch request.

SSubhendu Karmakar
70% match