contract-sunburst.html

---
published: true
permalink: /data-lab/contract-sunburst/
layout: visualization
filename: Contract-Sunburst.md
title: Contract Sunburst
page: contract-sunburst
---
<div style="height:100%; padding:0; margin:0">  
  <h2>Explore 122,452 federal contracts</h2>
  <p>Ever wonder who’s getting federal contracts, and what agencies are awarding them? This data visualization tool allows you to see to whom federal contracts are being awarded and what product or services they are being awarded for. Selecting each layer of this chart provides an additional level of detail, starting from major agency to any associated sub-agencies, and to the contractors that receive funding from the federal government.</p>

  <div class="col-md-6" style="padding: 0px">
    <div id="sunburst-panel"></div>
  </div>

  <div class="col-md-6" style="padding: 0px">
    <div id="sunburst">
      <div id="circ"></div>
    </div>
    <div>
      <div class="col-md-6" style="padding-left:0; padding-right:0">
        <div id="legend_colorKey">
          <div style="left:65px;top:14px;width:70px;" class="legend_circleKeyLabel"><span style="left:75px;">Contractor</span></div>
          <div style="left:65px;top:25px;" class="legend_circleKeyLabel"><span style="left:75px;">Funding Subagency</span></div>
          <div style="left:65px;top:36px;" class="legend_circleKeyLabel"><span style="left:75px;">Funding Agency</span></div>
          <div style="left:65px;top:65px;" class="legend_circleKeyLabel"><span style="left:75px;">2017 Q2 Total Contracts</span></div>
          <svg id="legend_scaleKey"></svg>
        </div>
      </div>
      <div class="col-md-6" style="padding-right:0">
        <h5><i>Click the Center Node to Return to a Higher Level of Abstraction</i></h5>
      </div>
    </div>
  </div>
</div>
<!-- d3 -->
<script src="{{site.baseurl}}/assets/js/vendor/d3.v3.min.js"></script>
<script src="{{site.baseurl}}/assets/js/contract-sunburst.js"></script>