Untitled

100%

✓ Published0🌍 Public

Last edited May 13, 2021

Created on May 13, 2021

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

AI-generated description

MIT Licensed

Similar vizzes

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

86% match

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

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

81% match

Loading thumbnail…

Untitled

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.

Eethanjones-git

76% match

Loading thumbnail…

Untitled

A bubble chart displays countries as circles positioned by GDP per capita (x-axis) and life expectancy (y-axis), with circle size encoding population. Each bubble is colored by continent, drawn as SVG circles using `d3.forceSimulation` with custom forces for positioning. The code loads data from a JSON array and uses `d3-scale-chromatic` for categorical color mapping. Hovering a bubble changes its stroke from white to black via CSS.

JJoker-tr

74% match

Loading thumbnail…

Untitled

A force-directed bubble chart visualizes a small dataset of 12 items, each with categorical attributes. The visualization initially displays all nodes as colored circles that can be dragged and selected. Buttons allow users to split the bubbles into separate clusters by Location, Group, Class, or Type, with titles indicating the active categories. Using D3 v4, the chart employs `d3.forceSimulation` with `d3.forceCollide`, `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the nodes. The SVG circles and text labels are rendered from a CSV file. Users can interactively drag and select individual bubbles to highlight them.

JJoker-tr

73% match

Loading thumbnail…

Untitled

This radial cluster diagram displays the hierarchical structure of world regions and countries, using a tree layout where continents branch into subregions and individual nations. The visualization encodes the parent-child relationships through elbow-shaped links, with each leaf node represented by a small circle and a text label. Built with D3.js v3, it loads hierarchical JSON data and applies a cluster layout algorithm to position nodes. The SVG rendering uses the `d3.layout.cluster()` method to calculate coordinates, and custom path-drawing functions to create the connecting lines between hierarchy levels.

MMartin Masevski

73% match

Loading thumbnail…

Untitled

A nested bar chart displays the distribution of three values across two groups and three categories. The visualization uses D3 v3’s ordinal scales (`d3.scale.ordinal`) and linear scale (`d3.scale.linear`) to position bars, with SVG rendering. Data is loaded from CSV (`data.csv`) and structured via `d3.nest` into hierarchical group and category levels. Axes are drawn with `d3.svg.axis`, and nested `<g>` elements group bars by group and category.

Mmab3105

72% match