D3 Examples - US Federal Budget Dashboard

US Federal Budget Dashboard

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.

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.

xxxxxxxxxx
 
<!DOCTYPE HTML>
<html>
​
<head>
    <title>US Federal Budget Balance, 1968-2017</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=960" />
    <script src="d3.min.js"></script>
    <script src="sankey.js"></script>
    <script src="d3-simple-slider.min.js"></script>
    <style type="text/css">
    .node rect {
        fill-opacity: .9;
        shape-rendering: crispEdges;
    }
    .node text {
        pointer-events: none;
        text-shadow: 0px 0px 2px #fff;
        font-weight: 1000;
    }
​
    .link {
        fill: none;
        stroke: #000;
        stroke-opacity: .4;
    }
​
    .line {
        fill: none;
        stroke-width: 3px;
        opacity: .3;
    }
​
    .thisYearLine line {
        fill: none;
        stroke: steelblue;
        stroke-width: 1;
        opacity: 0.5;
    }
    </style>
</head>
​
<body>
    <div id="barsContainer" class="container">
        <div class="row align-items-center">
            <div id="slider"></div>
        </div>
    </div>
    <div id="sankeyContainer" class="container">
    </div>
    <div id="linesContainer" class="container">
    </div>
    <script src="budget-dashboard.js"></script>
</body>
​
</html>
    