question paper model

100%

question paper model

✓ Published0🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

The visualization shows a hierarchical question paper model with "questions" branching into "Long," "short," and "objective" categories, which further split into "5 marks," "3 marks," and "1 mark" nodes. It uses a static tree layout via `d3.stratify` and `d3.tree`, rendering SVG circles and text labels. Links animate from source to target using `transition`, while circles fade in with a radial growth effect. Node colors change by depth through a custom `setGeneration` function, and the data is defined as an inline array of parent-child pairs.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree

A horizontal tree diagram visualizes hierarchical data with color-coded nodes representing question-answering states. Users toggle node expansion by clicking, with smooth transitions animating node positions and link paths. The visualization uses D3 v5's `tree` layout, `hierarchy` function, and `linkHorizontal` generator to compute the layout, while SVG elements and `transition` handle the rendering and animation. Interactive zooming is supported through the `zoom` API. The dataset comes from a static JavaScript object defining a tree structure with visit, attempt, and correctness classifications.

AAkrutiKhurana2103

70% match

Loading thumbnail…

Tree

This interactive tree diagram displays a hierarchical decision flow for faced questions, with nodes representing statuses like "Visit," "Attempted," "Correct," and "Incorrect." Users click any node to collapse or expand its children, triggering smooth animated transitions. The visualization uses D3 v5's `tree` and `hierarchy` layouts alongside `linkHorizontal` for curved edges, with SVG rendering and zoom/pan support via `d3.zoom`. Node colors and labels are driven by embedded JSON data, and transitions are handled through D3’s `.transition()` methods with configurable durations.

AAkrutiKhurana2103

69% match

Loading thumbnail…

Question7

This interactive visualization displays a hierarchical tree map of weekend activity choices, branching from a central root into categories like relaxation, games, movies, and camping. The layout is generated using D3's `stratify()` and `tree()` functions, which arrange nodes by depth and assign coordinates. Circles representing each activity are rendered with SVG, colored by generation depth, and animated via `.transition()` as connections (paths) draw between parent and child nodes. Text labels identify each activity, while the entire graphic is drawn using D3 v6 with a plain SVG rendering approach.

Hharipriyaa07

68% match

Loading thumbnail…

Interactive Tree

This interactive tree visualizes question-answering outcomes, starting from a "Faced Questions" root that branches into Visit/Not Visit, Attempted/Not Attempted, and Correct/Incorrect paths, each colored by status. Clicking a node collapses or expands its subtree, while dragging attempts deletion. Built with D3 v5, it uses `d3.tree` for layout, `d3.hierarchy` for data binding, `d3.linkHorizontal` for edges, and SVG elements with zoom support via `d3.zoom`. Transitions animate node positions and opacity changes over 100ms durations.

Ccsroysudarshan

68% match

Loading thumbnail…

Fork of Interactive Tree Updated

This interactive tree diagram visualizes a hierarchical dataset of question-facing outcomes, where each node is colored according to its state and labeled with its name. The visualization supports user interaction by allowing nodes to be collapsed or expanded on click. Built with d3.v5, it uses `treeLayout` and `linkHorizontal` to position nodes and draw edges, while SVG groups and rectangles represent each node. The animation of transitions is handled through d3's `.transition()` API, which smoothly updates node positions and path connections during structural changes.

Bbindhureddy98

67% match

Loading thumbnail…

Fork of a model

This visualization presents a hierarchical dataset as an indented tree layout rendered with SVG. The root node, labeled "bruh," branches into a deep structure of numeric values, and each node displays its name as text with a font size that decreases with depth. The code uses d3.hierarchy and d3.tree to compute the layout, while linkHorizontal generates the curved paths connecting parent and child nodes. Pan and zoom interactions are enabled through d3.zoom, applying transforms to a group element. The styling uses a green stroke for links, a serif font, and text shadows for readability. Data is loaded from the JSON file data.json.

JJavaDummy4

66% match

Loading thumbnail…

Activity 8 Q6A

This example presents an interactive hierarchical tree visualization of muscle car models, using D3.js v3 to render SVG elements with click-to-expand/collapse functionality. The tree layout arranges nodes by type, with color-coded rectangles representing different model categories (Grey, Blue, Red, Orange) and arrowed links indicating parent-child relationships. The visualization includes zoom and drag behavior via `d3.behavior.zoom`, plus tooltips and drop-shadow filters defined in SVG defs. Data is loaded asynchronously from a JSON file and rendered within a 350-pixel-wide container with animated transitions between states.

Ppasyasahas

66% match

Loading thumbnail…

Tree Example

This example displays an animated, collapsible tree diagram representing a three-level family hierarchy, with nodes showing names and links connecting parents to children. Clicking a node toggles the visibility of its subtree, smoothly transitioning the layout as branches expand and collapse. Built with D3.js version 3.5.17, the visualization uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the node positions and draw curved link paths, while SVG transitions animate the changes over 750 milliseconds. The data is hardcoded as a nested JavaScript array in the HTML file.

Ppasyasahas

65% match