Skip to main content
SimilarExport ZIP
100%

d3Edge_V5-dataLoading

✓ Published2🌍 Public
JJimMaltby
Last edited Mar 13, 2022
Created on Mar 13, 2022

This example demonstrates a modular data-loading pattern for D3.js v5, showing how to decouple CSV and GeoJSON fetching from chart rendering. It defines a `dataManager` module that uses `d3.csv` with async/await and `d3.json` to load external files, applying custom cleaning functions to the CSV data. The module dispatches custom events (`dataLoading`, `dataReady`) via `d3.dispatch`, and uses a custom replacement for the removed `d3.rebind` to expose event handling. The page displays a loading message until data arrives, then instructs users to inspect the cleaned data via `getCleanedData()`.

AI-generated description

MB alphabet example: https://bl.ocks.org/mbostock/3808234 https://bl.ocks.org/john-guerra/cabfbaed34d942e4dd81199855e4987f

A vanilla HTML implementation of Rob Moores updateable pattern Towards Updatable https://www.toptal.com/d3-js/towards-reusable-d3-js-charts.

It is derived from Mike Bostock's Towards Reusable Charts (https://bost.ocks.org/mike/chart/) as the source of the foundational principles.

Will evolve to use the ProD3 pattern (Pro D3.js Use D3.js to Create Maintainable, Modular, and Testable Charts by Marcos Iglesias https://www.apress.com/gp/book/9781484252024) as the basis for further charts.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3Edge_V5-dataLoading-v0.4

This example demonstrates a modular data-loading system for D3.js v5, built around a custom dispatch event manager. It loads a CSV file of Zurich transit delay data and a separate TopoJSON geographic file, applying a cleaning function to parse timestamps and coordinates. The code uses asynchronous `d3.csv` and `d3.json` loading with custom `dataLoading`, `dataReady`, and `geoReady` events, and exposes methods like `getCleanedData()` for console inspection. The visualization itself remains a placeholder, showing a loading message and instructions while the data pipeline runs.

JJimMaltby
91% match
Loading thumbnail…

Fork of d3Edge_V5-dataLoading-v0.1

This example demonstrates a custom data-loading module for D3.js v5, using a dispatch-based event system to manage asynchronous CSV and GeoJSON data. The module, defined as `d3Edge.dataManager`, loads Zurich transit delay data via `d3.csv`, applies a cleaning function to parse timestamps with `d3.time.format` and convert coordinates, and then dispatches a readiness event. The accompanying HTML page shows a "loading" message until the data is prepared, after which users can inspect the cleaned data in the console.

JJimMaltby
90% match
Loading thumbnail…

d3Edge_V5-dataLoading-v0.3

This example demonstrates a custom data-loading module for D3 v5 that manages asynchronous CSV and GeoJSON requests through a dispatch system. It shows how to load Zurich transit delay data from a remote CSV file, clean the rows by parsing timestamps and coordinates, and expose the processed dataset via a public API. The code uses `d3.csv`, `d3.json`, and a `d3.dispatch` event bus to signal loading progress and readiness, with a placeholder page indicating when data is available for console inspection.

JJimMaltby
88% match
Loading thumbnail…

loading data

This example demonstrates loading and logging data from a CSV file using D3 v5. The visualization initializes an SVG canvas with fixed dimensions and imports the `select` and `json` functions from the D3 library. Using the `json` method, the code fetches `data.csv` and logs the parsed data to the browser console. The chart itself remains empty, focusing solely on the asynchronous data-loading workflow.

DDemi Johnson
75% match
Loading thumbnail…

loading data d3

This example demonstrates asynchronous data loading in a React application using D3 v6. It fetches a CSV file of CSS named colors from a GitHub gist via `d3.csv()` and displays either a loading message or a data summary through a React state hook. The code uses `useState` and `setData` to trigger re-rendering when the promise resolves, while a secondary helper parses the fetched text with `d3.csvParse()` to show file size in kilobytes.

Kkhaled mohamed
73% match
Loading thumbnail…

Loading data with React & D3

This example demonstrates how to load external CSV data within a React application using D3 utilities, showing the data as raw text in the browser. The code uses React’s `useState` hook to store the fetched dataset and `useCallback` for memoization, while D3’s `csv` and `csvParse` functions handle parsing the remote CSV file, which contains named CSS colors. The app renders a simple message displaying the parsed data object instead of a chart, highlighting the initial data-loading pattern rather than visualization.

Jjamesc4
73% match
Loading thumbnail…

Loading Data w/ React and D3

This example demonstrates how to load external CSV data with D3 and manage it through React state. The app uses `d3.csv` to fetch a dataset from a GitHub gist, storing the parsed result via React's `useState` and `useEffect` hooks. While the data loads, the screen displays “loading”; once available, a custom `message` function reports the dataset’s size in kilobytes, row count, and column count as large SVG text. The visualization is minimal, focusing on the integration of D3's data-loading utilities with React's component lifecycle.

RRaphael Fogha
73% match
Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external CSV data into a React application using D3 utilities, displaying a simple status message that changes from “loading” to “loaded” once the data arrives. The code uses React’s `useState` hook to track the data state and D3’s `csv` function to fetch and parse the data from a local `data.csv` file. It also calculates the file size in kilobytes using `d3.csvFormat` and reports the row and column counts in a console message. The interface is minimal, showing only the loading state text.

Kkeitheade
73% match