JamesChirambo

@JamesChirambo·3 public vizzes

Cars Report

This example demonstrates a report of cars filtered by price, displaying formatted car details as plain text. The page initially shows a "loading..." message, then fetches car data from an embedded JSON array parsed with `JSON.parse`, which is delivered asynchronously through a Promise with a simulated 2-second delay. The core logic, using the `map` and `filter` array methods within a custom `generateReport` function, selects cars below a price threshold and formats each entry into a string like "1998 Honda CRV $1400". The React framework is referenced, but the current implementation relies on vanilla JavaScript to manipulate the DOM via `document.getElementById`.

Aug 3, 2021

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of car listings, filtering the dataset to show only vehicles priced under $20,000. It loads car data from a local JSON module and formats each entry into a readable string showing year, make, model, and price. The report is rendered into a `<pre>` element on the page. The code uses ES6 module imports and exports from local files, along with standard array methods like `filter`, `map`, and `join`. No external visualization libraries are used; the output is plain text.

Aug 2, 2021

Loading thumbnail…

Fork of Hello Package.json

This example demonstrates how to define custom CDN mappings for ES6 imports in VizHub’s `package.json` file. It renders a React component that displays “Hello” above a `<pre>` block containing “package.json,” using `react` and `react-dom` with the ISC license. The `vizhub.libraries` field maps package names to browser globals and unpkg paths, while `d3` is imported but not used. The app mounts via `ReactDOM.render` into a dynamically created DOM node.

Aug 2, 2021