fresh block

100%

✓ Published0🌍 Public

Last edited Apr 3, 2018

Created on Apr 3, 2018

This example demonstrates how to load and parse two separate CSV files using D3.js v5, then combine them with a Promise.all to log their contents to the browser console. It shows the process of handling multiple asynchronous data sources and verifying their successful retrieval. The code uses `d3.csv` to fetch each file and `Promise.all` to wait for both to resolve, while also loading the Fetch API and promise polyfills for broader browser support. The visualization itself is minimal, with the output appearing solely as console messages rather than rendered graphics.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/GerardoFurtado/'>GerardoFurtado</a>'s block: <a href='http://bl.ocks.org/GerardoFurtado/a1e47454526468ca3b2f62aa7212e2df'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example demonstrates how to load and combine multiple CSV files using D3 v5’s Promise API. It shows the parsed contents of two separate CSV files (file1.csv and file2.csv) logged to the browser console after both have loaded successfully. The code uses `d3.csv()` to fetch each file and `Promise.all()` to wait for both requests before logging the resulting arrays of objects. The page displays a simple heading and relies entirely on console output for visualization, with no graphical rendering. The data source is the two CSV files, and the approach highlights asynchronous data loading in D3.

GGerardoFurtado

97% match

Loading thumbnail…

fresh block

This example demonstrates loading two separate CSV files with D3 v5 and logging their contents to the browser console. It shows how to use promises with `d3.csv` to sequentially load multiple datasets, with each file’s data converted to JSON objects and printed for inspection. The page itself renders no visual output, serving purely as a test harness for asynchronous data fetching. It relies on the native Fetch API via the promise-polyfill and D3’s CSV parsing, and includes a minimal HTML structure with a heading and script. The data sources are `file1.csv` and `file2.csv`, each containing simple numeric columns.

GGerardoFurtado

94% match

Loading thumbnail…

fresh block

This example demonstrates how to load and inspect two separate CSV files using Promises in D3 v5. The code uses `d3.csv` to fetch `file1.csv` and `file2.csv`, then combines them with `Promise.all` to log the parsed data as JSON objects to the browser console. It explicitly shows the structure of each row, revealing fields like `foo`, `bar`, and `baz` with numeric values. The page itself displays only a static heading, while all observable behavior occurs in the console, making the data-loading pipeline the core focus.

GGerardoFurtado

94% match

Loading thumbnail…

fresh block

This example loads three separate JSON data files and uses `Promise.all` to wait for all asynchronous `d3.json` requests to resolve before proceeding. Once all files are fetched, it logs the combined array of parsed data objects to the browser console, demonstrating how to coordinate multiple data loads with D3 v5. The code relies on the native JavaScript Promise API rather than any custom visualization or rendering, and the visible data source is three small JSON files containing simple `foo` and `bar` numeric properties.

GGerardoFurtado

89% match

Loading thumbnail…

fresh block

This example demonstrates loading multiple JSON data files concurrently using D3 v5. It shows how to fetch three separate datasets and combine their results into a single array for further processing. The code uses `d3.json()` to request each file and `Promise.all()` to wait for all requests to complete before logging the combined values to the browser console. The visualization itself is not rendered—instead, the example focuses on the data-loading pattern, with the three JSON files containing simple objects with `foo` and `bar` properties. The approach highlights asynchronous data handling in D3 without any chart or graphical output.

GGerardoFurtado

87% match

Loading thumbnail…

fresh block

This example demonstrates how to load multiple JSON data files sequentially and log their contents to the browser console. It shows three separate data files, each containing an object with `foo` and `bar` properties, and uses `Promise.all` with an array of `d3.json` requests to fetch all files concurrently. The code relies on D3 v5’s promise-based asynchronous loading to handle the file requests, then logs the resolved array of parsed objects. No visualization is rendered; the focus is purely on data loading and promise handling.

GGerardoFurtado

87% match

Loading thumbnail…

fresh block

This example demonstrates how to load and process multiple JSON data files concurrently in a single D3.js application. The visualization itself is not yet rendered; instead, the code focuses on fetching `data1.json`, `data2.json`, and `data3.json` using the `d3.json` method and combining their resolved values with `Promise.all`. The resulting array of parsed JSON objects is logged to the browser console, showing the structure of the data for future use. The code relies on the D3 v5 library for its promise-based asynchronous loading, setting up a foundation for subsequent data binding or chart creation.

GGerardoFurtado

86% match

Loading thumbnail…

fresh block

This example loads a live dataset from the UN OCHA Pooled Fund API via `d3.csv` and logs the parsed rows to the browser console. It demonstrates the basic pattern of fetching external CSV data and inspecting its structure, but the page itself renders no visual output—only a static heading. The code relies on the standard D3 v5 fetch-and-parse pipeline, showing how to retrieve tabular data asynchronously and handle the returned promise with `.then()`. The example serves as a minimal starter template for debugging data before building a chart.

GGerardoFurtado

82% match