AchrafHNAKA911

@AchrafHNAKA911·3 public vizzes

Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5, with scales from `d3.scaleLinear` and `d3.scaleBand` to map population values and country names. Customized axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with tick formatting that converts values to billions. The chart is rendered as SVG, with styled tick marks, gridlines, and labels defined in CSS.

Jun 26, 2022

Loading thumbnail…

Lets make a face

This visualization demonstrates how to construct a face-like figure using basic SVG shapes, populated with data from a CSV file containing country population figures. The code uses d3.csv to load the data, parses population values, and then appends rectangles to the SVG canvas via d3’s selection and data join methods. The example highlights the use of SVG attributes and D3 v5’s selection API to bind data to visual elements, with a simple stylesheet removing page margins for a full-viewport display.

Jun 26, 2022

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of used cars, filtering a small dataset to show only vehicles priced under $2,000. It displays formatted lines like “2009 Ford F150: $1950” in a large preformatted HTML element. The implementation uses React-free JavaScript with a custom `generatereport` function that filters and maps car objects, while `formatCar` handles string construction. The initial data comes from a hardcoded JSON array in `cars.js`, and the output is written to the DOM via `document.getElementById` in the `index.js` entry point.

Jun 25, 2022