requirebin sketch

100%

requirebin sketch

✓ Published0🌍 Public

Last edited Sep 13, 2016

Created on Sep 13, 2016

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.

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 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.

HHypercubed

91% 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

86% 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

79% match

Loading thumbnail…

Untitled

This example demonstrates how VizHub’s `package.json` support enables explicit dependency management and custom library mappings. The code configures React and ReactDOM to load from unpkg via specified global names and CDN paths, using the `vizhub.libraries` field. Unlike a typical visualization, the JavaScript file reads stdin with `fs` and prints an ascending sequence, while the page itself renders styled static text. The example highlights the setup process for importing packages with ES6 syntax rather than showcasing interactive data rendering.

HHan Jinseok

64% match

Loading thumbnail…

requirebin sketch

This example demonstrates two MobX patterns for managing derived state in a React application. It shows how `mobx.observable` creates reactive state objects, while `mobx.autorun` automatically tracks dependencies and re-runs a "someReallyExpensiveTest" function whenever the input changes. The visualization contrasts an imperative approach using `autorun` with a declarative approach using computed getters that chain `isBoolean` and `isString` properties. Console output logs state transitions as inputs toggle between booleans and strings, highlighting MobX's reactivity model.

HHypercubed

63% 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…

test

This example demonstrates a minimal HTML page that loads a JavaScript module defining a set of Redux-style actions for managing a complex visualization state, including map navigation, polygon selection, and graph interactions. The page uses plain HTML and CSS to display a static greeting, while the script imports and logs the action registry generated from a list of action types. It illustrates how to structure a front-end application with a central action system, using symbols for action types and a proxy to catch undefined references. No visual rendering or data source is included beyond the console output.

YYann

61% match