anton madjid

@antonmadjid·4 public vizzes

Make bar chart part 1

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It visualizes population values as the bar width and country names along the vertical axis, demonstrating customized D3 axes with styled tick labels and a title. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render the axes. Rectangles are appended to an SVG group and positioned using the scales, with styling applied via CSS.

Feb 5, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It showcases customized D3 axes, including a formatted x-axis that converts large numbers into abbreviated labels like "1.42B" and removes unnecessary tick lines and domains. The chart uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft with tick formatting via d3.format. Population data is loaded from a CSV file and rendered as SVG rectangles styled with CSS.

Feb 4, 2020

Loading thumbnail…

D3 Make A Face

This example displays a simple face made from a single yellow circle centered on a red SVG canvas, with a welcome message in the page header. The visualization uses D3 v5’s `select` and `append` APIs to create the circle, reading the SVG’s width and height attributes to position it dynamically. It demonstrates basic SVG rendering and D3 selection methods within a minimal HTML page that loads D3 from a CDN and runs JavaScript through a bundled file.

Feb 3, 2020

Loading thumbnail…

Mobil Report

This example displays a list of cars with their year, make, model, and price, generated from an embedded JSON dataset. It shows all cars in one section and a filtered subset with prices under $2000 in another, using a Promise-based `getCars` function to simulate asynchronous data loading. The visualization uses React-like modular imports to parse the data, map it into formatted text strings via `viewMobil`, and render those strings into HTML `<pre>` elements. The core rendering relies on plain DOM manipulation through `document.getElementById` within a JavaScript bundle.

Feb 3, 2020