D3 Examples - Monopoly Cost v. Property Value Score

xxxxxxxxxx
 
<!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>
​
    