US Federal Budget Balance, 1968-2017

100%

US Federal Budget Balance, 1968-2017

✓ Published0🌍 Public

Last edited Aug 15, 2018

Created on Aug 14, 2018

This interactive Sankey diagram visualizes the US federal budget balance from 1968 to 2017, showing how revenue sources (corporate tax, customs duties) and spending categories (defense, discretionary) change annually. A draggable slider (d3-simple-slider) lets viewers select a year, triggering a 2-second transition (d3.transition) that repositions nodes and links via sankey.relayout. The visualization is rendered as SVG using d3.csv to load yearly datasets, with node sizes scaled via d3.scaleLinear and data-driven transitions updating rect heights, link paths, and font sizes.

AI-generated description

Help! Sankey labels not transitioning properly

This is the sankey from my working federal budget dashboard. For some reason when I try to apply transitions in the traditional way, the labels dont relocate properly.

I suspect it has something to do with sankey.js realligning the sankey categories by size every time the data is refreshed, but haven't been able to find a solution.

For reference, there are some great blocks demonstrating transitioning sankeys

apache-2.0 Licensed

Similar vizzes

Loading thumbnail…

US Federal Budget Balance, 1968-2017

This interactive dashboard visualizes the US federal budget balance from 1968 to 2017, combining a multi-series bar chart, an animated Sankey diagram, and line charts to show revenue sources, spending categories, and yearly deficits. A slider scrubs through time, updating a diverging stacked bar chart for balance, while the Sankey diagram uses D3.js (version 4.11) with custom `d3.sankey` layout functions to link tax sources to spending categories. The code also uses `d3.scaleBand`, `d3.stackOffsetDiverging`, and `d3.sliderHorizontal` from the d3-simple-slider library, with data loaded from CSV files.

MMasonChinkin

93% match

Loading thumbnail…

US Federal Budget Balance, 1968-2017

An interactive stacked bar chart shows contributions to US GDP growth from 1950 to 2017, broken down into categories like personal consumption, investment, net trade, and government spending. The visualization uses D3.js version 4.11 with an animated drill-down feature: clicking a bar segment expands that category into its sub-components, such as goods versus services or exports versus imports. A back button returns to the overview. The y-axis represents percentage points, and hovering displays tooltips with exact values. The chart is rendered as an SVG using `d3.scaleBand`, `d3.scaleLinear`, `d3.stack`, and `d3.axis` functions.

MMasonChinkin

83% match

Loading thumbnail…

US Federal Budget

This interactive visualization uses a force-directed bubble chart to display the 2017 US federal budget, with each circle sized by spending amount and colored by BEA category. Users can toggle grouping by BEA category or grant type, which rearranges the bubbles along the x- and y-axes, respectively, using d3-force simulations. The chart is built with D3 v4 and SVG, and includes tooltips showing agency names and budget values. Data is loaded from a CSV and preprocessed to filter out zero-budget entries and aggregate by agency, BEA category, and grant/non-grant split.

3300ani

79% match

Loading thumbnail…

US Federal Budget

This visualization uses a force-directed bubble chart to depict the 2017 US Federal Budget, with each circle sized by budget amount and colored by BEA Category. Two checkboxes let users group the bubbles by BEA Category or by Grant, shifting the force layout's x-positioning to align circles with their respective categories. Built with D3 v4 and rendered in SVG, the chart encodes budget magnitude through circle area using a power scale, and hovering reveals exact dollar amounts via tooltips. The interactive layout allows users to explore how spending is distributed across agencies and categories.

3300ani

78% match

Loading thumbnail…

US Federal Budget

This visualization uses a force-directed bubble chart to depict the 2017 US Federal Budget, with each circle sized by agency spending and colored by Bureau of Economic Analysis (BEA) category. Two checkboxes let users toggle grouping by BEA category or grant type, which repositions the bubbles along the x-axis via force simulation. Hovering reveals exact dollar amounts, and the circles are also labeled with agency names. The chart is built with D3 v4 using SVG, based on data from a CSV of federal outlays, and is licensed under MIT.

3300ani

77% match

Loading thumbnail…

US Federal Budget

This visualization uses a force-directed bubble chart to display the 2017 US Federal Budget, with each circle representing a government agency. Circle area encodes the agency’s budget amount, and color encodes its BEA (Bureau of Economic Analysis) category. Users can check boxes to group agencies by BEA Category or by Grant/Non-grant split, triggering the circles to rearrange via d3-force. The chart is built with D3 v4 and SVG, using a power scale for area, an ordinal color scale, and a force simulation with collide and x-position forces. Hovering over a circle reveals a tooltip with the agency name and budget in millions of dollars.</noah>

3300ani

76% match

Loading thumbnail…

US Federal Budget Balance, 1968-2017

An animated choropleth of the 2016 U.S. congressional election results maps each district’s winning party and margin of victory. The visualization uses a D3 geoAlbers projection with `d3.geoPath` to render district boundaries from a Census Bureau shapefile, and supports pan and zoom via `d3.zoom`. Hovering over a district reveals a tooltip listing the full candidate results from the official CSV records, with districts colored and opacity-scaled by the winning margin.

MMasonChinkin

74% match

Loading thumbnail…

Sankey Diagram

This interactive Sankey diagram visualizes Canadian defense budget allocations, showing how funds flow from high-level cost categories into specific military programs and assets. Built with D3 v4 and the d3-sankey plugin, the visualization renders nodes and links as SVG paths with animated transitions. Users can click nodes to edit input/output ratios and adjust budget contributions dynamically, while a color legend filters the diagram by military branch. The code uses d3.zoom for panning and scaling, d3.ordinal scales for color mapping, and transitions to animate layout changes.

KKarkG

74% match