Monopoly - Probability

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
    #title{
      font: 20px sans-serif;
      text-align: center;
      line-height: 40%;
    }
    
    #subheading {
      font: 12px sans-serif;
      text-align: center;
      font-weight: 300;
      line-height: 10%;
    }
    
    #signature {
      font: 12px sans-serif;
      text-align: center;
    }
    
    div.tooltip {
      position: absolute;
      text-align: center;
      width:115px;
      height: 65px;
      padding: 2px;
      font: 11px sans-serif;
      font-weight: 400;
      background: lightsteelblue;
      border: 0px;
      border-radius: 8px;
      pointer-events: none;
    }
    
    rect:hover{
      fill:white;
      outline-style: solid;
      outline-color: black;
      outline-width: 1px;
    }
    
    text {
      font-family: sans-serif;
      font-weight: 200;
      font-style: normal;
      font-size: 14px;
    }
  </style>
</head>

<body>
  <p id="title">Probability of Landing on Each Monopoly Space</p>
  <p id="subheading">(Probability is based on a simulation of 1,000,000,000 rolls)</p>
  
  <script>
    
    var margin = {top:20, bottom:10, left:60, right: 20};
    
    var height = 400;
    var width = 800;
    var barPadding = 3;
    var dataset;
    
    var svg = d3.select("body")
    						.append("svg")
    						.attr("height", height)
    						.attr("width", width);
    
    var div = d3.select("body")
      						.append("div")
      						.attr("class", "tooltip")
      						.style("opacity", 0);
    
    d3.csv("Monopoly.csv", function(error, data) {
				data.forEach(function(d){
          	d.location= +d.Location,
          	d.name = d.Name,
            d.probability = +d.Probability,
            d.cost = +d.Cost,
            d.rent = +d.Rent,
            d.color = d.Color,
            d.pvs = +d.PVS
        });
      
    	dataset = data;
      
    	var xScale = d3.scaleLinear()
    							.domain([0,39])
    							.range([margin.left, width - margin.right]);
     
    	var yScale = d3.scaleLinear()
    							.domain([.02, .03])
    							.range([height - margin.top, margin.bottom]);
      
    	var bars = svg.selectAll("rect")
    							.data(dataset)
      						.enter()
      						.append("rect");
      
      bars.attr("width", width/dataset.length - barPadding)
      		.attr("x", function(d,i){
        			return xScale(i);
      		})
      		.attr("y", function(d){
        			return yScale(d.probability);
      })
      		.attr("height", function(d){
        			if (d.probability == ""){
                return height - yScale(d.probability) - margin.top;
              }
        			else {
							return height - yScale(d.probability) - margin.bottom;
              }
      })
      		.attr("fill", function(d){
        	if (d.color == "None"){
            return "black";
          }
        	else if (d.color == "Railroad"){
            return "grey";
          }
        	else if (d.color == "Utility"){
            return "black";
          }
        	else if (d.color == "Light Blue"){
            return "lightblue";
          }
        	else if (d.color == "Dark Blue"){
            return "darkblue";
          }
        	else {
            return d.color;
          }
        })
        .on("mouseover", function(d){
          div.transition()
          	.duration(200)
          	.style("opacity", .9);
        
        	// Replace tooltip strings for non-property spaces
        
        	var costStr = "";
        	if (d.cost == ""){
            costStr = "N/A";
          } else{
            costStr = d.cost;
            costStr = "$" + costStr.toString();
          }
        
        	var rentStr = "";
        	if (d.rent == ""){
            rentStr = "N/A";
          } else {
            rentStr = d.rent;
            rentStr = "$" + rentStr.toString();
          }
        	
        	var pvsStr = "";
        	if (d.pvs == ""){
            pvsStr = "N/A";
          } else {
            pvsStr = Number((d.pvs).toFixed(2));
          }
        	
          div.html(d.name +"</br>Cost: " + costStr + "</br>Rent: " + rentStr + "</br>Probability: " + Number((d.probability*100).toFixed(2)) + "%</br>PVS: " + pvsStr)
          	.style("left", (d3.event.pageX) - 10 + "px")
          	.style("top", (d3.event.pageY - 30) + "px");
        })
        .on("mouseout", function(d){
          div.transition()
          	.duration(500)
          	.style("opacity", 0);
        });
      
      svg.append("g")
      		.attr("class", "axis")
      		.attr("transform", "translate(" + 55 + "," + 9 +")")
      		.call(d3.axisLeft(yScale));
    	
      svg.append("text")
      		.attr("x", -89)
      		.attr("y", 56)
      		.attr("dy", "1em")
      		.text("Probability of Landing")
      		.attr("text-anchor", "middle")
      		.attr("transform", "rotate(-90)")
      		.style("font-size", "14px");
      
      
    });
  </script>
  <p id="signature"><em>by Andrew Haruki Hill</em></p>
</body>

https://d3js.org/d3.v4.min.js