requirebin sketch

100%

requirebin sketch

✓ Published0🌍 Public

Last edited Aug 8, 2016

Created on Aug 8, 2016

This example demonstrates a data package loader built with the barracks and chi-datapackage libraries in a Vue application. It loads and normalizes a datapackage from a GitHub URL, fetches its resources, and updates the application state asynchronously using a unidirectional data flow with reducers and effects. The visualization showcases state management for datapackage resources, with actions logging load progress and state changes to the console.

AI-generated description

Similar vizzes

Loading thumbnail…

requirebin sketch

This example demonstrates how to load and manage a data package using the `chi-datapackage` library within a Vue application. It shows the flow of loading a remote dataset, dispatching actions, and updating application state through the `barracks` framework's model, effects, and reducers. The visualization is driven by `index.js`, which uses `dp.load` to fetch a JSON data package from GitHub, then triggers a `replacePackage` reducer to update the state. The code also logs state changes and actions via lifecycle hooks, illustrating a functional reactive pattern for handling data-driven charts.

HHypercubed

93% match

Loading thumbnail…

requirebin sketch

This example demonstrates a data-package loading workflow using the chi-datapackage library within a Vue-based requirebin sketch. It shows how to fetch a datapackage from a GitHub URL, normalize its resources and schemas, and load its data. The code then programmatically adds a new CSV resource containing the values `A,B,C` and `1,2,3`, updating the package state. State changes are logged to the console, illustrating the store’s reactive `onStateChange` and `onError` callbacks. The example highlights the chi-datapackage API’s promise-based pipeline for loading, normalizing, and processing tabular data resources.

HHypercubed

91% match

Loading thumbnail…

requirebin sketch

This example demonstrates a minimal client-side application that loads a data package from a remote URL using the `chi-datapackage` library, then manages the resulting state through the `barracks` event-based architecture. The code shows a unidirectional data flow where a `loadPackage` effect triggers a `replacePackage` reducer to update the application state. It also logs actions and state changes for debugging. The visualization itself is not rendered in the provided files; instead, the focus is on the data-loading and state-management pipeline, with the package.json specifying the required dependencies for this workflow.

HHypercubed

91% match

Loading thumbnail…

requirebin sketch

This example demonstrates reactive state management in a React application by loading and observing a data package from a GitHub-hosted JSON file. It uses MobX to create an observable `package` property on a store, with an `observe` listener that logs changes to the console whenever the package is updated. The code loads dataset metadata via the `chi-datapackage` library, triggering the observer when the asynchronous load completes. The sketch shows how MobX tracks and reacts to state changes in a minimal data-loading workflow.

HHypercubed

76% match

Loading thumbnail…

Loading Data

This example demonstrates a simple unidirectional data-flow pattern where the state is managed centrally and passed to a visualization function. The visualization renders the loaded data as a formatted JSON string inside a `<pre>` element, initially displaying a "LOADING" placeholder. Using the `csvParse` method from D3 v7, it fetches a CSV file from a GitHub gist containing NY State Assembly data, parses it, and updates the state to trigger a re-render. The code uses `select` and `join` to bind the data to the DOM, showing a clean separation between state management and rendering.

Llupica.matthew@gmail.com

62% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to import local ES6 modules alongside D3 loaded from a CDN, with D3 v5 fetched from UNPKG. The page renders a large text element whose content is set by the bundled JavaScript, while CSS is imported from a local stylesheet. The code uses the global `d3` object to manipulate the DOM and assign the message, and the `script` tag loads a prebuilt `bundle.js` file. The visualization focuses on module loading and basic DOM updates rather than data-driven rendering.

Uuskh580e

62% match

Loading thumbnail…

Activity 6

This example demonstrates how to load data from a remote CSV file and display it in a web page using D3.js v5 and Vue. The visualization retrieves the dataset via a GitHub Gist URL using D3's `csv` function, then formats and displays the first 10 rows as JSON in a `<pre>` element. It also showcases importing from the D3 library and local ES6 modules, with the SVG and WebGL rendering infrastructure defining the page layout.

Mmn0658

62% match

Loading thumbnail…

Untitled

This example demonstrates how to load D3 via UNPKG and use ES6 module imports with Vue. The page renders an SVG element containing an embedded JPEG image, while the JavaScript uses `select` from D3 to set the text content of an HTML element with a message imported from a local module. The code also includes CSS styling for the message, showing integration between D3, custom modules, and Vue framework.

LLakshmanRangisetti

61% match