US Federal Budget Balance, 1968-2017

100%

US Federal Budget Balance, 1968-2017

✓ Published0🌍 Public

Last edited Aug 14, 2018

Created on Aug 14, 2018

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.

AI-generated description

US Federal Budget Balance, 1968-2017

Hover over the categories!

Rough draft of a federal budget dashboard. Could use a lot of UX improvement, but I like that it fits high and low level detail into a small space.

See this in webpage form on my website at
https://masonchinkin.github.io/us-budget-sankey.html#portfolio

Notes:

I want to animate the updated Sankey, but as you can see HERE the nodes do not relocate properly.
THANK YOU to Micah Stubbs for helping me use bl.ocks and being so generous with his time.

apache-2.0 Licensed

Similar vizzes

Loading thumbnail…

US Federal Budget Balance, 1968-2017

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.

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

85% 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

81% 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

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 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

79% 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

78% 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

77% match

Loading thumbnail…

2020 Q1 US Spending

This chart shows the distribution of US federal spending for the first quarter of 2020, displaying each agency’s percentage of total expenditures as an animated pie chart. Built with D3 v4 (SVG), the visualization uses a pie generator and arc generator, with labels positioned via an arc centroid. Data loads from a CSV file, and a path transition with `transition.attrTween` and `d3.interpolate` animates the arcs expanding outward over two seconds. A sequential blue color scale assigns distinct hues to each category.

Nnumberan

70% match