Fork of Chandrapur District Town and Villages

100%

Fork of Chandrapur District Town and Villages

✓ Published0🌍 Public

Last edited Jul 22, 2021

Created on Jul 22, 2021

Forked from 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.

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-

92% match

Loading thumbnail…

Chandrapur District Town and Villages

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.

NNita

90% 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.

苏苏巨亮

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

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

69% match

Loading thumbnail…

Fork of Fork of Map of India with D3 - chloropleth map

This choropleth map displays India’s districts, colored by state (NAME_1 property) using a categorical color scale, with district names overlaid at each shape’s centroid. It uses d3.geoMercator for projection and d3.geoPath to render SVG paths from TopoJSON data sourced from the Datameet Indian district boundaries dataset. The code applies a scaleOrdinal with schemeCategory10 for fills, appends title tooltips, and labels each feature via pathGenerator.centroid, while CSS sets stroke styling for boundaries.

NNita

64% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion. A collapsible dendrogram layout uses horizontal links to connect parent nodes to their children, with country names rendered as text labels. The implementation uses d3.hierarchy and d3.tree to compute the layout, d3.linkHorizontal to generate the curved paths, and SVG zoom behavior to enable panning and scaling. Data comes from a local JSON file containing nested geographic groupings.

NNagamaniHA15

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

63% match