Untitled

100%

✓ Published0🌍 Public

Last edited Apr 29, 2021

Created on Apr 27, 2021

A hierarchical tree chart displays nested data from `data.json`, organizing entries by organization, armed group, year, city, and province. The visualization uses D3.js’ `tree` layout with `linkHorizontal` paths and zoom functionality, rendering each node as text with font sizes scaled by depth for readability. The data, which includes armed forces groups and their locations, is loaded via `json()`, and interactive panning and zooming are enabled through D3’s `zoom` API.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization displays a hierarchical dataset of political organizations, grouped by categories such as "Armed," "Communist," and "Islam," and filtered by the years they were active. It uses a sankey diagram to show the flow from these top-level categories down to specific organization names. The code loads data from a local `data.json` file and renders it using the Google Charts Sankey package alongside D3.js (v5). The diagram is displayed in a large, wide container to accommodate the many connections between categories and individual groups.

Eethanjones-git

79% match

Loading thumbnail…

Untitled

A static tree visualization displays the hierarchical structure of world regions and countries, from continents down to individual nations. The layout uses `d3.tree()` to compute node positions and `d3.linkHorizontal()` to draw the connecting paths between parent and child nodes, rendered as SVG paths. Country and region names appear as text labels sized according to their depth in the hierarchy. The data comes from a local JSON file, and the visualization includes zoom functionality via `d3.zoom` for exploring the full tree structure.

Iiamcreta

79% match

Loading thumbnail…

Untitled

A hierarchical circle-packing visualization displays the distribution of militant organizations across ideological categories and time periods. The code uses D3.js to produce a packed circle layout, encoding each organization as a leaf node with a clipped text label, while internal nodes represent hierarchical groupings. Data is sourced from a JSON file with a nested structure. The visualization is rendered using D3’s `pack` layout, `d3.group`, and SVG elements, with circles colored by tree depth and a drop shadow filter applied for visual separation.

Eethanjones-git

78% match

Loading thumbnail…

Untitled

This example visualizes the hierarchical structure of a dataset from `data.json` as a radial tree. The layout is computed using a force-directed simulation via D3’s `d3.forceSimulation` API, which positions nodes based on repulsion and attraction forces. The root node is highlighted, and hover interactions reveal child node details and highlight the direct ancestry path, while non-related nodes are dimmed. The visualization is rendered using D3’s SVG-based `d3.geoPath` for the curved links, with the entire graph adapting to window resizing.

Hhassanraza1552

78% match

Loading thumbnail…

Untitled

This example demonstrates an interactive, zoomable tree diagram built with D3.js, presenting hierarchical data from a JSON file. Users can pan and zoom the tree, as well as drag and drop nodes to rearrange them, with animations using `d3.layout.tree` and `d3.svg.diagonal`. The code includes custom panning logic and a zoom listener with scale constraints, rendering the visualization as SVG elements with linked paths and draggable node circles.

Ppo-drik

77% match

Loading thumbnail…

Fork of Untitled

This visualization shows a hierarchical dataset of political and armed groups using a circle-packing layout. It displays how groups are nested within categories like "armed," "communist," and "islam," with each leaf labeled by its name. The code uses D3’s `pack` function to compute the circles, then renders them as an SVG with drop shadows, clip paths, and wrapped text. The color scale encodes the tree depth, and hover tooltips reveal the full path and value. The data originates from a `data.json` file, though the accompanying HTML also loads a Google Charts Sankey diagram from pre-processed rows.

Mminecci

76% match

Loading thumbnail…

Untitled

A hierarchical bubble chart visualizes the distribution of political organization names, categorized by ideology (such as "armed," "communist," "islam"), then by decade, and finally by geographic region. The circles are sized and packed according to the nested data structure using D3’s `pack` layout. The visualization uses `d3.group` to organize nodes by depth, applies drop shadows via an SVG filter, and labels leaf nodes with clipped text. The data originates from the provided `data.json` file, which details organization entries and their associated years.

Cchris25886

76% match

Loading thumbnail…

Untitled

This visualization displays a treemap of a hierarchical dataset with three group leaders and 14 employees. The rectangles are colored by parent group using a categorical scale and sized by leaf values, with opacity reflecting the numeric value. The code uses the D3.js hierarchy API and treemap layout to compute positions, then renders SVG rectangles and text labels, including group titles and individual data values. Data is loaded from a remote JSON file.

Pphemmati

76% match