Monopoly Cost v. Property Value Score

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    #title {
      font-family: sans-serif;
      text-align: center;
      font-size: 20;
      line-height: 30%
    }
    
    #subheading {
      font: 12px sans-serif;
      text-align: center;
      font-weight: 300;
      line-height: 10%;
    }
    
     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;
    }
    
    .label {
      font-family: sans-serif;
      font-size: 14px;
      font-weight: 200;
    }
    
    .axis {
      font-size:13px;
      font-weight: 200;
    }
    
    #signature {
      font: 12px sans-serif;
      text-align: center;
    }
    
    .circle:hover {
      fill: white;
    }
    
  </style>
</head>

<body>
  <p id="title">Property Cost v. Property Value Score of Monopoly Properties</p>
  <p id="subheading">(Probability is based on a simulation of 1,000,000,000 rolls)</p>
  <script>
    var margin = {top:20, bottom: 50, left: 30, right: 30};
    var height = 400;
    var width = 800;
    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;
      
      //Scales
      var xScale = d3.scaleLinear()
      								.domain([0, d3.max(dataset, function(d){return d.cost;})])
      								.range([margin.left, width - margin.right]);
      
      var yScale = d3.scaleLinear()
      								.domain([0, d3.max(dataset, function(d){return d.pvs;}) + 0.128])
      								.range([height - margin.bottom, margin.top]);
      
      var rScale = d3.scaleLinear()
      								.domain([d3.min(dataset, function(d){return d.probability;}), d3.max(dataset, function(d){return d.probability;})])
      								.range([10, 176]);
      
      var circles = svg.selectAll("circle")
      								.data(dataset)
      								.enter()
      								.append("circle");
      
      // Jitter cx values for completely overlapping data
      circles.attr("cx", function(d){
        if (d.name == "Oriental Avenue"){
          return xScale(d.cost) - 3;
        }
        else if (d.name == "Vermont Avenue"){
          return xScale(d.cost) + 3;
        }
        else if (d.name == "Atlantic Avenue"){
          return xScale(d.cost) - 3;
        }
        else if (d.name == "Ventnor Avenue"){
          return xScale(d.cost) + 3;
        } else{
        return xScale(d.cost);
        }
      })
      			.attr("cy", function(d){
        return yScale(d.pvs);
      })
      			.attr("r", function(d){
        return Math.sqrt(rScale(d.probability));
      })
      			.style("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;
          }
        })
      		.style("stroke", "black")
      		.style("stroke-width", 1)
      		.style("fill-opacity", 0.5)
      		.on("mouseover", function(d){
          	div.transition()
          		.duration(200)
          		.style("opacity", .95);
          	div.html(d.name +"</br>Cost: $" + d.cost + "</br>Rent: $" + d.rent + "</br>Probability: " + Number((d.probability*100).toFixed(2)) + "%</br>PVS: " + Number((d.pvs).toFixed(2)))
          		.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);
        }); 
      
      //Y-Axis
      svg.append("g")
      		.attr("class", "axis")
      		.attr("transform", "translate(" + margin.left + "," + (-5) +")")
      		.call(d3.axisLeft(yScale));
    	
      svg.append("text")
      		.attr("class", "label")
      		.attr("x", -85)
      		.attr("y", 30)
      		.attr("dy", "1em")
      		.text("Property Value Score")
      		.attr("text-anchor", "middle")
      		.attr("transform", "rotate(-90)");
      
      // X-Axis
      svg.append("g")
      		.attr("class", "axis")
      		.attr("transform", "translate(0," + (height- margin.bottom -5) + ")")
      		.call(d3.axisBottom(xScale));
      
      svg.append("text")
      		.attr("class", "label")
      		.attr("x", width -123)
      		.attr("y", height - 60)
      		.text("Property Cost (in Monopoly $)")
      		.attr("text-anchor", "middle");

// Radius-Probability legend
      svg.append("circle")
      		.attr("cx", width - 100)
      		.attr("cy", height - 110)
      		.attr("r", 4)
      		.style("fill", "white")
      		.style("stroke", "black");
      
      svg.append("circle")
      		.attr("cx", width - 80)
      		.attr("cy", height - 110)
      		.attr("r", 9)
      		.style("fill", "white")
      		.style("stroke", "black");
      
      svg.append("circle")
      		.attr("cx", width - 50)
      		.attr("cy", height - 110)
      		.attr("r", 16)
      		.style("fill", "white")
      		.style("stroke", "black");
      
      svg.append("text")
      		.attr("x", width - 150)
      		.attr("y", height - 135)
      		.text("Radius Proportional to Probability")
      		.attr("font-size", 10)
      		.attr("font-family", "sans-serif")
      		.attr("text-align", "center");
     
      });
  </script>
  <p id="signature"><em>by Andrew Haruki Hill</em></p>
</body>

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