muhammadumair41

@muhammadumair41·4 public vizzes

Making a Barchart

This bar chart displays the population of the top 10 most populous countries in 2020, based on UN World Population Prospects data. The visualization uses d3.scaleLinear for the x-axis mapping population values and d3.scaleBand for the y-axis country categories. It renders SVG rectangles with a steelblue fill, loads data via d3.csv, and employs d3.axisLeft and d3.axisBottom for the axes. The code applies margins and transforms to position the chart within an SVG canvas.

Jun 19, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows a basic SVG canvas containing circles, rectangles, lines, and a path, styled with CSS. The code uses raw SVG elements within an `<svg>` tag, grouping shapes with `<g>` tags and applying transformations like `scale` and `translate`. It demonstrates how CSS classes, such as `.lines`, can set stroke properties and how inline attributes like `fill` and `stroke` control appearance. The rendering relies entirely on the browser’s SVG engine, with no JavaScript libraries involved.

Jun 19, 2020

Loading thumbnail…

HTML Cars Report

This example demonstrates a simple list of used cars with model years, names, and prices, highlighting the first entry in red via a CSS class. It shows how to structure a basic HTML document that references a separate stylesheet for visual styling, using a monospace font and large text size. The implementation relies on plain HTML elements like `<h1>`, `<ul>`, and `<li>`, combined with CSS rules from `style.css` to apply the `.highlighted` class for emphasis. It serves as an introductory tutorial for organizing content with JavaScript objects and arrays.

Jun 19, 2020

Loading thumbnail…

Cars Report

This example shows a simple text-based report of cars, displaying year, make, model, and price after an asynchronous loading delay. The report filters cars by price and formats each entry using the `formatCar` function. The main script uses JavaScript promises and the `setTimeout` API via `getCars` to simulate fetching data. The `generateReport` module chains `filter` and `map` to process the parsed JSON array. The interface consists of a single `<pre>` element updated via the DOM `textContent` property, with the initial “Loading …” message replaced once the data arrives.

Jun 18, 2020