RamziCharradi

@RamziCharradi·4 public vizzes

Making a bar chart

A horizontal bar chart displays population counts for ten countries, sorted by descending value. The visualization uses D3.js v5 with SVG rendering, loading data from a CSV file and scaling populations linearly on the x-axis while using band scales for country categories on the y-axis. Axes are generated with d3.axisLeft and d3.axisBottom, and bars are appended as SVG rectangles with heights derived from the band scale’s bandwidth.

Dec 2, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn and animated using SVG primitives, with two eyes, eyebrows, and a mouth constructed from circles, rectangles, and a D3 arc path. The eyebrows repeatedly rise and fall via chained `transition().duration()` calls triggered by `setInterval`. Built with D3 v5, the code uses `select` for DOM access and the `arc` generator to shape the mouth, with all elements centered on an SVG canvas.

Nov 29, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create geometric compositions and letterforms. A grid of circles and rectangles shows how fill colors, stroke properties, and group-level transformations affect rendering, using inline attributes and CSS classes. The code also draws the word "RAMZI" using SVG path elements with rounded joins and caps. The visualization relies on raw SVG markup within an HTML document, styled entirely through an external stylesheet, with no JavaScript libraries involved.

Nov 29, 2019

Loading thumbnail…

Car Report

This example demonstrates a simple text-based car report that displays car details after a simulated data-loading delay. The page initially shows a “Loading...” message, then populates a `<pre>` element with formatted car listings. The code imports and uses D3’s `select` method to update the DOM, while custom modules `getCars.js`, `generateReport.js`, and `formatCar.js` handle data retrieval, filtering cars under a price threshold, and formatting each entry. Data is embedded as JSON and resolved asynchronously through a Promise.

Nov 28, 2019