RonyHobby

@RonyHobby·10 public vizzes

Cars Report - Part 3

This example displays a single formatted car listing on a web page, drawing from an embedded JavaScript array of car objects that includes make, model, year, and price. It filters the data to select cars priced under $2,000, but then only renders the first car from the original array as text. The page uses React and a simple HTML preformatted text element, with the message composed via JavaScript string interpolation. The data source is hardcoded in a `cars.js` file, and the output is presented in a large monospaced font.

Jun 20, 2022

Loading thumbnail…

Cars Report - Part 2

This visualization displays the make of the first car in a hardcoded JSON dataset, outputting “Honda” as large text on a web page. It uses JavaScript to parse the embedded `carsJSON` string via `JSON.parse` and accesses the first object’s `make` property, then sets that value as the content of a `<pre>` element using the DOM API `document.getElementById`. The React framework is listed as a dependency, but the code itself runs as plain JavaScript without React-specific calls.

Jun 20, 2022

Loading thumbnail…

Cars Report - Part 8

This example displays a report of affordable cars, listing each vehicle’s year, make, model, and price in a large-text HTML `<pre>` element. It uses JavaScript arrays and objects to store car data in `cars.js`, and demonstrates modular programming with `formatCar` and `generateReport` functions. The report filters the car list to show only those priced under $2000, using `Array.filter`, `Array.map`, and `Array.join` to construct the output.

Jun 18, 2022

Loading thumbnail…

Cars Report - Part 7

This example demonstrates a text-based car report generated from an array of car objects, filtering listings by price and formatting each as a string. The code uses JavaScript modules and ES6 features such as `import`/`export`, destructuring, and arrow functions. The `generateReport` function imports `formatCar` to assemble the final output, which is displayed in an HTML `<pre>` element. The project relies on Rollup to bundle the JavaScript modules into `bundle.js` for execution in the browser.

Jun 18, 2022

Loading thumbnail…

Cars Report - Part 6

This example displays a text report listing cars priced under $2,000, generated from an inline JSON dataset. The React-based code filters the `cars` array by price, formats each entry using a custom `formatCar` function, and joins the results with newlines into a single message. The report is rendered into a `<pre>` element styled with large font size, leveraging standard DOM manipulation via `document.getElementById`. The approach demonstrates data transformation and filtering with JavaScript’s array methods (`.filter`, `.map`, `.join`) in a minimal HTML page.

Jun 18, 2022

Loading thumbnail…

Cars Report - Part 5

This example displays a filtered text report of car listings. The React application imports car data from a JavaScript module and a formatting function, then generates the report by filtering for vehicles priced under $2000 and mapping each to a formatted string using the `formatCar` function. The resulting message is rendered as a large text element on the page.

Jun 18, 2022

Loading thumbnail…

Cars Report - Part 4

This example displays a text-based report of cars priced under $2000, listing each vehicle’s year, make, model, and price. The code imports car data from `cars.js`, filters the array using JavaScript’s `.filter()`, formats each entry with a template literal, and joins the results into a single string. It then renders the output by setting the `textContent` property of a `pre` element in the HTML, using React as the framework. The report is generated directly from the hardcoded JSON data, with styling applied through inline CSS.

Jun 18, 2022

Loading thumbnail…

Cars Report - Part 1

This example displays the first car’s make from a hardcoded JSON array of five car records, rendering "Honda" as large text in a `<pre>` element. The data is parsed with `JSON.parse` and the message is set via `document.getElementById().textContent`. It uses plain HTML, CSS, and vanilla JavaScript, with no external libraries, serving as a minimal React Starter preamble. The page loads a bundled `bundle.js` and demonstrates basic DOM manipulation for a simple text report.

Jun 18, 2022

Loading thumbnail…

Hello world

A minimalist web page displays the text "Hello World" rendered in large type. The example demonstrates the foundational web technologies of HTML, CSS, and JavaScript. The page structure and styling are defined in `index.html`, while `index.js` uses the Document Object Model (DOM) API `getElementById` to set the text content of a `<pre>` element. The code relies on no external libraries, offering a bare-bones starting point for web development.

Jun 18, 2022

Loading thumbnail…

Make_a_Face_Part3.1

A smiling face is drawn with a large yellow circle for the head, two dark eye circles, and a curved mouth arc, all centered within an SVG canvas. The React app uses D3's `arc` function to generate the mouth path, defining inner and outer radii, as well as start and end angles. The head, eyes, and mouth are positioned relative to the canvas center, with stroke and fill properties set directly on SVG elements.

Jun 15, 2022