rida benbouziane

@BENBOUZIANE·6 public vizzes

HTML Cars Report

This example shows a static SVG composition of colored shapes and line elements arranged in a layered report-style layout. The visualization uses bare HTML with inline SVG, demonstrating basic geometric primitives like circles, rectangles, lines, and paths. Groups are transformed via scale and translate attributes, while CSS classes style the line elements with blue strokes and green path joins. The code relies on native SVG APIs and CSS styling, with no external JavaScript libraries or data loading.

Jun 2, 2020

Loading thumbnail…

Tree 7

This interactive tree diagram visualizes hierarchical data from a JSON file, using a node-link layout to show the structure of a medical facility's departments and services. The visualization is built with D3 v4, using the `d3.hierarchy` function to process the tree data and SVG for rendering. Users can interact with the diagram by dragging nodes to reorganize the tree, panning across the view, and zooming, with animations supporting these interactions.

Jun 2, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered with SVG circles and an arc path appears centered on a 960-by-500 canvas. Using d3.select and d3.arc, the code builds the face with a static head, eyes, and mouth, then animates the eyebrows with chained d3 transitions that shift a group’s transform attribute up and down over two-second intervals. The example demonstrates basic DOM manipulation and declarative animation with D3 v5, relying on SVG geometry and transition methods rather than data binding.

Jun 1, 2020

Loading thumbnail…

Cars Report

This example shows how to generate a text-based report of used cars priced under a given threshold, displayed in a large monospace font on a web page. It demonstrates asynchronous data handling, filtering, and formatting with JavaScript modules, using `Promise` and `setTimeout` to simulate a delayed data fetch. The code defines functions like `getCars`, `formatCar`, and `generateReport`, and updates the DOM via `document.getElementById`. The data source is a hardcoded JSON array, and the report is rendered as plain text inside a `<pre>` element.

May 22, 2020

Loading thumbnail…

React Starter

This React Starter example displays a list of four family members, showing each person's name, phone number, and birth year. The code parses a JSON array of personal data, filters the entries to include only those born in 1996 or earlier, and formats the results into a readable text report. It uses React 16.10.0 for DOM rendering, JavaScript's native `JSON.parse` to handle the inline dataset, and custom `filter` and `map` methods to process the records. The final output appears as a large, centered text message within the browser window.

May 22, 2020

Loading thumbnail…

Cars report

This example displays a list of people, showing their names, phone numbers, and years, filtered to only include years 1996 or later. The filtered data is joined into a single text string and displayed on the page. It uses the JavaScript `JSON.parse` method to load the dataset and the `filter` and `map` array methods to process it. The final message is assigned using the DOM API `document.getElementById().textContent`. The report is rendered inside a static HTML page with a React framework.

May 22, 2020