jody-otbi

@jody-otbi·5 public vizzes

computer tree

This interactive tree diagram illustrates the hierarchical structure of computer systems, covering components like the CPU, memory, networks, and hardware/software divisions. The visualization uses D3.js (v3) with a collapsible node layout, where users can click nodes to expand or collapse branches. The SVG rendering includes animated transitions for nodes and links, displaying Arabic text labels alongside English terms, while the population data from data.csv remains unused in this specific visualization.

May 23, 2022

Loading thumbnail…

computer tree

This interactive tree diagram visualizes a hierarchical dataset of computer components and software modules. Users can click nodes to expand or collapse their children, revealing nested categories like hardware, data converters, and query methods. The visualization uses D3.js v6, rendering as an animated SVG with smooth transitions between states. The tree layout positions nodes horizontally, with links drawn as diagonal paths connecting parent and child elements. The code employs fundamental D3 methods including `d3.hierarchy`, `d3.tree`, `d3.linkHorizontal`, and `d3.zoom` to handle layout, interaction, and viewport control.

May 23, 2022

Loading thumbnail…

conceptual map

This conceptual map visualizes a hierarchical dataset representing a computer system, with nested nodes for components and subcategories. It uses an icicle tree layout, positioning nodes horizontally from left to right based on their depth in the hierarchy, with text labels sized inversely to depth. The visualization is built with D3.js (v5), using the `tree`, `hierarchy`, `linkHorizontal`, and `zoom` APIs from the `d3` module, and renders the connected nodes as scalable vector graphics (SVG) paths and text elements. The hierarchy is loaded from a JSON file, and user interactions include zooming and panning via a zoom event handler.

May 23, 2022

Loading thumbnail…

wejdan map

This interactive visualization displays a hierarchical tree of world regions and countries, branching from continents down to individual nations. The tree layout positions parent nodes with centered labels while child countries extend outward with left-aligned text, using font size to indicate depth. Built with D3.js v5, the code employs `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to generate the SVG paths and text elements from a nested JSON dataset. Users can pan and zoom the map via `d3.zoom`, with a teal stroke connecting the hierarchical structure.

May 23, 2022

Loading thumbnail…

wejdan

This example demonstrates a minimal D3.js setup within VizHub, displaying the text “Hello VizHub!” in a large, centered message. The code loads D3 v5 from an external CDN via UNPKG and uses the `select` API to target the `#message` div, setting its text content. It also imports a local ES6 module, `myMessage.js`, to supply the string, showcasing how to combine external libraries with modular local code. The styling is handled through a linked CSS file that defines the text alignment and font size.

May 23, 2022