Pourmahmood

@aghababa·10 public vizzes

Costomizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, with population values labeled in billions using a custom tick format that converts “G” to “B.” The chart strips default axis lines and gridlines, using only tick marks and labels, while adding axis and title text. The visualization is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and renders as SVG. Data is loaded from a CSV file via `d3.csv`, with population values scaled by 1,000.

Nov 13, 2020

Loading thumbnail…

Let's make a face with D3.js

A face is generated from a set of user-defined control points using an energy-minimizing curve model. The visualization displays the evolving contour as it deforms into a recognizable facial profile, with the underlying algorithm calculating signed distances from closed and unclosed curve segments. The implementation leverages D3.js v6 for rendering and NumJS for numerical operations, with the core `distPointClosed` and `distPointUnclosed` functions driving the shape's deformation.

Nov 7, 2020

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to draw a simple face using polylines in D3.js v5. The visualization renders a blue zigzag line across an SVG canvas, tracing a rough facial outline from scattered coordinate points. The code defines a `draw` function that uses `d3.line` to create a line drawer, which is then applied to an array of coordinate pairs. The SVG element is selected with `d3.select`, and the resulting path is appended with customizable stroke styling. The example highlights D3's declarative API for building vector graphics from raw data points.

Nov 3, 2020

Loading thumbnail…

Cars Report

This example displays a single data point—the year of the first car in a small in-memory dataset—as large text on a plain HTML page. It parses a hardcoded JSON array of car objects (with fields like make, model, price, and year) using `JSON.parse` and writes the value to the DOM via `document.getElementById().textContent`. The visualization uses no external libraries beyond React, which is referenced in the project metadata but not actively used in the code shown. The rendering approach is minimal, with no charts or interaction.

Nov 2, 2020

Loading thumbnail…

Making a Barchart

This bar chart displays the populations of ten countries, using horizontal bars sorted by value. Built with D3 v5, it loads data from a CSV file and renders as SVG. The visualization uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisTop` and `d3.axisLeft` to generate ticks. Bars are appended as `rect` elements, with population values scaled by a factor of 1,000.

Oct 30, 2020

Loading thumbnail…

Let's make a face with D3.js

A face is drawn with SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows and nose, and an arc path for a mouth. The eyebrows and nose animate up and down using chained D3 transitions. The example uses D3.js v5, appending shapes to an SVG group centered in the canvas, with styling from a CSS file.

Oct 30, 2020

Loading thumbnail…

My face with D3

A smiling cartoon face built entirely from D3 v5 SVG shapes. The example uses d3-selection to append and position circles, rectangles, and arc-generated paths for the head, eyes, nose, mouth, ears, hair, and neck, with a yellow face, red mouth interior, and orange ears. The d3-arc API draws the curved eyebrows, mouth, ears, and hair with explicit inner and outer radii and angular ranges. Static, hard-coded coordinates and radii define the layout, with commented-out eyebrow rectangles showing an alternative design.

Oct 30, 2020

Loading thumbnail…

My HTML, SVG and CSS

This example demonstrates fundamental SVG shapes and CSS styling within an HTML page, using a static dataset of car prices displayed in two unordered lists. The visualization shows how SVG circles, rectangles, lines, and paths can be organized with nested groups and transform attributes like scale and translate, while CSS classes control text color and stroke properties. The code relies on native SVG elements and CSS selectors, with no external libraries, and renders directly as vector graphics in the browser.

Oct 23, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shape elements are styled using both presentation attributes and CSS. It shows circles, rectangles, lines, and a path, with solid colors, strokes, and transforms applied. The code uses vanilla SVG markup with CSS rules from an external stylesheet, including a `.lines` class to set stroke properties. A `<g>` element applies `fill`, `stroke`, and `stroke-width` as inherited attributes, while another group uses a `translate` transform. The example highlights how CSS and SVG attributes interact to control visual appearance.

Oct 23, 2020

Loading thumbnail…

HTML Cars Report

This example displays a static, unstyled HTML report titled “Cars Report” that lists three key-value pairs (a: 1, b: 2, c: 3) as bullet points. It demonstrates how plain HTML and CSS can be used for simple data presentation, with the first list item highlighted in red via the CSS class `.highlighted`. The page uses no JavaScript libraries or data-loading mechanisms; its rendering relies solely on the document’s native HTML structure and the external `styles.css` file, which sets a monospace font at a large size. The data source is hardcoded directly in the `index.html` markup.

Oct 22, 2020