Arc Bubble Connector Chart

100%

Arc Bubble Connector Chart

✓ Published0🌍 Public

Last edited Feb 4, 2017

Created on Feb 4, 2017

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.

AI-generated description

Arc Bubble Connection Chart displaying graph data.

The data is a small sample of Lobbyist Activity from http://sfgov.org.

https://data.sfgov.org/City-Management-and-Ethics/Lobbyist-Activity-Contacts-of-Public-Officials/hr5m-xnxc

forked from <a href='http://bl.ocks.org/mattdh666/'>mattdh666</a>'s block: <a href='http://bl.ocks.org/mattdh666/2a7a7eecb9a75347241b'>Arc Bubble Connector Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Chicago Lobbyists Force-Directed Graph Visualization

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.

663anp3ca

70% match

Loading thumbnail…

midterm1

This chart uses both a bubble chart and a bar chart to compare the number of records and potential threats across 33 San Francisco districts. District names are on the x-axis, with counts on the y-axis, and each district is represented by a circle whose size encodes the number of records and whose color encodes the number of potential threats. Built with D3 v4, the code loads data from a CSV using `d3.csv`, sorts districts by record count, and uses `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleSequential` with an orange color interpolator. The SVG output highlights circles on hover by changing their stroke to red, though the underlying data source is a gist with a local file named `forbubblechart.csv`.

GGoomble

69% match

Loading thumbnail…

Fork of Bubble Chart Visualization

This interactive bubble chart displays the number of boba shops across eleven Bay Area cities, with circle size scaled linearly by shop count. Built with D3 v7, it renders as an SVG where users can drag bubbles to reposition them while a force simulation, using `d3.forceSimulation` with center, charge, and collide forces, arranges the circles and prevents overlap. Hovering reveals a tooltip showing each city’s name and shop total, with data loaded from a remote CSV file.

Wwaterm80

68% match

Loading thumbnail…

modified for voronoi

This example visualizes SFPD incidents by neighborhood in 2016, combining both a bar chart of average incidents and a line chart showing incident trends over time. Each neighborhood’s bar and corresponding line are linked, with mouseover highlighting the active district and click filtering to show only that district’s line. The code uses d3.nest() to aggregate data by district, d3.scaleBand for the bars, d3.scaleTime for the date axis, and d3 transitions for interactive animations. The data is loaded from the SF Open Data JSON API, and the visualization renders with SVG.

GGoomble

68% match

Loading thumbnail…

Fork of Bubble Chart Visualization

This fork of a bubble chart visualization displays the relative number of boba shops across eleven California cities using an interactive force-directed layout. Circles are initially clustered at the center, then repelled and spaced by d3.forceSimulation, d3.forceManyBody, and d3.forceCollide until stable. Users can drag any circle with d3.drag, while a custom tooltip reveals city names and counts on hover. The visualization loads data from a CSV file via d3.csv, scales circle radii with d3.scaleLinear, applies an ordinal color scheme, and renders everything as SVG elements.

Wwaterm80

67% match

Loading thumbnail…

Organization Network Graph

This example shows an organization network graph, displaying relationships between arts and social impact organizations in the San Francisco Bay Area. It renders circles and connecting lines as SVG elements, with node sizes varying by hierarchy level. The layout uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes. Data is defined in a separate module, specifying node sizes and link distances for main, child, and leaf nodes. Text labels identify organizations, and the simulation updates positions on each tick event.

Ccuriousmino

66% match

Loading thumbnail…

Bubble Chart with Tooltips Using D3

This bubble chart uses D3 v7 to visualize bike station locations in the Bay Area, mapping latitude and longitude to axes, dock counts to bubble size, and cities to categorical colors from `d3.scaleOrdinal`. A legend, built with the d3-legend library, identifies city colors. Interactive tooltips, styled via CSS and positioned with mouse events, display the total bike count and city name for each aggregated data point. The chart renders as SVG and loads data from a remote CSV using `d3.csv`.

OOlha

66% match

Loading thumbnail…

Bubble Chart Visualization

This bubble chart visualizes the number of boba shops across California cities, with each circle’s area encoding the count. Circles start at the center and are arranged by a force simulation using `d3.forceSimulation`, including center, charge, and collide forces to prevent overlap. Users can drag circles, which temporarily fixes their position, and hover to see a tooltip with the city name and count via mouse events. The chart is rendered as SVG using D3 v7, with color from `d3.scaleOrdinal(d3.schemeSet3)`, and loads data from a CSV file.

CChhoden Sherpa

66% match