Chandrapur District Town and Villages

100%

Chandrapur District Town and Villages

✓ Published4🌍 Public

Last edited Jan 2, 2020

Created on Jan 1, 2020

This visualization displays the administrative hierarchy of Chandrapur District, showing towns and villages as a branching tree structure. The data comes from a JSON file with nested parent-child relationships, and the layout uses the `d3.tree` and `d3.hierarchy` functions to position nodes. Horizontal links are drawn with `d3.linkHorizontal`, while SVG text elements display each location name with font sizes scaled by node depth, and a `d3.zoom` handler enables panning and zooming the entire diagram.

AI-generated description

Chandrapur District Towns and villages Tree

MIT Licensed

Similar vizzes

Loading thumbnail…

Chandrapur District Town and Villages

This visualization shows a hierarchical tree of Chandrapur District, with the district as the root and expanding to towns like Bramhapuri and Nagbhid, which then branch into their constituent villages. The tree layout uses `d3.tree` and `d3.hierarchy` to calculate node positions, with `d3.linkHorizontal` generating the curved connecting paths. The SVG text labels are sized inversely with depth, using larger fonts for higher-level nodes, and the entire view supports pan and zoom through the `d3.zoom` API. The data comes from a local JSON file that defines the nested district-town-village structure.

Pparth-

94% match

Loading thumbnail…

Fork of Chandrapur District Town and Villages

This interactive tree diagram visualizes the hierarchical relationship between Chandrapur District, its towns (Bramhapuri and Nagbhid), and their constituent villages, using geographic administrative data. Users can pan and zoom the layout through d3.zoom. The visualization employs d3.tree and d3.hierarchy to compute node positions, with d3.linkHorizontal generating the curved connecting paths. Text labels are rendered in SVG with a Playfair Display serif font, and their size decreases with depth. The data is loaded asynchronously from a JSON file using d3.json.

YYuji

90% match

Loading thumbnail…

Untitled

This visualization shows a hierarchical tree diagram of Chandrapur District towns and villages, with each node represented as a circle sized by its value and colored by its level. Developed using D3.js, the code employs the `d3.tree()` layout and `d3.hierarchy()` to structure the nested data from `data.json`, rendering SVG paths for links and circles for nodes. Node colors and strokes are dynamically set from the `type` and `level` fields in the data, while text labels position children to the left or right based on their depth.

BBajiSharifPatan@my.unt.edu

84% match

Loading thumbnail…

Fork of Chandrapur District Town and Villages

A hierarchical tree visualization displays GitHub repositories grouped under Python machine-learning topics. The D3.js v5 code uses `d3.hierarchy` and `d3.tree` to compute node positions, then renders horizontal links with `d3.linkHorizontal`. Text labels show repository IDs, with font size decreasing by depth. The SVG output supports zooming and panning via `d3.zoom`, and uses the Playfair Display font. Data comes from the static `data.json` file, which contains nested category and repository identifier pairs.

苏苏巨亮

82% match

Loading thumbnail…

Chandrapur district Area Details

This bar chart displays the area distribution of Chandrapur district across six land categories, including total geographical area, inhabited area, agricultural area, industrial area, forest area, and wastelands. The chart uses d3.v5 and SVG rendering, with steelblue rectangles and axis labels styled through CSS. Data is loaded from a local CSV file, and the visualization includes a title and labeled axes, with tick marks and gridlines formatted using d3’s axis API.

NNita

72% 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

65% match

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

65% match

Loading thumbnail…

CastesInIndia-1

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.

NNita

64% match