Skip to main content
SimilarExport ZIP
100%

Chicago Lobbyists Force-Directed Graph Visualization

✓ Published0🌍 Public
663anp3ca
Last edited Oct 21, 2018
Created on Oct 21, 2018

This animated force-directed graph maps Chicago’s 50 highest-paid lobbyists to their clients and the government agencies they lobby, based on 2010 data from ChicagoLobbyists.org. Nodes are color-coded (blue for lobbyists, grey for clients, green for agencies) with node radius scaled to dollar amounts for lobbyists and clients. Hovering over a node highlights its connections and reveals associated names and dollar figures, while agency nodes carry no financial value. Built with d3.v2, the layout uses physical simulation to cluster highly connected nodes near the center, emphasizing hubs of lobbying activity.

AI-generated description

Created by Christopher Manning

Summary

This visualization includes the 50 highest paid lobbyists in Chicago, their clients, and the agencies they lobby. The data was compiled from ChicagoLobbyists.org in 2010.

  • Blue Nodes: Lobbyists
  • Grey Nodes: Clients
  • Green Nodes: Agencies

The radius of the Blue(Lobbyist) and Grey(Client) nodes is relative to the amount of money associated with them. The radius of the Green(Agency) nodes is constant and does not represent anything about that agency.

Nodes closer to the center have more connections than nodes on the outer edge.

Controls

  • Hover a node to highlight the connected nodes and show the names and dollar amounts associated to that node. (Green(Agency) nodes do not have a dollar amount associated to them since that information cannot be calculated from the data)
  • Click a node to go to the related page at ChicagoLobbyists.org.
  • Use the up and down arrow keys while hovering a node to highlight that node and its label Then press enter to go to the page of the selected node/label on ChicagoLobbyists.org.
  • Use the left and right arrow keys to zoom out and zoom in (adjusts the node attraction).

Run this gist at bl.ocks.org

forked from <a href='http://bl.ocks.org/christophermanning/'>christophermanning</a>'s block: <a href='http://bl.ocks.org/christophermanning/1625629'>Chicago Lobbyists Force-Directed Graph Visualization</a>

forked from <a href='http://bl.ocks.org/willzjc/'>willzjc</a>'s block: <a href='http://bl.ocks.org/willzjc/f9c0ccbf39da551802c45a34c860cb48'>Chicago Lobbyists Force-Directed Graph Visualization</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Arc Bubble Connector Chart

This interactive chart visualizes San Francisco lobbyist activity by pairing municipal agencies with lobbying organizations. It uses D3’s chord and pack layouts to arrange agencies as labeled arcs and lobbyists as colored bubbles, with curved connectors linking related entities. Hovering highlights connections and dims unrelated elements. The visualization loads JSON data from the SFGov open-data portal and is rendered with SVG, with animation handling in the arcBubbleConnector.js script.

AAndresAnayaIsaza
70% match
Loading thumbnail…

Force-Directed Graph V2

This force-directed graph maps a network of arts organizations and their related projects, with nodes grouped into four color-coded clusters and connected by weighted links. The visualization uses D3’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while a drag interaction lets users move nodes and restart the simulation. Node sizes vary by hierarchy level, and labels appear directly on nodes as SVG text. Data is generated programmatically in `data.js`, with link distances and node styling defined per connection.

Sschneich
66% match
Loading thumbnail…

graph

This example shows a force-directed graph of interconnected arts organizations, with four main groups—Arts Web, Social Impact Commons, Community Arts Stabilization Trust, and AmbitioUS—each linked to child nodes and leaf nodes. The visualization uses D3 v6’s `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to layout nodes, while `drag` enables interactive repositioning. Node sizes vary by hierarchy level (main, child, leaf), and link distances are customized per connection. The data is defined in a separate `data.js` module, and the rendering draws colored circles, links, and text labels directly in an SVG container.

BBrooke Joseph
65% match
Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph maps the network of Kenneth Rainin Foundation grantees, with colored hubs for major programs and smaller nodes for affiliated organizations. Four main clusters—Arts Web, Social Impact Commons, Community Arts Stabilization Trust, and AmbitioUS—are interconnected, while leaves represent individual grants. Built with D3 v6, the visualization uses `d3.forceSimulation`, `forceManyBody`, and `forceLink` to compute layout. Nodes and edges are SVG circles and lines, with drag interaction via `d3.drag`. Data is generated programmatically in `data.js`, with colors from a Paletton palette.

RRoberto
64% match
Loading thumbnail…

Organization Connection Graph

This force-directed graph maps connections between people and companies, derived from board membership data. Each node represents a person or organization, with edges indicating relationships like board membership or personal meetings. The visualization uses D3 version 7’s `forceSimulation` engine, combining `forceManyBody` for repulsion, `forceLink` for edge constraints, and `forceCenter` to keep the layout anchored. Interactive dragging is enabled through a custom `drag` interaction, while circles, text labels, and lines are rendered as SVG elements.

JJoanna Szpadkiewicz
63% match
Loading thumbnail…

Force Directed Graph

This interactive visualization shows a force-directed graph of defense programs, with colored nodes representing committee groups and links showing dependencies between them. It uses `d3.forceSimulation` to position nodes, with `scaleSqrt` encoding budget values as node radius. Users can add, delete, or edit nodes and links through HTML form inputs, with options to filter groups via color legend buttons. The SVG rendering updates live as the simulation restarts after each data modification.

KKarkG
63% match
Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

FFrissAnalytics
63% match
Loading thumbnail…

organizational graph

This example visualizes an organizational network of arts and social impact organizations, with main nodes (large colored circles) representing umbrella groups and child nodes representing affiliated projects. Force-directed layout in d3.v7, using `forceSimulation`, `forceManyBody`, and `forceLink`, positions nodes based on link distances, while `forceCenter` pulls them toward the canvas center. The SVG rendering shows colored links and node labels. Users can drag nodes via the `drag` interaction, which restarts the simulation. Data is defined procedurally in `data.js` with a palette from `colors.js`.

Ccynichole
63% match