AparnaPSha

@AparnaPSha·5 public vizzes

Shapes with SVG and CSS

This example displays four basic SVG shapes—two circles and two rectangles—positioned on a 960×500 canvas using inline SVG markup. The shapes appear in two rows, with the top row using default black fills and the bottom row using explicit green and yellow fill colors. It demonstrates how SVG elements can be styled directly through attributes or CSS, though the provided stylesheet only sets body margins and overflow. The visualization serves as a minimal technical reference for combining SVG geometry with basic CSS for layout control.

Jun 23, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple car inventory report listing three vehicles with model years, names, and prices. It shows how a static HTML page can use pure CSS to style data, with the 2002 Nissan Leaf highlighted in red to draw attention. The markup relies on standard HTML list elements and a linked `style.css` stylesheet, using the `font-family` and `color` properties for typography and emphasis—no JavaScript or external libraries are involved.

Jun 23, 2020

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of car listings, showing each vehicle’s year, make, model, and price, filtered to include only cars under a $2,000 threshold. It uses a simulated asynchronous data source via `getCars()` with a `Promise` and `setTimeout`, then processes the data with `generateReport()`, which applies `Array.filter`, `Array.map`, and `formatCar()` to build a formatted string. The output is displayed in a `<pre>` element, updated after a two-second loading delay using the DOM API `document.getElementById`. No external libraries are used, relying solely on vanilla JavaScript and HTML.

May 15, 2020

Loading thumbnail…

Cars Report

This example displays a simple text report listing cars priced under $2,000, with each entry formatted as the year, make, model, and price. The report is generated by filtering a hardcoded JSON dataset of five used cars, then mapping each matching car through a formatting function. The code demonstrates modular JavaScript with ES6 imports and exports, using template literals for string construction and leveraging the `Array.filter` and `Array.map` methods. The resulting message is inserted into a `<pre>` element in the HTML via the Document Object Model.

May 14, 2020

Loading thumbnail…

Cars Report

This visualization shows the make and model of the first car in a small built-in dataset, displaying "Accord" in large text. It relies on a JavaScript array defined in `cars.js`, which is parsed into a JSON object and imported into `index.js`. The code accesses the first element of the `cars` array and sets the `textContent` of the `message-element` in `index.html` to display the model name. The overall approach is a minimal data-reporting example, using the DOM API for simple output.

May 14, 2020