aliyevmirzakhan

@aliyevmirzakhan·10 public vizzes

Let's make a face!

A red SVG canvas displays a simple face drawn with D3.js, using the `d3.select` API to target the `<svg>` element and set its background color. The visualization relies on D3 v5, loaded via a CDN, and renders entirely through SVG. The face itself is constructed with basic SVG shapes, though the code provided only initializes the canvas and applies the red background before the bundled script executes.

Aug 28, 2019

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced above zero, formatted as make, model, year, and price. The report loads asynchronously with a simulated five-second delay via a Promise. The code uses ES6 modules, `Array.filter`, `Array.map`, and `Array.join` to generate the output, with `getCars` parsing JSON data. The final message replaces a “loading” placeholder in the HTML. The visualization relies on `document.getElementById` to update the DOM, and styles are defined in CSS with the Ubuntu font.

Aug 26, 2019

Loading thumbnail…

Cars Report

This example displays a simple text-based report of cars filtered by price. It shows a loading message while a promise with a five-second delay resolves, then renders a formatted list of vehicles whose price exceeds a maximum threshold. The entry point (index.js) calls `getCars()`, a function that parses inline JSON data and returns a Promise, then uses the `generateReport` and `formatCar` ES6 modules to filter and stringify each car’s make, model, year, and price. The output appears in a styled `<pre>` element on a dark page.

Aug 26, 2019

Loading thumbnail…

Cars Report

This example demonstrates a text-based car report generated from an embedded JSON dataset. The page displays a loading message while `getCars()` resolves after a 5-second delay, then renders a filtered list of cars priced above a threshold. The code uses ES6 modules, promises with `setTimeout`, and the `filter`, `map`, and `join` array methods to format each car with the `formatCar` function. The output appears in a styled `<pre>` element with Ubuntu font and a dark background.

Aug 26, 2019

Loading thumbnail…

Cars Report

This example displays the first car from a hardcoded JSON dataset, rendering its object properties as plain text on a large, styled webpage. The code imports an array of car records from `cars.js` using an ES6 module, then accesses `cars[0]` to select the Honda Accord. It updates the DOM by setting the `textContent` of an element with the ID `message-element`, while external styling via Google Fonts and a dark background creates a bold presentation. No charting or visualization libraries are used; the focus is on basic data parsing and DOM manipulation.

Aug 26, 2019

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data-report generator that filters a hardcoded list of cars by price and formats the results into a text report. It uses the `generateReport` and `formatCar` functions to process a JSON array of car objects, displaying only vehicles priced above a maximum threshold. The code relies on Promises via `getCars`, which resolves the car data after a simulated delay, and updates the DOM through `textContent`. The page loads with a “loading” message before showing the final report in a styled `<pre>` element.

Aug 26, 2019

Loading thumbnail…

Cars Report

This example displays the make of the fourth car in a hardcoded JSON dataset, rendering the text "Mercedes" in large, styled font on a dark background. The data is parsed using `JSON.parse` within a `cars` module, and the result is injected into a `<pre>` element via `document.getElementById` and `textContent`. Styling relies on CSS, including a Google Fonts import for Ubuntu, while the page structure uses a minimal HTML template. The visualization demonstrates basic data extraction and DOM manipulation without additional libraries.

Aug 26, 2019

Loading thumbnail…

Untitled

This example displays a single, massive word in the center of the screen, rendered at a font size of 12em against a dark blue background. It uses the Google Fonts 'Ubuntu' typeface, imported via CSS, and relies on the browser’s text rendering engine to draw the glyph. The page is minimal, with no JavaScript-driven interaction or data input; its sole visual output is the static, high-contrast typographic statement. The code’s primary logic is contained in the CSS and HTML structure, with JavaScript files present but not visibly altering the display.

Aug 23, 2019

Loading thumbnail…

Untitled

This example presents a single, enormous numeral in a dark, space-themed scene, rendered with a glowing light-blue color. The visualization is a direct, code-driven display of a large text element, styled with a Google Fonts `Ubuntu` typeface. The entire page is centered and uses a plain HTML body, with no interactive or animated components. Its purpose is purely typographic, demonstrating the visual impact of a vast, single-character message against a contrasting background, and it relies on the CSS `@import` rule to load the external font.

Aug 23, 2019

Loading thumbnail…

Untitled

A single, oversized "3" fills the browser window, rendered in a bold Ubuntu font against a deep navy background. The visualization animates the numeral through a subtle vertical float, creating a hypnotic, large-scale typographic display. It uses a plain HTML/CSS layout with JavaScript to manage the animation timing, while the styles.css file sets the visual theme. The piece is a minimalist study of scale, color, and motion, driven by the `myMessage.js` script to control the displayed text.

Aug 23, 2019