MinaSSaleh

@MinaSSaleh·6 public vizzes

Fork of Let's make a face with D3.js!

This example demonstrates how to build a simple smiley face in an SVG canvas using D3.js v5. It shows fundamental DOM manipulation by appending circles for the face and eyes, positioning them with attributes like `cx` and `cy`. The code uses `d3.select` to target the SVG element and `append` to create shapes, while also setting styles like fill colors. The face is static, with no interactive or animated elements, and the data is hardcoded rather than loaded from an external source.

Feb 21, 2021

Loading thumbnail…

Untitled

A blank SVG canvas of 960 by 500 pixels occupies the page, with a script that merely logs the D3 library version to the console. The example demonstrates the minimal setup for a D3 v6 visualization, including the HTML structure, the linked stylesheet, and the inclusion of the d3.v6.js library via CDN. No data or drawing code is present, so the visualization shows nothing beyond the empty coordinate space. The code relies solely on the global `d3` object, confirming that the library has loaded successfully.

Feb 21, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a static composition of basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and CSS classes. It shows how SVG elements inherit fill and stroke properties, with a group that applies a light blue fill and black stroke to its children, and a separate `.lines` class defining stroke width and color for the polyline and path. The code uses raw SVG markup inside an HTML file, with CSS rules in `styles.css` to control presentation, including a global transform scale and rounded line caps. No external JavaScript libraries are involved.

Feb 21, 2021

Loading thumbnail…

Untitled

A D3.js v4 scatter plot maps student SAT math scores to the x-axis and SAT verbal scores to the y-axis, with circle size encoding ACT scores and fill color representing GPA via a custom color scale interpolating between white and dark teal. The SVG visualization uses d3.scaleLinear for positioning and sizing, d3.axisLeft and d3.axisBottom for tick marks, and binds data from a static JavaScript array of student records, applying semi-transparent fill colors.

Feb 21, 2021

Loading thumbnail…

"Maxime Awoudja"

This example shows the name “Maxime” displayed on a blank page, serving as a minimal demonstration of HTML, CSS, and JavaScript integration. The page applies large, centered text styling via CSS and logs “Hello JavaScript!” to the browser console using a plain script tag. It does not use any visualization libraries or data sources, instead highlighting the basic structure of a web document. The example provides a starting point for learning how to combine markup, styling, and scripting in a single file.

Feb 21, 2021

Loading thumbnail…

Maxime awoudja

This example builds an interactive visualization titled “Maxime awoudja” using the React framework. It renders a bare HTML page that loads CSS and JavaScript, with the visualization drawn entirely through client-side code. The implementation relies on React for the user interface and integrates D3’s force simulation and geo path APIs to display spatial data. The source data appears to be embedded or loaded dynamically, with the rendering approach using SVG or Canvas primitives through D3. The final output presents a dynamic, data-driven graphic without external style or script attributes in the HTML head.

Feb 21, 2021