Shafeek Bakhach

@Shafeek-Bakhach·3 public vizzes

Smiley Face Pt1

This example creates a smiling face using React and SVG, rendering a yellow circle with black stroke for the head, two smaller circles for eyes, and a D3 arc path for the mouth. The code uses React 17 and D3 v6, specifically the `arc()` generator from the `d3` module to define the mouth's inner and outer radii and angular range. The SVG elements are positioned using fixed coordinates relative to the canvas center, with the face components drawn through React's declarative syntax.

May 12, 2021

Loading thumbnail…

Cars Report

This example displays a full-screen message reading “Hello VizHub!” on a dark blue background using the Ubuntu font. It demonstrates the basic setup of a VizHub project, including an HTML page that loads D3.js, a CSS file applying global styling, and JavaScript that imports a string from a local module. The code uses D3’s `select` function to target the `#message` div and set its text content. The data source is a hardcoded string exported from `myMessage.js` and rendered directly via `select('#message').text()`—no external dataset or complex visualization logic is involved.

Sep 6, 2019

Loading thumbnail…

Cars Report

This example displays a single car manufacturer’s name, “Mercedes,” extracted from a JSON array of car objects and rendered in large text on a webpage. It demonstrates how to parse structured data with `JSON.parse`, destructure object properties, and update the DOM via `document.getElementById` and `textContent`. The workflow separates fetching data (`getCars.js`), formatting entries (`formatCar.js`), and generating a filtered report (`generateReport.js`), though the visible page only shows the first car’s make. The code relies on ES6 modules and a Rollup-bundled script.

Aug 11, 2019