Yasser Mohseni

@yassermb·4 public vizzes

Making a Bar Chart!

This example shows a bar chart of the population of ten countries, with labeled values on the x-axis and country names on the y-axis, rendered as SVG rectangles. Using D3 v5, the code loads data from the UN World Population 2017 dataset and applies a linear scale for population counts and a band scale for categorical countries. The chart draws its axes via `axisLeft` and `axisBottom`, and populates the graphic with a data join that appends `rect` elements.

Dec 28, 2020

Loading thumbnail…

Let's make a face with D3.js!

A D3.js v5 example draws a cartoon face from SVG shapes, including a yellow circle head, eyes, and rectangular eyelids. The face animates by using `transition.attr` to move the eyelids downward and back, while the mouth path’s arc changes between two angles via an `arc()` generator. Data values for eye spacing and size are stored in an array, and the scene is centered using SVG transforms. The animation loops sequentially with `duration` settings on chained transitions.

Dec 28, 2020

Loading thumbnail…

Shapes with SVG and CSS

A simple SVG scene demonstrates basic geometric shapes and CSS styling. The graphic pairs circles and rectangles with distinct fill colors, including a group with a cyan fill and black stroke where a rectangle is rotated 45 degrees. Additional lines and a polyline path appear in yellow and blue with a rounded line join. The example uses raw SVG elements directly in HTML, with CSS selectors like `.lines` and `.lines path` to apply stroke properties, illustrating how SVG and CSS combine for static visualization.

Dec 26, 2020

Loading thumbnail…

HTML Cars Report

This example demonstrates an asynchronous HTML-based cars report that loads a hardcoded dataset of five used cars and filters them by price, formatting each entry as a line of text. It uses D3 via UNPKG for general data utilities, while the core flow relies on JavaScript Promises, `setTimeout`, and ES6 modules like `getCars` and `generateReport` to handle data loading and transformation. The report updates a `<pre>` element’s `textContent` with a formatted list of cars under a specified price threshold, styled with monospace font and CSS selectors.

Dec 25, 2020