D3 Examples - Monopoly Property Value Score

xxxxxxxxxx
 
<!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">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:10, left:40, 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([0, 3.5])
                                .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.pvs);
      })
            .attr("height", function(d){
                    if (d.pvs == ""){
                return height - yScale(d.pvs) - margin.top;
              }
                    else {
                            return height - yScale(d.pvs) - 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);
          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);
        });
      
      svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + 55 + "," + 9 +")")
            .call(d3.axisLeft(yScale));
        
      svg.append("text")
            .attr("x", -105)
            .attr("y", 60)
            .attr("dy", "1em")
            .text("Property Value Score (PVS)")
            .attr("text-anchor", "middle")
            .attr("transform", "rotate(-90)");
      
      
      
​
    });
  </script>
  <p id="signature"><em>by Andrew Haruki Hill</em></p>
</body>
​
    