nithya13

@nithya13·7 public vizzes

HTML Starter

This example displays a minimal HTML page with a heading and a list, where one item is highlighted in red through CSS. It demonstrates the basic structure of an HTML document created with standard markup and linked stylesheets, using the `style.css` file to apply text alignment, font sizing, and the `.highlighted` class. The page is built with plain HTML elements like `h1` and `ul`, showing a starting point for web development without any JavaScript libraries or frameworks.

Feb 4, 2020

Loading thumbnail…

Cars Report

This example displays a static text message, "Hello," on a webpage using a large HTML `<pre>` element. The visualization renders the message from a JavaScript file that imports a hardcoded dataset of car information, including year, make, model, and price, parsed from a JSON string. The code uses the `document.getElementById` API to update the text content, and it relies on a module import to access the car data, though the data itself is not visualized.

Jan 27, 2020

Loading thumbnail…

React Starter

This example demonstrates a minimal React setup for embedding a D3.js visualization, displaying a large, centered text message ("Hello World" style) in a responsive layout. The code uses React's `createRoot` API to mount a component, while D3's `select` and `text` methods manipulate the DOM directly within a `useEffect` hook. The visualization renders static text with no interactive or data-driven elements, serving as a bare-bones starter template for integrating D3 into a React application. The `index.html` file loads a bundled JavaScript file and styles the message with CSS.

Jan 27, 2020

Loading thumbnail…

HTML Starter

This example displays a single line of text, "Hello HTML," centered on a blank page using a massive font size of 13em. It demonstrates the simplest possible web page setup with a plain HTML structure and inline CSS for styling. The code uses core web technologies—HTML for content and CSS for presentation—without any JavaScript or external libraries. The visualization serves as a minimal starter template for building more complex interactive data visualizations in the browser.

Jan 27, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered in a large font, serving as a minimal starting point for web-based visualization projects. It uses a static HTML page with embedded CSS for styling and a separate `index.js` file that logs “hello” to the console, demonstrating basic scripting integration. The rendering approach relies on the browser’s native DOM and CSS, with the `bundle.js` script tag referencing the compiled JavaScript output. It provides a bare-bones foundation for building more complex visualizations without additional libraries or data sources.

Jan 24, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars, filtered by price and formatted into a readable list. It shows a loading message while fetching mock data asynchronously, then displays each car’s year, make, model, and price in a large <pre> element. The code uses native JavaScript modules and Promises, with `JSON.parse` to load inline data, `Array.prototype.filter` and `map` to process the list, and a custom `formatCar` function for output. The rendering relies on plain DOM manipulation via `document.getElementById` and `textContent`.

Jan 24, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars, filtering a list of five vehicles to show only those priced under $2,000. The page initially displays "Loading..." while a two-second delay simulates an asynchronous data fetch using a JavaScript Promise. After the delay, the report renders as multi-line text in a large <pre> element. The code uses ES6 modules to separate concerns: `getCars.js` parses JSON data, `generateReport.js` filters and formats entries with template literals, and `index.js` orchestrates the async flow. The visualization relies on standard DOM manipulation, not external libraries.

Jan 24, 2020