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: "A-",
  //color: null
};

var PIECES = [
  {
    value: 45,
    label: "Housing",
    tooltipLines: [
      "Home Prices: $1.2M",
      "Median Apartment Rent: $1700",
      "Affordability: B"
    ]
  },
  {
    value: 6,
    label: "Population Density",
    tooltipLines: ["people per square mile: 75k"]
  },
  { value: 35,
  	label: "Incomes",
  	tooltipLines: ["average income: $424k"]
  },
  { value: 56,
  	label: "Walk Score",
  	tooltipLines: ["walk score: A+"]
  },
  { value: 9,
  	label: "Unemployment",
  	tooltipLines: ["fraction unemployed: 5%"]
  },
  {
    value: 20,
    label: "Crime Rate",
    tooltipLines: ["yearly crimes per 100k: 82"]
  },
  {
    value: 39,
    label: "School Rating",
    tooltipLines: ["average school rating: B+"]
  },
  { value: 99,
  	label: "Unemployment",
  	tooltipLines: ["fraction unemployed: 5%"]
  },
  {
    value: 20,
    label: "Crime Rate",
    tooltipLines: ["yearly crimes per 100k: 82"]
  },
  {
    value: 99,
    label: "School Rating",
    tooltipLines: ["average school rating: B+"]
  }
];

var RANK_COLORS = ["rgb(167, 25, 59)","rgb(255, 153, 0)","rgb(255, 222, 47)","rgb(187, 215, 167)","rgb(85, 155, 35)"];

var GRADE_COLORS = [{"published":1,"grade_id":2,"location":"market","RGBA":"rgba(153, 0, 0, 50)","HEX":"990000","grade":"D"},{"published":1,"grade_id":2,"location":"outline","RGBA":"rgba(102, 0, 0, 100)","HEX":"660000","grade":"D"},{"published":1,"grade_id":2,"location":"text","RGBA":"rgb(255, 255, 255)","HEX":"FFFFFF","grade":"D"},{"published":1,"grade_id":2,"location":"xlsx","RGBA":"rgb(184, 77, 77)","HEX":"B84D4D","grade":"D"},{"published":1,"grade_id":3,"location":"market","RGBA":"rgba(204, 0, 0, 50)","HEX":"CC0000","grade":"C-"},{"published":1,"grade_id":3,"location":"outline","RGBA":"rgba(102, 0, 0, 100)","HEX":"660000","grade":"C-"},{"published":1,"grade_id":3,"location":"text","RGBA":"rgb(255, 255,...