Skip to content

Instantly share code, notes, and snippets.

@harukihill

harukihill/.block

Last active May 1, 2017 18:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save harukihill/425fc01bb6123575767cfe319f92c251 to your computer and use it in GitHub Desktop.
Save harukihill/425fc01bb6123575767cfe319f92c251 to your computer and use it in GitHub Desktop.
Download ZIP
Monopoly Cost v. Property Value Score
Raw
.block
license: mit
Raw
index.html
<!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>
Raw
Monopoly.csv
Location Name Probability Rank Prob Cost Rent Color Probability of Monopoly 1 House 2 House 3 House 4 House Hotel Mortgage House Cost PVS Recoup Rolls 1 House/ 2 Railroads/ 2 Utilities 2 Houses/ 3 Railroads 3 Houses/ 4 Railroads 4 Houses Hotel
2 Mediterranean Avenue 0.02288 21 60 2 Brown 0.000533333 10 30 90 160 250 30 50 0.7886 1311.2 480.8 233.1 102.0 71.0 54.2
4 Baltic Avenue 0.02331 20 60 4 Brown 0.000533333 20 60 180 320 450 30 50 1.6049 643.5 236.0 114.4 50.1 34.9 30.1
6 Reading Railroad 0.02272 23 200 25 Railroad 0.000000381 2.8417 352.1 352.1 264.1 176.1
7 Oriental Avenue 0.02264 26 100 6 Light Blue 0.000011676 30 90 270 400 550 50 50 1.3596 736.2 162.0 78.5 34.4 28.7 24.6
9 Vermont Avenue 0.02268 25 100 6 Light Blue 0.000011676 30 90 270 400 550 50 50 1.3620 734.9 161.7 78.4 34.3 28.7 24.6
10 Connecticut Avenue 0.02274 24 120 8 Light Blue 0.000011676 40 100 300 450 600 60 50 1.5173 659.6 120.9 70.4 30.8 25.4 22.6
12 St. Charles Place 0.02278 22 140 10 Pink 0.000014091 50 150 450 625 750 70 100 1.6284 614.6 140.5 76.1 35.1 32.3 32.6
13 Electric Company 0.02361 19 150 14 Utility 0.000635581 2.2071 453.8 90.8
14 States Avenue 0.02445 16 140 10 Pink 0.000014091 50 150 450 625 750 70 100 1.7478 572.6 130.9 70.9 32.7 30.1 32.6
15 Virginia Avenue 0.0253 15 160 12 Pink 0.000014091 60 180 500 700 900 80 100 1.8991 527.0 105.4 57.1 28.5 26.0 27.2
16 Pennsylvania Railroad 0.02621 13 200 25 Railroad 0.000000381 3.2784 305.2 305.2 228.9 152.6
17 St. James Place 0.02722 3 180 14 Orange 0.000020779 70 200 550 750 950 90 100 2.1197 472.3 84.0 47.8 24.0 22.5 25.8
19 Tennessee Avenue 0.02781 1 180 14 Orange 0.000020779 70 200 550 750 950 90 100 2.1657 462.3 82.2 46.7 23.5 22.1 25.8
20 New York Avenue 0.02745 2 200 16 Orange 0.000020779 80 220 600 800 1000 100 100 2.1987 455.4 72.9 43.1 21.9 20.9 24.5
22 Kentucky Avenue 0.02694 7 220 18 Red 0.000019003 90 250 700 875 1050 110 150 2.2062 453.7 86.6 53.5 27.0 28.0 33.7
24 Indiana Avenue 0.02636 12 220 18 Red 0.000019003 90 250 700 875 1050 110 150 2.1587 463.7 88.5 54.6 27.6 28.6 33.7
25 Illinois Avenue 0.02676 10 240 20 Red 0.000019003 100 300 750 925 1100 120 150 2.2321 448.4 78.5 44.8 25.4 26.7 32.2
26 B. & O. Railroad 0.02697 6 200 25 Railroad 0.000000381 3.3735 296.6 296.6 222.5 148.3
27 Atlantic Avenue 0.02703 4 260 22 Yellow 0.000019588 110 330 800 975 1150 130 150 2.2894 437.2 70.6 40.4 23.6 25.0 30.8
28 Ventnor Avenue 0.02702 5 260 22 Yellow 0.000019588 110 330 800 975 1150 130 150 2.2886 437.4 70.7 40.4 23.6 25.1 30.8
29 Water Works 0.02692 8 150 14 Utility 0.000635581 2.5165 398.0 79.6
30 Marvin Gardens 0.02682 9 280 24 Yellow 0.000019588 120 360 850 1025 1200 140 150 2.3012 435.0 65.2 37.3 22.4 24.0 29.5
32 Pacific Avenue 0.02671 11 300 26 Green 0.000017028 130 390 900 1100 1275 150 200 2.3166 432.0 74.9 44.2 27.5 29.3 36.3
33 North Carolina Avenue 0.026 14 300 26 Green 0.000017028 130 390 900 1100 1275 150 200 2.2550 443.8 76.9 45.4 28.2 30.1 36.3
35 Pennsylvania Avenue 0.02452 17 320 28 Green 0.000017028 150 450 1000 1200 1400 160 200 2.1472 466.1 70.7 41.7 26.9 29.2 33.1
36 Short Line 0.02372 18 200 25 Railroad 0.000000381 2.9668 337.3 337.3 253.0 168.6
38 Park Place 0.02186 28 350 35 Dark Blue 0.000492287 175 500 1100 1300 1500 175 200 2.2332 457.5 68.0 42.1 27.4 30.3 30.9
40 Boardwalk 0.02252 27 400 50 Dark Blue 0.000492287 200 600 1400 1700 2000 200 200 2.8741 355.2 57.7 34.0 20.9 22.5 23.2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment