CastesInIndia-1

100%

CastesInIndia-1

✓ Published0🌍 Public

Last edited Apr 21, 2022

Created on Apr 21, 2022

This interactive visualization presents the caste hierarchy in India as a horizontal tree diagram. It uses d3.tree and d3.stratify to transform CSV data into a hierarchical layout, with d3.linkHorizontal generating curved links between nodes. The display supports panning and zooming through d3.zoom. Text labels are rendered with a Playfair Display font, with font sizes decreasing by depth. The visualization is built with D3 v5 and rendered as SVG.

AI-generated description

Training Material interactive visualization

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree graphic by Tejaswi_Tummala

A hierarchical tree diagram shows the parent-child relationships among Indian geographic locations, from country to city level. Circles represent each node, connected by animated straight-line paths that grow from parent to child. The visualization uses D3 v6’s `d3.stratify` to structure the data and `d3.tree` for layout, with SVG rendering. Node and label transitions animate over 800 milliseconds, while text opacity and delays vary by tree depth. Styling applies turquoise circle fills, salmon strokes, and black connectors.

Tttummala17

70% match

Loading thumbnail…

Family Tree

This example shows a hierarchical family tree of Indian states and cities, using a left-to-right dendrogram layout. The visualization renders SVG paths and text labels with colors assigned per node from a JSON dataset, including zoom and pan interactions. It uses d3.tree, d3.hierarchy, d3.linkHorizontal, and d3.zoom to compute positions, draw connections, and enable navigation, with styles from CSS.

Nnagarjuna1968

70% match

Loading thumbnail…

ICE8-

This example presents a hierarchical tree visualization of geographic regions in India, from the country down to local districts. The tree is rendered as an interactive SVG diagram with rounded rectangular nodes, using a collapsible layout. The code employs D3.js v3's tree layout, `d3.layout.tree`, to compute node positions, with custom SVG elements for nodes and links, including arrow markers. Color-coded node types and zoom/pan behavior via `d3.behavior.zoom` enhance exploration. The data is loaded from a JSON file defining the nested structure, and the visualization is built within a React component using raw D3.

Pprathyusha-reddy-arch

68% match

Loading thumbnail…

ICE8 - Tree graph

A hierarchical tree graph displays the administrative divisions of India, from the root "India" down to cities like Hyderabad and districts such as JNTU. Nodes are rendered as colored circles, with each depth level assigned a distinct color, while green, animated paths draw the parent-child links. The visualization uses D3’s `d3.stratify()` to structure the data and `d3.tree()` to compute the layout, with SVG elements and transitions animating the node radii and link drawing. Data is provided as an inline array of parent-child pairs.

Yyamunayennem

68% match

Loading thumbnail…

Trees

This visualization presents a family tree as a horizontal dendrogram, using node labels to display names and colors to encode different individuals. The hierarchical data is rendered using D3.js, with a tree layout and horizontal link generator to create the branching structure. The visualization supports zooming via D3's zoom and event APIs. Text elements are dynamically positioned and scaled by depth, with font sizes decreasing for deeper nodes. The data is loaded from a local JSON file, and the SVG rendering includes custom styling and text shadows.

RRakshithaRao27

68% match

Loading thumbnail…

Family Tree

This interactive family tree visualization displays a hierarchical dataset of names, with each node colored according to its position and labeled with a person's name. The tree uses a left-to-right layout, where the depth of each node is reflected in the font size, making generational levels visually distinct. The visualization is built with D3 v5, employing the `tree`, `hierarchy`, and `linkHorizontal` APIs to compute the layout and draw connecting paths. All elements are rendered as SVG, with node labels and colors driven directly from the `data.json` file, and the entire graphic supports zooming via D3's `zoom` event.

SSRI RAM REDDY KOTERU

67% match

Loading thumbnail…

D3 Stratify tree diagram

This example shows a hierarchical family tree rendered as a dendrogram, with nodes labeled by name and curved links connecting parents to children. The data is embedded as a CSV string and parsed with `d3.csvParse`, then converted into a hierarchy using `d3.stratify`. The layout is computed with the `d3.cluster` tree layout, and links are drawn as SVG paths using a custom `project` function that maps tree coordinates to screen positions. Text labels use varying font sizes based on node depth.

NNita

67% match

Loading thumbnail…

ICE 8 - Tree idiom

This interactive tree diagram displays a hierarchical structure of Indian states and their cities, using a collapsible D3.js layout. The visualization shows parent-child relationships through a classic node-and-link design, with nodes styled as circular markers and connected by curved paths. Users can click any node to expand or collapse its children, revealing the geographical breakdown. The chart is built with D3.js version 3.5, using `d3.layout.tree` for positioning, `d3.svg.diagonal` for link paths, and animated transitions via `transition().duration()` to smoothly reposition nodes. The SVG rendering scheme positions vertical depth levels at fixed 180-pixel intervals, with static data embedded directly in the source code.

KKetha

67% match