turinBudget

100%

✓ Published0🌍 Public

Last edited Feb 24, 2016

Created on Feb 19, 2016

A force-directed network diagram maps the interconnected structure of Turin’s municipal budget, with circular nodes representing administrative departments and animated links indicating financial flows between them. Rendered in SVG with D3.js, the layout uses physics simulation to arrange nodes by spending relationships, while hover interactions highlight budget allocations.

AI-generated description

Similar vizzes

Loading thumbnail…

turinBudgetNew

The visualization, "turinBudgetNew," presents the municipal budget of Turin through an interactive, multi-layered display built with D3 v3 and SVG animations. It features a central circular emblem with a monochrome gray design, surrounded by dynamically rendered data elements that animate to reveal budgetary allocations. The visualization uses custom SVG paths and shapes, likely to represent hierarchical or categorical budget data, with hover or click interactions to explore the breakdown. The animation emphasizes changes or transitions between data states, making the budget distribution more engaging and easier to compare at a glance.

FFedericopvs

88% match

Loading thumbnail…

Untitled

An interactive network graph displays funding relationships between development organizations as nodes and edges, with edge color indicating upstream or downstream flow. The visualization uses D3.js v4’s force-directed simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`) to position nodes, while SVG paths render edges with curved markers. Node dragging via `d3.drag` and zooming via `d3.zoom` allow exploration of the 200+ linkage data loaded from `links.csv`.

Bbglasgo

66% match

Loading thumbnail…

Node-link diagram with force-directed layout in D3

This node-link diagram visualizes the FIRM-HI-TECH dataset, showing the connections between entities as a force-directed network. The visualization uses D3 v7 with d3.forceSimulation to position nodes and links, applying charge, link, and center forces to create an organic layout. Nodes are rendered as colored circles using d3.scaleOrdinal with the schemeSet1 palette, while links appear as thin black lines. Interactive tooltips appear on hover, displaying the node ID and enlarging the circle for emphasis. The data is loaded as CSV and parsed into numeric source and target values for the simulation.

EEunice Tu

65% match

Loading thumbnail…

Untitled

A force-directed graph displays a small hierarchy of D3 module names, with nodes connected by links to show parent-child relationships. The visualization uses d3.layout.force to simulate physical forces, while a custom tick function pushes source nodes upward and target nodes downward, creating a weak tree structure. Nodes are rendered as colored circles using d3.scale.category20, and the data comes from a local graph.json file containing seven nodes and six links.

JJacob Pingel Lauridsen

65% match

Loading thumbnail…

Untitled

This interactive network diagram visualizes a graph of interconnected entities, displaying nodes as either circles or squares with sizes and colors that map to a numerical score. The graph reveals a clustered structure where a central node connects to all others. The visualization uses D3.js v3 with an SVG rendering and a force-directed layout (`d3.layout.force`). Node appearances and link colors encode the score values, while mouse interactions highlight connected nodes and allow dragging.

Xxsg13

65% match

Loading thumbnail…

Untitled

This example shows a small force-directed network of six nodes (A–F) connected by weighted links, with node color encoding gender and labels revealing name and profession on hover. It includes an adjacency matrix table above the visualization. The code uses D3 v7's `d3.forceSimulation` with link, charge, and center forces, rendering nodes and links as SVG elements. Nodes are draggable via `d3.drag`, and the data comes from a static JSON file.

Sshatomouimena

65% match

Loading thumbnail…

Untitled

This interactive network diagram uses a force-directed layout to display a small hierarchical dataset from a JSON file. The visualization distinguishes node types by color: blue for collapsed packages, light blue for expanded ones, and orange for leaf nodes. Users can click any node to expand or collapse its children, triggering a re-layout. The code leverages the D3.js v3 layout APIs, specifically `d3.layout.force` for the simulation and `d3.layout.tree` to generate links. The force simulation is configured with custom `linkDistance`, `charge`, and `gravity` parameters, and the rendering is done as an SVG with click-to-toggle interaction.

JJediquu

65% match

Loading thumbnail…

Untitled

The visualization compares two hierarchical datasets side by side: a static flare.json tree rendered as a collapsible node-link diagram, and a force-directed network graph built from flare.json nodes and links, with ten named circular nodes. The tree layout uses d3.hierarchy, d3.tree, and d3.zoom to allow interactive collapsing and panning, while the network applies d3.forceSimulation with forceLink and forceManyBody. Users click nodes to toggle children across shared names, updating both views simultaneously. SVG elements and animated transitions handle rendering and interaction.

Nnikitamakkena

65% match