Skip to main content
Log in
A

Ahmed Negm

@a-negm·10 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

A face is drawn as a single circle centered within an SVG canvas, with its radius set to half the SVG's height. The example demonstrates basic D3.js v5 selection and attribute manipulation using `select`, `append`, and `attr` to position the circle dynamically based on the SVG's `width` and `height` attributes. The SVG is rendered in the browser with no external data source, focusing on simple geometric shape creation through D3's declarative API. The circle's center is computed from the SVG dimensions, and a CSS rule hides page overflow for a clean full-viewport display.

Aug 18, 2020
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text "Hello HTML" in large, centered type. It demonstrates the basic structure of an HTML document with embedded CSS styling and a JavaScript script tag that logs "Hello JavaScript!" to the browser’s console. The styling is applied via a `body` selector with `text-align: center` and a font size of 13em. The script uses `console.log` to output a message. No external libraries or frameworks are involved, making it a starting point for simpler front-end experiments.

Aug 18, 2020
Loading thumbnail…

Cars Report

This example demonstrates an asynchronous JavaScript workflow that generates a text report of used cars priced under $2,000. It shows a loading message, then fetches car data from a JSON array using a simulated `Promise` with `setTimeout`, filters and formats the entries, and displays the final list in a webpage. The code uses ES6 modules for exporting functions like `formatCar` and `generateReport`, employs `Array.filter`, `map`, and template literals to compose the output, and updates the DOM via `document.getElementById` and `textContent`. The report renders as plain text in a `<pre>` element with a large font.

Aug 17, 2020
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text "Hello HTML" in large, centered type. It demonstrates the basic structure of an HTML document with embedded CSS styling and a JavaScript script tag that logs "Hello JavaScript!" to the browser’s console. The styling is applied via a `body` selector with `text-align: center` and a font size of 13em. The script uses `console.log` to output a message. No external libraries or frameworks are involved, making it a starting point for simpler front-end experiments.

Aug 14, 2020
Loading thumbnail…

Cars Report

This example demonstrates an asynchronous text report generator. It shows how a React-based web application loads mock data and filters it to display a formatted list of cars under a price threshold. The code uses static JSON parsed with `JSON.parse` and a delayed Promise via `setTimeout` to simulate fetching data. The `getCars` function returns a Promise, and `generateReport` filters and maps car objects using `Array.filter` and `Array.map`, while `formatCar` constructs descriptive strings. The report appears in an HTML `<pre>` element after a "Loading..." state.

Aug 10, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays a static message. The page uses a plain HTML file with a `<pre>` element to render text, styled with CSS for larger font size. The code imports car data from a separate module, filters the cars by price under $2000, and formats them into strings, though the final display shows "bye" instead of the computed message. It relies on the DOM API `document.querySelector` to update the page content from an ES module.

Aug 10, 2020
Loading thumbnail…

Car Prices

This example displays a static list of car prices, including make, model, year, and price, from a hardcoded JSON array in `cars.js`. The page renders the text “Hello world” into an `<h1>` element, which is the only visible output. The code uses `document.getElementById` to set the text content, and imports data via `export` and `import` statements in React. The visualization does not yet chart or graph the data; it merely loads the dataset and displays a placeholder message.

Aug 10, 2020
Loading thumbnail…

Car Prices

This example displays car price information for a small dataset of five vehicles. It shows the raw data entries including make, model, year, and price, but does not render a chart or visualization. The page uses React to import car data from a dedicated JavaScript module, then dynamically sets an HTML heading element’s text content to a static “Hello world” message. The code utilizes standard DOM manipulation via `document.getElementById` and text content assignment, with no additional visualization libraries or rendering techniques applied.

Aug 10, 2020
Loading thumbnail…

HTML Starter

A minimal HTML page demonstrates the foundational structure for a data visualization, serving as a starting point for web-based projects. The example contains a single `index.html` file with no external dependencies or JavaScript libraries, focusing purely on the raw markup that defines a basic webpage. It provides a blank canvas for developers to build upon, whether they intend to add D3.js for interactive charts, Three.js for 3D rendering, or other visualization frameworks. The code reveals the bare-bones HTML skeleton, including the document type declaration, head and body elements, without any custom styling or scripting logic, making it an entry-level template for exploring the HTML specification.

Aug 10, 2020
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text "Hello HTML" in large, centered type. It demonstrates the basic structure of an HTML document with embedded CSS styling and a JavaScript script tag that logs "Hello JavaScript!" to the browser’s console. The styling is applied via a `body` selector with `text-align: center` and a font size of 13em. The script uses `console.log` to output a message. No external libraries or frameworks are involved, making it a starting point for simpler front-end experiments.

Aug 10, 2020