Ali Shah

@Alistrandarious·12 public vizzes

Customisation! D3.js

This example displays the top 10 most popular dog names in NYC using a horizontal bar chart. The visualization shows the count of each name, with bars sized proportionally to their values. The code uses D3 v5 with an SVG rendering approach, reading data from a CSV file. It employs `d3.scaleLinear` and `d3.scaleBand` for axes, while `d3.axisBottom` and `d3.axisLeft` generate the ticks. The chart is customized through CSS styling, including steelblue bars and formatted tick labels using `d3.format`.

Feb 9, 2020

Loading thumbnail…

One programmer walks into a bar... D3.js

A bar chart displays the frequency of popular dog names from a CSV dataset, with horizontal bars showing counts for names like Bella and Max. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for the x-axis count scale and `scaleBand` for the categorical y-axis names. Axes are generated via `axisLeft` and `axisBottom`, while `csv` loads the data and rect elements are bound to the values.

Jan 30, 2020

Loading thumbnail…

Face Time! D3.js

A smiling face rendered in SVG animates its pupils downward, creating the effect of blinking eyes. The illustration uses basic geometric shapes: circles for the head, eyes, and pupils, plus a D3 arc path for the smile. Built with D3.js v5, the animation is driven by chained transitions that move the pupil positions over set durations. The SVG canvas is 960 by 500 pixels, with shapes styled via attributes like fill and stroke.

Jan 28, 2020

Loading thumbnail…

Shapes with SVG & CSS

This example shows a static collection of geometric shapes composed of circles and rectangles in three color-coded groupings, alongside polygonal line drawings. The first two rows demonstrate default black shapes, a set with explicit fill colors, and a translated group with purple fill and black strokes. A lower group renders two lines and a zigzag path with a thick black outline and yellow join styling. The visualization is built with raw SVG elements inside an HTML page, styled via CSS classes that apply stroke widths and colors to the line elements.

Jan 27, 2020

Loading thumbnail…

HTML Browser Report

This example shows a simple HTML browser report of used cars, displaying a list of three vehicles with their model years and prices. Named the “Cars Edition,” it renders a static page with an unordered list where one entry, the 2012 Nissan Leaf, is visually emphasized. The page relies on plain HTML structure and CSS styling, using the `class='highlighted'` attribute to apply red text color via the `.highlighted` rule in `styles.css`. The body sets a monospace font and larger font size, while no JavaScript or external visualization libraries are used.

Jan 27, 2020

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of cars priced under £25,000, generated asynchronously from a hard-coded JSON array. It shows how JavaScript modules, promises, and array methods like `filter` and `map` can transform raw data into formatted output. The code uses `getCars()` with a simulated 2-second delay to mimic an API call, then `generateReport` combines `formatCar` to display each vehicle’s make, model, sale price, and retail price. The result populates the page’s `<pre>` element, replacing a "Loading..." placeholder.

Jan 24, 2020

Loading thumbnail…

Cars Report

This example shows a text-based report of cars priced under £25,000, displaying each vehicle’s make, model, sale price, and retail price. The report uses a JavaScript module pipeline, importing car data from a JSON array via `JSON.parse`, filtering it with a custom `generateReport` function, and formatting each entry with a `formatCar` function. The final output is rendered into an HTML `<pre>` element using `textContent`. It demonstrates foundational JavaScript data handling, array methods, and module imports without relying on external libraries.

Jan 22, 2020

Loading thumbnail…

Cars Report

This gallery example demonstrates a simple text-based report generated from a hardcoded JavaScript array of car objects, filtered by price and formatted into a readable list. The page initially displays “Loading…” and then updates with the report after a two-second delay simulated by a Promise returned from `getCars`. The code uses JavaScript array methods `filter`, `map`, and `join`, along with template literals, to construct the output. Data is embedded as JSON and parsed with `JSON.parse`, while the user interface is updated via `document.getElementById` and `textContent`.

Jan 21, 2020

Loading thumbnail…

React Starter

This React Starter example displays an undefined game name and a blank root region, as it attempts to load video game data from a JSON array. The code imports the `gamez` array from `games.js` but mistakenly accesses `gamez.name` instead of an array element, leaving the message empty. It renders the React app via `ReactDOM.render` and uses a classic DOM `getElementById` call to set text content, relying on the React and ReactDOM production libraries from unpkg.

Jan 21, 2020

Loading thumbnail…

Games Report

This visualization displays the name of the first game from an imported `games` dataset. It uses React 16.10 and ReactDOM to render the message, while plain JavaScript updates a `<pre>` element's text content directly via `document.getElementById`. The data is sourced from the local `games` module, and the page is styled with a large 13em font size for emphasis.

Jan 21, 2020

Loading thumbnail…

Games Report

This example displays the text "Hello HTML" centered on a plain white page, serving as a minimal demonstration of an HTML document rendered within a React-based visualization framework. The page is styled with a CSS rule that sets the body font size to ten em units and applies center text alignment. The underlying code consists solely of an HTML file with a single body element, making it a bare-bones starting point for browser-based visualizations. It does not incorporate any JavaScript data processing or rendering libraries.

Jan 21, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page, using a bare minimum HTML document. The page is styled with a CSS rule that sets the body’s text alignment to center and the font size to 13em. It demonstrates the fundamental structure of an HTML file, including the `<!DOCTYPE html>` declaration, a `<head>` section with a `<title>`, and a `<style>` block. The rendering relies entirely on the browser’s default HTML and CSS handling, with no external libraries or data sources.

Jan 21, 2020