Z

zeyneb.mhamedi@gmail.com

@ZeynebMhamedi·16 public vizzes

Loading thumbnail…

Visualisation Forêt

A yellow face rendered as a composite SVG graphic, built with React components and D3.js v5. The visualization layers a circular background, symmetrical eyes, a nose, and an arched mouth using D3's `arc` generator for the mouth path. The face is centered within a fixed 360x360 viewport, with all shapes positioned via a React `<g>` transform. The code imports React and ReactDOM to mount the component, and uses D3's `range` (though not actively applied) and `arc` APIs to construct the geometry.

Loading thumbnail…

Arbre_Groupes_Accuracy_Triés

This visualization displays a forest of decision trees grouped and sorted by their accuracy scores. Each tree is rendered hierarchically using the D3 tree layout, with node colors (red, blue, or gray) indicating high, medium, or low accuracy. The trees are positioned along a horizontal accuracy scale, and an interactive dropdown allows filtering by accuracy group or specific feature. D3’s hierarchical layout and SVG rendering display the tree structures, with a legend and tooltip providing additional context.

Loading thumbnail…

Arbre_Axe_Accuracy

This visualization displays a forest of decision trees, arranged in a horizontal strip, with each tree colored according to its accuracy metric. The trees are rendered as hierarchical node-link diagrams using the `d3.tree` layout, and nodes change color to yellow when toggled. The code uses D3 v5 to import data, apply the tree layout, and generate SVG elements with animation, specifically leveraging `d3.hierarchy` to structure the data and a custom `getColorByAccuracy` function for fill colors. Links and nodes are drawn with SVG paths and circles.

Loading thumbnail…

Arbre_Groupes_Accuracy_Triés

A forest of decision trees is displayed in an SVG canvas, sorted into three accuracy groups (high, medium, low) and arranged horizontally by group, with each tree’s nodes colored by its root accuracy. Users can click a node to highlight all matching node names across trees in yellow. The visualization uses D3 v5’s `d3.hierarchy` and `d3.tree` layouts, with data from a local ES6 module. Node colors are assigned via conditional accuracy thresholds, and sorting is performed in descending order within each group.

Loading thumbnail…

Arbre_Groupe_Accuracy

This visualization displays a forest of decision trees, each with an associated accuracy score. Trees are arranged along the horizontal axis based on their accuracy, placing high-accuracy trees on the left and lower-accuracy trees on the right. The node colors (red, blue, gray) correspond to accuracy thresholds, and clicking a node highlights all nodes with the same name across the different trees. The visualization uses D3.js's `d3.tree` and `d3.hierarchy` to lay out each tree, and it leverages SVG for rendering, with an interaction that toggles a CSS class on matching nodes. The data is imported from a local ES6 module and displayed in a horizontally scrollable container.

Loading thumbnail…

Arbre_Accuracy_Caractéristiques

Four decision trees side by side show the accuracy of each model through the color and size of its root node, with red circles for accuracy above 0.8, blue for 0.6–0.8, and gray for lower values. The D3.js v5 layout uses `d3.tree()` to position nodes, while link and node elements are rendered as SVG. Clicking any node highlights that same characteristic across all trees by toggling a CSS class.

Loading thumbnail…

Arbres Triés

A ranked forest of decision trees visualizes model accuracy through color-coded root nodes, with red, blue, and gray indicating high, medium, and low performance. Users click any node to highlight all matching feature names across the four trees in yellow. The example uses D3 v5’s `d3.cluster()` layout to arrange each hierarchy radially, while SVG circles and CSS classes manage the interactive styling and tooltip display.

Loading thumbnail…

Arbre_Détection_Caractéristiques

This example shows a forest of four hierarchical trees, where each node is a circle. Clicking a node highlights it and all other nodes sharing the same name across different trees in yellow. The code builds the trees from a static JavaScript array using the D3.js library (d3.v5) with `d3.hierarchy` and `d3.tree` for layout, and renders them as an SVG with tooltips on mouseover.

Loading thumbnail…

Arbre Hiérarchique

This visualization displays a forest of hierarchical trees, with each node represented as a black circle and connected by vertical links. It uses D3.js (v5) with a `d3.tree()` layout to position nodes, and renders the structure as SVG paths and circles. The code binds mouse events to nodes, triggering a tooltip that shows the node's name, and it dynamically adjusts the SVG canvas size to fit all trees.

Loading thumbnail…

Student_Viz_Categories

A force-directed network graph visualizes student outcomes as colored nodes, with green for graduates, blue for enrolled students, and red for dropouts. Three large circles above the network act as filters, toggling the opacity of each category on click. The visualization uses D3 v5’s `d3.forceSimulation` with charge, position, and collision forces, rendering to SVG. Student data is loaded from a CSV file containing academic and demographic attributes.

Loading thumbnail…

Student Network Graph

A force-directed node-link diagram displays a network of students, with each node colored by academic outcome (green for graduate, blue for enrolled, red for dropout). The visualization uses `d3.forceSimulation` with `d3.forceManyBody` and `d3.forceCenter` to compute node positions, rendered as SVG circles. Student data from a CSV file is loaded via `d3.csv`. Hovering over a node logs its information to the console.

Loading thumbnail…

Fork of barGraph

This visualization combines a bar chart and scatter plot overlay to display 2022 population data for countries, with each circle positioned atop its corresponding bar to highlight population values. Users can sort the data ascending or descending via buttons, triggering animated transitions. The chart uses D3 v5 with `scaleBand` and `scaleLinear` axes, `axisLeft` with negative tick sizes, and `transition` for smooth updates. Data comes from a CSV file, rendered as SVG with tooltips showing country and population on mouseover.

Loading thumbnail…

Students_Dataset_Viz

This example demonstrates a principal component analysis (PCA) workflow on the `full_gea.csv` dataset. It loads the CSV with D3’s `csv` method, parses numeric columns, and reduces the data to two dimensions using a custom PCA implementation in `pca.js`, which relies on the `numeric` library’s `eig` function for eigenvector computation. The resulting projected coordinates are logged to the console, with no visual rendering shown. It illustrates importing local ES6 modules alongside D3 v6.

Loading thumbnail…

Display table Students Dataset

This example displays a tabular view of a student dataset loaded from a remote CSV file hosted on GitHub. Using D3 v5, the code fetches the data with `d3.csv` and dynamically builds an HTML table by appending a header row with `Object.keys` and body rows with `Object.values`. The page structure includes a standalone `index.html` with a linked stylesheet, and the table is styled via CSS. The visualization demonstrates straightforward data import and DOM manipulation with D3 selections like `selectAll`, `enter`, and `append`.

Loading thumbnail…

Students_Dataset_Viz

This example demonstrates Principal Component Analysis (PCA) on a student dataset, reducing high-dimensional data to two components for a scatter plot visualization. It loads CSV data from a GitHub repository, processes the numeric values, and applies a custom PCA implementation using the numeric library to compute eigenvalues and eigenvectors. D3 v6 renders the resulting projections as blue circles with x and y axes, using d3.scaleLinear and d3.axisBottom/axisLeft for the chart layout. The visualization shows how PCA reduces complex data into a clear 2D representation.

Loading thumbnail…

Hello Cercles

A red circle moves through a square path in five animated steps around a central group of four static circles in green, blue, pink, and orange. Clicking either the red circle or a black rectangle triggers its sequential journey via chained `transition` calls that update `transform` attributes. The example demonstrates D3.js v5 selections, SVG rendering, and local ES6 module imports for displaying a text message.