Fields of Transparency

100%

Fields of Transparency

✓ Published0🌍 Public

Last edited Jun 22, 2020

Created on Jun 19, 2020

An interactive dendrogram visualizes the hierarchical structure of political ad data from Facebook and Snapchat, with branches and node labels depicting platform-specific fields like ad creation time, demographics, and spending. The visualization uses a D3 tree layout with horizontal link paths and zoom functionality for navigation, rendered as SVG on a black background with red connections. Font sizes decrease with each hierarchical level, and the data comes from a JSON file containing nested objects representing each platform’s advertising data schema.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization demonstrates the hierarchical clustering of a Facebook group's member data using an interactive zoomable sunburst diagram. The circular layout partitions data by tree depth, with colored arcs representing hierarchical levels and leaf nodes sized proportionally to cluster values. The visualization uses D3 v3’s `d3.layout.partition` and `d3.svg.arc` to compute geometry, with animated transitions (via `transition.attrTween`) enabling zooming between hierarchy levels when clicking arcs or the central circle. Data is loaded from a JSON file containing the dendrogram structure.

MMauradion

71% match

Loading thumbnail…

A8 Node-Link Diagram D3 (force-directed)

This visualization shows a force-directed node-link diagram of Facebook page connections using data from CSV files, with interactive hover tooltips displaying node names. The code builds the network using D3.js v7’s `d3.forceSimulation`, applying link, charge, and center forces to position nodes and edges. SVG lines represent links and circles represent nodes, which users can drag via `d3.drag`. The simulation updates positions on each tick, while a styled `#tooltip` div appears on mouseover. Data loads through `d3.csv` and `d3.text` with manual parsing via `d3.csvParseRows`.

Nnathanjmuljadi@gmail.com

70% match

Loading thumbnail…

Untitled

This visualization shows a directed force-directed graph where nodes representing digital advertising and analytics technologies connect to related services, with links flowing between categories like ad exchanges, ad analytics, and testing platforms. The code builds the visualization using d3.forceSimulation to position nodes and animate the layout, with SVG circles and lines for rendering. The graph uses d3.v3, as indicated by the script import, and applies a dark theme with semi-transparent nodes and links, where text labels identify each technology node.

SStefan Apostol

69% match

Loading thumbnail…

socialnetwork

This social network visualization displays seven social media platforms as labeled nodes, with weighted green links connecting them. The graph shows relationships between applications like Facebook, Instagram, and Twitter through varying line thicknesses. Using D3.js v4, the visualization implements a force-directed layout via the deprecated `d3.layout.force()` API, which simulates attraction and repulsion between nodes. Node positions are updated dynamically on each tick, while JSON data from `data.json` defines the network structure. The SVG rendering includes draggable circles, orange text labels, and a sky-blue background.

Vvaddepallinaveen

68% match

Loading thumbnail…

Vis of facebook relations

This visualization displays a Facebook social network using two coordinated views: an adjacency matrix showing connections between users, and a force-directed node-link diagram. The matrix uses colored cells to indicate relationships, while the network graph reveals community structure through node coloring based on degree centrality. Built with D3 v5, the visualization employs `d3.forceSimulation` for layout and `d3.forceLink` for edge positioning. Users can zoom and pan the network view, while clicking nodes or matrix cells logs their identity. The underlying data is loaded from a TSV file listing Facebook friend pairs.

EELBOUNIAmine

67% match

Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes hierarchical data from a Santander bank dataset, rendered as an animated SVG using D3.js. It adapts the classic Reingold–Tilford tree layout: nodes are circles, links are curved paths, and clicking a node expands or collapses its children with smooth transitions. The dataset, stored in a JSON structure, groups items under category names like "analytics" and "physics," with leaf nodes sized by a numeric value. The visualization supports progressive disclosure, letting viewers explore the hierarchy by toggling branches while maintaining a clear left-to-right layout.

AAdlopez2016

66% match

Loading thumbnail…

Tree Visualization

This interactive tree visualization displays the hierarchical structure of world regions and countries, using a horizontal dendrogram layout. The visualization reads from a JSON data file and renders an SVG using D3 v5, with nodes labeled as text and links drawn as paths. It includes zoom and pan functionality through D3’s `zoom` event, while the layout is computed with the `hierarchy` and `tree` APIs. Text elements are styled with a serif font and white text-shadow for readability.

Ssploitfun

66% match

Loading thumbnail…

Untitled

This interactive graph visualizes a hierarchical dataset, starting with a root "flare" node and expanding through categories like "analytics," with the force-directed layout used to position nodes. Built with D3 v3, it uses `d3.layout.force()` to simulate physical forces, with node size proportional to the `size` property from the `graph.json` file. The visualization demonstrates how clicking on a parent node toggles the display of its children, allowing users to explore the tree structure. Nodes are rendered as SVG circles with labels, and links are drawn as lines, with color coding distinguishing collapsed, expanded, and leaf nodes.

JJediquu

66% match