GSA Windrose

by Sarah Godoshian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<div style="max-width: 230px; margin: 50% auto;">
  <div id="windrose" class="windrose"></div>
</div>

SCSS

#windrose {
  text-align: center;
  font-family: "Source Sans Pro", Helvetica, Roboto, Arial, sans-serif;
  svg {
    overflow: visible;
    width: 100%; 
    height: 1px; 
    padding-bottom: 100%;
    box-sizing: content-box;
  }
}

JavaScript

var GRADE = {
  text: "C-",
  //color: null
};

var PIECES = [
{
"published": 1,
"sector_id": 11,
"zoom": 1,
"order_id": 1,
"flag_draw_quintile": 0,
"field_data": "xlPAC_DataMarket_Flat_PUBLISHED.homeValue_median_Census|xlPAC_DataMarket_Flat_PUBLISHED.housingAffordability_quintile",
"label": "Housing",
"label_table": "Med. Home Price|Affordability",
"tooltip": "Home Prices|Affordability",
"format_precision": "$,.2s|",
"values": "495247.22123419|Very Expensive",
"value": 10
},
{
"published": 1,
"sector_id": 11,
"zoom": 1,
"order_id": 2,
"flag_draw_quintile": 0,
"field_data": "xlPAC_DataMarket_Flat_PUBLISHED.populationDensity",
"label": "Population Density",
"label_table": "Pop/Sq. Mi.",
"tooltip": "Population / Sq. Mile",
"format_precision": ",.1MULT",
"values": "2032.76639018",
"value": 24
},
{
"published": 1,
"sector_id": 11,
"zoom": 1,
"order_id": 3,
"flag_draw_quintile": 0,
"field_data": "xlPAC_DataMarket_Flat_PUBLISHED.spending_power_sf_quintile",
"label": "Spending Power",
"label_table": "Spending Power per SF",
"tooltip": "Spending Power per SF",
"format_precision": null,
"values": "Average",
"value": 30
},
{
"published": 1,
"sector_id": 11,
"zoom": 1,
"order_id": 4,
"flag_draw_quintile": 0,
"field_data": "xlPAC_DataMarket_Flat_PUBLISHED.COLI",
"label": "Cost to Live",
"label_table": "Cost to Live",
"tooltip": "Cost to Live",
"format_precision": "$,.2MULT",
"values": "68086.77968815",
"value": 43
},
{
"published": 1,
"sector_id": 11,
"zoom": 1,
"order_id": 5,
"flag_draw_quintile": 0,
"field_data": "xlPAC_DataMarket_Flat_PUBLISHED.crimeRate",
"label": "Crime Rate",
"label_table": "Crime Rate",
"tooltip": "Crime Rate",
"format_precision": ",.0f",
"values": "31.00913802",
"value": 5
},
{
"published": 1,
"sector_id": 11,
"zoom": 1,
"order_id": 6,
"flag_draw_quintile": 0,
"field_data": "xlPAC_DataMarket_Flat_PUBLISHED.schoolRating",
"label": "School Rating",
"label_table": "School Rating",
"tooltip": "School Rating (K-12)",
"format_precision": ",.1f",
"values":...