Shridhar137

@Shridhar137·6 public vizzes

Cars Report

This example renders a simple text-based report of car listings, filtering a hardcoded JSON dataset to show only vehicles priced under $2,000. The React-free implementation uses a plain JavaScript array parsed from an embedded string and formats each entry with a custom `formatCar` function. The report is generated by chaining `filter`, `map`, and `join` methods, then written directly to the DOM via `document.getElementById` and `textContent`. No external visualization libraries are used; the output is displayed in a `<pre>` element with large font size.

Jan 10, 2020

Loading thumbnail…

Cars Report

This example displays a list of used cars priced under $2,000, formatted as text lines that include the year, make, model, and price of each vehicle. The view filters the imported dataset from `cars.js` using a JavaScript array method, then maps each entry to a formatted string and joins them for display. The rendering relies on React’s DOM manipulation through `document.getElementById` to update the page content, with the raw car data parsed from JSON.

Jan 10, 2020

Loading thumbnail…

HTML Starter

This example displays a message generated from car data, showing the first car in a JSON array formatted as “year make model price.” It uses `index.js` to import the car data from `cars.js`, filter for cars under $2000, and map them into a readable string, though only the first car is displayed in the HTML page. The page is styled with a large font size via CSS and uses `document.getElementById` to inject the message into a `message-element`. The underlying data is static JSON parsed with `JSON.parse`.

Jan 10, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” and updates a separate message element with data from a hardcoded `cars.js` file. It uses vanilla JavaScript to import the `cars` array, filter entries where the price is below $2000, and format them into strings, though only the first car’s make is actually rendered via `document.getElementById('message-element').textContent`. The page’s styling is set through inline CSS, and the code relies on ES module imports and template literals.

Jan 10, 2020

Loading thumbnail…

HTML Starter

This example displays a bare-bones HTML page that renders the text "Hello HTML" in the center of the viewport, styled with a large 13em font size. The code consists of a static `index.html` file with embedded CSS, while `cars.js` defines a sample dataset of car listings (Honda, Nissan, Ford, Chevrolet) parsed from a JSON string. The project serves as a minimal starting point for building web-based visualizations, requiring no additional libraries or frameworks beyond the React setup.

Jan 10, 2020

Loading thumbnail…

Cars Report

This example displays a minimal "Hello HTML" message centered on a blank page, using bold, oversized typography set at 13em. The code is built with React and rendered through a standard HTML file, with styling applied via a simple CSS block. It demonstrates the basic structure of a VizHub React starter template, where the `index.html` file contains both the markup and styles, while the separate `index.js` file would house the interactive logic. The visualization emphasizes layout and text presentation over data or complex rendering, serving as a foundational scaffold for future charts.

Jan 10, 2020