Work in progress
Uses a Voronoi overlay for improved mouseover interaction.
Reproduction of FiveThirtyEight graphic. Data from FiveThirtyEight's GitHub repo.
Guidance from this example.
Team colors found at http://teamcolors.arc90.com/.
height: 700 | |
border: no |
Work in progress
Uses a Voronoi overlay for improved mouseover interaction.
Reproduction of FiveThirtyEight graphic. Data from FiveThirtyEight's GitHub repo.
Guidance from this example.
Team colors found at http://teamcolors.arc90.com/.
<!DOCTYPE html> | |
<head> | |
<title>Voronoi line chart</title> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
width: 700px; | |
margin: 0; | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-size: 16px; | |
position: relative; | |
background-color: white; | |
} | |
.intro { | |
width: 70%; | |
} | |
#form { | |
font-size: 12px; | |
} | |
#select { | |
display: inline-block; | |
opacity: 1; | |
height: 40px; | |
width: 195px; | |
border: 3px solid black; | |
color: black; | |
} | |
/*option { | |
font-weight: normal; | |
display: block; | |
white-space: pre; | |
min-height: 1.2em; | |
padding: 0px 2px 1px; | |
}*/ | |
select { | |
/*padding: 0;*/ | |
/*outline: none;*/ | |
font-size: 22px; | |
font-weight: 700; | |
margin: 0; | |
max-width: 100%; | |
background: #F0F0F0; | |
/*-webkit-appearance: none;*/ | |
/*overflow: visible !important; | |
-webkit-appearance: menulist; | |
box-sizing: border-box; | |
align-items: center; | |
white-space: pre; | |
-webkit-rtl-ordering: logical; | |
cursor: default;*/ | |
} | |
.wrapper { | |
background-color: #F0F0F0; | |
} | |
.chart { | |
cursor: crosshair; | |
} | |
.axis { | |
pointer-events: none; | |
font: 10px sans-serif; | |
} | |
.axis path { | |
fill: none; | |
} | |
.tick { | |
/*pointer-events: none;*/ | |
} | |
.tick line { | |
fill: none; | |
stroke: black; | |
stroke-opacity: 0.2; | |
stroke-width: 1px; | |
shape-rendering: crispEdges; | |
} | |
/*.tick:first-of-type line { | |
stroke-opacity: 0; | |
}*/ | |
.tick text { | |
/*pointer-events: none;*/ | |
font-size: 16px; | |
fill: black; | |
text-anchor: start; | |
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3), | |
1px -1px 0 rgba(255, 255, 255, 0.3), | |
-1px 1px 0 rgba(255, 255, 255, 0.3), | |
-1px -1px 0 rgba(255, 255, 255, 0.3); | |
} | |
.team-lines { | |
fill: none; | |
stroke: #AAA; | |
stroke-linejoin: round; | |
stroke-linecap: round; | |
stroke-width: 2px; | |
stroke-linecap: round; /* TODO: Read more */ | |
pointer-events: none; | |
} | |
.focus circle { | |
pointer-events: none; | |
} | |
.second, | |
.focus text { | |
pointer-events: none; | |
font-size: 22px; | |
font-weight: 700; | |
text-shadow: 0 1px 0 #fff, | |
1px 0 0 #fff, | |
0 -1px 0 #fff, | |
-1px 0 0 #fff; | |
} | |
.focus text { | |
text-anchor: middle; | |
fill: black; | |
} | |
.first { | |
font-size: 14px; | |
font-weight: 400; | |
pointer-events: none; | |
} | |
.first, | |
.second { | |
text-anchor: start; | |
} | |
.voronoi path { | |
fill: none; | |
pointer-events: all; | |
} | |
.voronoi--show path { | |
stroke: red; | |
stroke-opacity: 0.2; | |
} | |
#form { | |
position: absolute; | |
top: 20px; | |
right: 30px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<div class="intro"> | |
<span>The average chance of the</span> | |
<select name="select" id="select"> | |
<option value="--" selected>--</option> | |
</select> | |
<span>winning at any point in a game this year.</span> | |
</div> | |
<label id="form" for="show-voronoi"> | |
Show Voronoi | |
<input type="checkbox" id="show-voronoi" disabled> | |
</label> | |
<svg class="chart"></svg> | |
</div> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script src="//d3js.org/queue.v1.min.js"></script> | |
<script> | |
var minutes, | |
focus1, | |
focus2, | |
teamLabel, | |
team_data, | |
team_colors, | |
selected_team = false, | |
selected_team_path, | |
margin = {top: 20, right: 30, bottom: 40, left: 50}, | |
width = 700 - margin.left - margin.right, | |
height = 450 - margin.top - margin.bottom; | |
var formatPctNumber = d3.format("0%"); | |
var svg = d3.select('.chart'); | |
var chart = d3.select(".chart") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.selectAll('.intro') | |
.style('padding-top', margin.top / 2 + 'px') | |
.style('padding-right', margin.right + 'px') | |
.style('padding-left', margin.left + 'px'); | |
var voronoiGroup = chart.append('g') | |
.attr('class', 'voronoi') | |
.attr('id', 'voronoi-group'); | |
// Used to assign names to column placement values along the x-axis. | |
var x = d3.scale.linear() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
// Define axes | |
var xAxis = d3.svg.axis() | |
.scale(x) // Use the defined x ordinal scale. | |
.tickSize(-height) | |
.ticks(8) | |
.tickPadding(20) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
.tickFormat(function(d, i) { | |
// var s = Math.floor(y.domain()[1] / 100) * 100; // Round down to nearest hundred | |
return i === 6 | |
? Math.floor(d * 100) + "%" | |
: Math.floor(d * 100); | |
}) | |
.tickPadding(40) | |
.ticks(5) | |
.tickSize(-width); | |
var xAxisLabels = chart.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")"); | |
var yAxisLabels = chart.append("g") | |
.attr("class", "y axis"); | |
// Voronoi | |
var voronoi = d3.geom.voronoi() | |
.x(function(d) { return x(d.minute); }) | |
.y(function(d) { return y(d.probability); }) | |
// .clipExtent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]); | |
.clipExtent([[0, 0], [width, height]]); | |
// Define line path | |
var line = d3.svg.line() | |
.x(function(d) { return x(d.minute); }) | |
.y(function(d) { return y(d.probability); }); | |
queue() | |
.defer(d3.tsv, "nba.tsv", type) | |
.defer(d3.json, "nba_colors.json") | |
.await(ready); | |
function ready(error, data, colors) { | |
if (error) throw error; | |
team_colors = colors; | |
team_data = data.sort(function(a, b) { | |
return (a.team < b.team) ? -1 : (a.team > b.team) ? 1 : 0; | |
}) | |
x | |
.domain(d3.extent(minutes)) | |
.ticks(8); | |
y | |
.domain([ | |
d3.min(team_data, function(c) { return d3.min(c.values, function(d) { return d.probability; }); }), | |
d3.max(team_data, function(c) { return d3.max(c.values, function(d) { return d.probability; }); }) | |
]) | |
// .ticks(5) | |
.nice(); | |
// debugger; | |
xAxis.scale(x); // Use the updated scales | |
yAxis.scale(y); | |
// Draw axes | |
xAxisLabels.call(xAxis); | |
yAxisLabels.call(yAxis); | |
yAxisLabels.selectAll('text') | |
.style('text-anchor', 'start'); | |
yAxisLabels.selectAll('line') | |
.attr("x1", 4); | |
// Draw lines | |
chart.append("g") | |
.attr("class", "team-lines") | |
.selectAll("path") | |
.data(team_data) | |
.enter().append("path") | |
.attr('class', 'team-line') | |
.attr("data-teamcolor", function(d) { | |
var i; | |
for (i = 0; i < colors.teams.length; i++) { | |
if (colors.teams[i].team === d.team) { | |
return colors.teams[i].color; | |
} | |
} | |
}) | |
.attr("d", function(d) { | |
d.line = this; | |
return line(d.values); | |
}); | |
// Hover circle and text label | |
focus1 = chart.append("g") | |
.attr("transform", "translate(-100,-100)") | |
.attr("class", "focus"); | |
focus2 = chart.append("g") | |
.attr("transform", "translate(-100,-100)") | |
.attr("class", "focus"); | |
focus1.append("circle") | |
.attr('id', 'circle1') | |
.attr("r", 3.5); | |
focus2.append("circle") | |
.attr('id', 'circle2') | |
.attr("r", 3.5); | |
focus1.append("text") | |
.attr('id', 'text1') | |
.attr("y", -10); | |
focus2.append("text") | |
.attr('id', 'text2') | |
.attr("y", -10); | |
// Team label when hovering | |
teamLabel = chart.append("g") | |
.attr("transform", "translate(" + -width + "," + -height + ")") | |
.attr("class", "teamLabel"); | |
teamLabel.append("text") | |
.attr('dy', -20) | |
.attr('class', 'first') | |
.attr('opacity', 0) | |
.text("...compared to the"); | |
teamLabel.append("text") | |
.attr('class', 'second'); | |
// Voronoi | |
voronoiGroup.selectAll("path") | |
.data(voronoi(d3.nest() | |
.key(function(d) { return x(d.minute) + "," + y(d.probability); }) | |
.rollup(function(v) { return v[0]; }) | |
.entries(d3.merge(team_data.map(function(d) { return d.values; }))) | |
.map(function(d) { return d.values; }) | |
)) | |
.enter().append("path") | |
.attr('class', 'voronoi-path') | |
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }) | |
.datum(function(d) { return d.point; }) | |
.on("mouseover", mouseover) | |
.on("mouseout", mouseout); | |
// Update dropdown menu | |
var select = d3.select("#select") | |
.on('change', selectChange); | |
var options = select.selectAll('.option') | |
.data(team_data) | |
.enter().append('option') | |
.attr('value', function(d) { return d.team; }) | |
.text(function(d) { return d.team; }); | |
// Show voronoi | |
d3.select("#show-voronoi") | |
.property("disabled", false) | |
.on("change", function() { voronoiGroup.classed("voronoi--show", this.checked); }); | |
} | |
function selectChange() { | |
var selected = document.getElementById('select'); | |
var value = selected.options[selected.selectedIndex].value; | |
// console.log(team_colors); | |
var team_color; | |
var i; | |
for (i = 0; i < team_colors.teams.length; i++) { | |
if (team_colors.teams[i].team === value) { | |
team_color = team_colors.teams[i].color; | |
} | |
} | |
d3.selectAll('#select') | |
.style('color', team_color); | |
if (value === '--') { | |
// TODO: Check if dropdown selection is present. If so, compare two teams. | |
selected_team = false; | |
var d = d3.selectAll('.voronoi-path') | |
.filter(function(d) { | |
if (d.city.team !== value) { | |
mouseout(d); | |
} | |
}); | |
} else { | |
selected_team = value; | |
var d = d3.selectAll('.voronoi-path') | |
.filter(function(d) { | |
if (d.city.team === value) { | |
mouseover(d); | |
} | |
}); | |
} | |
} | |
function mouseover(d) { | |
var i, | |
team_color, | |
current_minute = d.minute, | |
current_selected_team_probability; | |
if (selected_team) { // Get corresponding probability for the selected team. | |
for (i = 0; i < team_data.length; i++) { | |
if (team_data[i].team === selected_team) { | |
current_selected_team_probability = team_data[i].values[current_minute].probability; | |
} | |
} | |
} | |
// TODO: Also move selected line to front just before the hovered line. | |
// Otherwise, selected line slowly gets buried. | |
// if (selected_team) { | |
// // TODO: Get selected team's line node | |
// // var node = d3.selectAll(TODO); | |
// var parentNode = selected_team_path.parentNode; | |
// parentNode.appendChild(node); | |
// } | |
// Update color of line under mouseover. | |
d3.select(d.city.line) | |
.attr("stroke", function(d) { | |
team_color = d3.select(this).attr("data-teamcolor"); | |
return team_color; | |
}); | |
d.city.line.parentNode.appendChild(d.city.line); // Move to front | |
// Label and circle that move with mouse | |
focus1.attr("transform", "translate(" + x(d.minute) + "," + y(d.probability) + ")"); | |
focus1.select("text").text( | |
formatPctNumber(d.probability) | |
); | |
if (selected_team) { | |
focus2.attr("transform", "translate(" + x(d.minute) + "," + y(current_selected_team_probability) + ")"); | |
focus2.select("#text2").text( | |
formatPctNumber(current_selected_team_probability) | |
); | |
} | |
// Lower-left corner | |
teamLabel | |
.attr("transform", "translate(" + width * 0.1 + "," + height * 0.9 + ")"); | |
if (selected_team) { | |
teamLabel.select('.first') | |
.attr('opacity', 1); | |
} else { | |
teamLabel.select('.first') | |
.attr('opacity', 0); | |
} | |
teamLabel.select('.second') | |
.attr('fill', team_color) | |
.text(d.city.team); | |
} | |
function mouseout(d) { | |
if (d.city.team === selected_team) { | |
return; | |
} | |
d3.select(d.city.line) | |
.attr("stroke", "#AAA"); | |
focus1.attr("transform", "translate(-100,-100)"); | |
focus2.attr("transform", "translate(-100,-100)"); | |
teamLabel.attr("transform", "translate(" + -width + "," + -height + ")") | |
} | |
function type(d, i) { | |
minutes = Object | |
.keys(d) | |
.filter(function(d) { | |
return d !== 'team'; | |
}) | |
.map(function(d) { return +d; }); | |
var team = { | |
team: d.team, | |
values: null | |
}; | |
team.values = minutes.map(function(m) { | |
return { | |
city: team, | |
minute: +m, | |
probability: +d[m] | |
}; | |
}); | |
return team; | |
} | |
</script> | |
</body> | |
</html> |
team | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Hawks | 0.50659 | 0.51033 | 0.515 | 0.51631 | 0.51853 | 0.52819 | 0.53316 | 0.52887 | 0.53559 | 0.53979 | 0.54406 | 0.55059 | 0.55654 | 0.54819 | 0.55298 | 0.54751 | 0.54967 | 0.56089 | 0.55626 | 0.57457 | 0.58205 | 0.57947 | 0.58893 | 0.60811 | 0.60994 | 0.61638 | 0.62932 | 0.64055 | 0.63623 | 0.64583 | 0.65302 | 0.66626 | 0.66367 | 0.68585 | 0.68545 | 0.68699 | 0.69889 | 0.70126 | 0.70873 | 0.71627 | 0.73074 | 0.74168 | 0.76403 | 0.78034 | 0.78955 | 0.79571 | 0.81632 | 0.83095 | 0.80556 | |
Nets | 0.5029 | 0.50561 | 0.50916 | 0.51488 | 0.5158 | 0.51226 | 0.52629 | 0.51997 | 0.52036 | 0.52213 | 0.51841 | 0.51452 | 0.52263 | 0.52271 | 0.52445 | 0.51666 | 0.51149 | 0.50685 | 0.50886 | 0.5007 | 0.4912 | 0.48797 | 0.49266 | 0.48054 | 0.47683 | 0.48004 | 0.47737 | 0.46924 | 0.46477 | 0.44831 | 0.43876 | 0.43952 | 0.43324 | 0.42479 | 0.42033 | 0.41381 | 0.41389 | 0.40248 | 0.39898 | 0.40743 | 0.41453 | 0.42484 | 0.42403 | 0.44106 | 0.43498 | 0.40266 | 0.39979 | 0.4182 | 0.42308 | |
Celtics | 0.50072 | 0.50446 | 0.49667 | 0.49552 | 0.49248 | 0.49178 | 0.48757 | 0.48156 | 0.46489 | 0.46445 | 0.47876 | 0.47318 | 0.47261 | 0.46916 | 0.46707 | 0.47046 | 0.47751 | 0.48152 | 0.48073 | 0.47784 | 0.48687 | 0.49569 | 0.49009 | 0.47899 | 0.48 | 0.48011 | 0.47825 | 0.45737 | 0.45678 | 0.45645 | 0.45256 | 0.45059 | 0.44908 | 0.44359 | 0.45642 | 0.44919 | 0.4477 | 0.45029 | 0.42788 | 0.41242 | 0.4099 | 0.39759 | 0.41533 | 0.42298 | 0.41764 | 0.43214 | 0.39493 | 0.39146 | 0.41176 | |
Hornets | 0.4968 | 0.4929 | 0.49334 | 0.48998 | 0.48366 | 0.48375 | 0.48789 | 0.48325 | 0.47458 | 0.48458 | 0.4849 | 0.49089 | 0.49287 | 0.50169 | 0.4962 | 0.49915 | 0.49421 | 0.48753 | 0.48754 | 0.50236 | 0.51023 | 0.50381 | 0.50926 | 0.50743 | 0.49746 | 0.48863 | 0.48544 | 0.49565 | 0.50162 | 0.49451 | 0.49507 | 0.49436 | 0.48523 | 0.48351 | 0.48134 | 0.48476 | 0.48863 | 0.47121 | 0.48139 | 0.46885 | 0.4652 | 0.4638 | 0.44927 | 0.45589 | 0.44461 | 0.44333 | 0.42749 | 0.40301 | 0.40196 | |
Bulls | 0.49521 | 0.49411 | 0.49999 | 0.49727 | 0.48183 | 0.4777 | 0.4776 | 0.48167 | 0.48419 | 0.48618 | 0.4848 | 0.49344 | 0.49283 | 0.49677 | 0.49644 | 0.48745 | 0.4944 | 0.49709 | 0.48573 | 0.48591 | 0.48437 | 0.47389 | 0.47672 | 0.47557 | 0.48612 | 0.4885 | 0.48056 | 0.4923 | 0.50045 | 0.51178 | 0.52817 | 0.52104 | 0.51034 | 0.52609 | 0.52024 | 0.51742 | 0.51572 | 0.50736 | 0.52464 | 0.53731 | 0.54208 | 0.5507 | 0.55343 | 0.53974 | 0.54905 | 0.55394 | 0.58889 | 0.62055 | 0.63889 | |
Cavaliers | 0.50632 | 0.51001 | 0.51559 | 0.5281 | 0.53398 | 0.54561 | 0.54552 | 0.55888 | 0.55277 | 0.54415 | 0.55025 | 0.55111 | 0.56327 | 0.56692 | 0.55869 | 0.56267 | 0.5671 | 0.57342 | 0.57485 | 0.57301 | 0.56152 | 0.56491 | 0.57316 | 0.56286 | 0.55653 | 0.55273 | 0.55315 | 0.5471 | 0.55056 | 0.53978 | 0.53865 | 0.52611 | 0.52965 | 0.5304 | 0.54139 | 0.55032 | 0.54464 | 0.55441 | 0.57112 | 0.57235 | 0.56008 | 0.56128 | 0.56917 | 0.57688 | 0.57877 | 0.5756 | 0.57393 | 0.59438 | 0.59091 | |
Mavericks | 0.50057 | 0.5049 | 0.51062 | 0.50779 | 0.51322 | 0.52419 | 0.52018 | 0.54108 | 0.53991 | 0.52999 | 0.54006 | 0.53523 | 0.54855 | 0.54649 | 0.55093 | 0.55558 | 0.561 | 0.56053 | 0.56216 | 0.56531 | 0.56828 | 0.57012 | 0.56965 | 0.56925 | 0.56526 | 0.56238 | 0.56082 | 0.55886 | 0.55001 | 0.55091 | 0.54678 | 0.55349 | 0.55153 | 0.55213 | 0.54834 | 0.54339 | 0.55417 | 0.55846 | 0.55719 | 0.5659 | 0.55897 | 0.55617 | 0.56061 | 0.57536 | 0.58625 | 0.58613 | 0.61335 | 0.60975 | 0.60909 | |
Nuggets | 0.50629 | 0.50851 | 0.50099 | 0.49103 | 0.48811 | 0.4826 | 0.48959 | 0.4852 | 0.47546 | 0.47896 | 0.48877 | 0.47794 | 0.47637 | 0.47038 | 0.46176 | 0.46352 | 0.46024 | 0.45025 | 0.44176 | 0.43789 | 0.44057 | 0.42985 | 0.42929 | 0.42715 | 0.43103 | 0.43263 | 0.43248 | 0.438 | 0.43453 | 0.43716 | 0.4341 | 0.43216 | 0.44052 | 0.45119 | 0.44041 | 0.43495 | 0.43038 | 0.42277 | 0.43772 | 0.43321 | 0.43965 | 0.43666 | 0.42163 | 0.42695 | 0.41269 | 0.40941 | 0.41547 | 0.38464 | 0.39623 | |
Pistons | 0.49966 | 0.49987 | 0.50095 | 0.49052 | 0.4926 | 0.48822 | 0.48644 | 0.49065 | 0.49435 | 0.49669 | 0.4947 | 0.49174 | 0.47564 | 0.48764 | 0.48807 | 0.47976 | 0.47946 | 0.48168 | 0.4826 | 0.47669 | 0.47653 | 0.47778 | 0.46992 | 0.4759 | 0.46515 | 0.45806 | 0.45361 | 0.44857 | 0.44535 | 0.45902 | 0.46223 | 0.45579 | 0.46032 | 0.45684 | 0.45124 | 0.45617 | 0.45587 | 0.46334 | 0.44568 | 0.43682 | 0.43357 | 0.42028 | 0.41708 | 0.39904 | 0.40774 | 0.39549 | 0.38524 | 0.37677 | 0.39815 | |
Warriors | 0.50006 | 0.50266 | 0.5147 | 0.52206 | 0.52458 | 0.52631 | 0.54101 | 0.5476 | 0.55366 | 0.55795 | 0.55746 | 0.55488 | 0.55876 | 0.56085 | 0.57054 | 0.58213 | 0.59007 | 0.60556 | 0.60989 | 0.62727 | 0.63749 | 0.63914 | 0.65809 | 0.67216 | 0.67476 | 0.69282 | 0.69281 | 0.70103 | 0.69819 | 0.71048 | 0.7129 | 0.72082 | 0.71602 | 0.72728 | 0.73143 | 0.73987 | 0.74419 | 0.75492 | 0.75873 | 0.75017 | 0.7419 | 0.74373 | 0.74759 | 0.74415 | 0.76916 | 0.78697 | 0.78685 | 0.81668 | 0.82 | |
Rockets | 0.49785 | 0.49817 | 0.50441 | 0.50788 | 0.5149 | 0.52564 | 0.52697 | 0.52832 | 0.53884 | 0.54678 | 0.54369 | 0.54798 | 0.54928 | 0.55131 | 0.54992 | 0.54673 | 0.54486 | 0.54825 | 0.54055 | 0.54452 | 0.54549 | 0.56267 | 0.5734 | 0.56865 | 0.57877 | 0.58196 | 0.59124 | 0.58634 | 0.59591 | 0.58933 | 0.58923 | 0.59497 | 0.6072 | 0.62039 | 0.61637 | 0.61843 | 0.62718 | 0.6401 | 0.66302 | 0.66739 | 0.67503 | 0.67291 | 0.67262 | 0.65435 | 0.65194 | 0.64109 | 0.60263 | 0.63115 | 0.63462 | |
Pacers | 0.4995 | 0.49613 | 0.49362 | 0.48915 | 0.48094 | 0.47262 | 0.46254 | 0.46804 | 0.46746 | 0.46001 | 0.46386 | 0.46275 | 0.45762 | 0.45492 | 0.45181 | 0.459 | 0.45912 | 0.46302 | 0.46686 | 0.46403 | 0.45939 | 0.45613 | 0.46168 | 0.45073 | 0.43426 | 0.44539 | 0.43913 | 0.41848 | 0.4105 | 0.40451 | 0.40404 | 0.40389 | 0.4096 | 0.41174 | 0.42167 | 0.42668 | 0.42552 | 0.425 | 0.43974 | 0.44431 | 0.44629 | 0.45416 | 0.43793 | 0.42011 | 0.40418 | 0.39422 | 0.40996 | 0.41359 | 0.40741 | |
Clippers | 0.50556 | 0.50592 | 0.51511 | 0.52794 | 0.53662 | 0.52963 | 0.53914 | 0.5338 | 0.53914 | 0.54073 | 0.54765 | 0.55197 | 0.54708 | 0.54004 | 0.52667 | 0.53582 | 0.54349 | 0.54138 | 0.54916 | 0.54778 | 0.54709 | 0.54955 | 0.53562 | 0.55359 | 0.56675 | 0.56647 | 0.57114 | 0.58789 | 0.59365 | 0.59441 | 0.60203 | 0.61171 | 0.61431 | 0.62093 | 0.61676 | 0.60502 | 0.60456 | 0.60613 | 0.58813 | 0.59802 | 0.57955 | 0.60137 | 0.61858 | 0.62378 | 0.6417 | 0.64496 | 0.64142 | 0.64214 | 0.63889 | |
Lakers | 0.49295 | 0.48283 | 0.47919 | 0.47825 | 0.47545 | 0.47556 | 0.45851 | 0.45114 | 0.44417 | 0.44523 | 0.44341 | 0.44887 | 0.44984 | 0.46695 | 0.46768 | 0.47161 | 0.4798 | 0.47592 | 0.47184 | 0.46437 | 0.45816 | 0.45318 | 0.4418 | 0.43643 | 0.43633 | 0.43309 | 0.42004 | 0.42545 | 0.4264 | 0.42403 | 0.41827 | 0.40484 | 0.38505 | 0.36776 | 0.36003 | 0.35364 | 0.33788 | 0.32808 | 0.3151 | 0.29939 | 0.31002 | 0.32272 | 0.31154 | 0.28615 | 0.285 | 0.30485 | 0.28521 | 0.25419 | 0.24528 | |
Grizzlies | 0.49748 | 0.4994 | 0.49584 | 0.49839 | 0.50381 | 0.51232 | 0.51531 | 0.52232 | 0.52486 | 0.52699 | 0.53675 | 0.54346 | 0.54411 | 0.54579 | 0.55862 | 0.56059 | 0.56341 | 0.56349 | 0.55515 | 0.56004 | 0.56192 | 0.57117 | 0.56987 | 0.57333 | 0.58095 | 0.58601 | 0.59755 | 0.60267 | 0.61287 | 0.62552 | 0.63398 | 0.62796 | 0.62496 | 0.64685 | 0.62914 | 0.64682 | 0.64841 | 0.65086 | 0.6522 | 0.64286 | 0.64077 | 0.6544 | 0.65614 | 0.66238 | 0.65911 | 0.67136 | 0.69364 | 0.68559 | 0.70755 | |
Heat | 0.50185 | 0.51004 | 0.50037 | 0.50107 | 0.506 | 0.49679 | 0.50679 | 0.50799 | 0.50075 | 0.49615 | 0.49572 | 0.50037 | 0.4965 | 0.50245 | 0.50921 | 0.50475 | 0.51075 | 0.51958 | 0.52366 | 0.52168 | 0.52573 | 0.53282 | 0.53455 | 0.52852 | 0.52789 | 0.52982 | 0.51574 | 0.51051 | 0.51918 | 0.51813 | 0.52568 | 0.52754 | 0.52126 | 0.49971 | 0.47301 | 0.45751 | 0.45119 | 0.43957 | 0.43959 | 0.44415 | 0.45184 | 0.44424 | 0.44705 | 0.45264 | 0.45918 | 0.46485 | 0.45793 | 0.43486 | 0.43137 | |
Bucks | 0.50063 | 0.50326 | 0.49707 | 0.49076 | 0.4917 | 0.49159 | 0.47593 | 0.48448 | 0.47588 | 0.49114 | 0.49591 | 0.48674 | 0.48413 | 0.48847 | 0.50216 | 0.52762 | 0.52922 | 0.53597 | 0.54186 | 0.54332 | 0.54584 | 0.53174 | 0.53544 | 0.54524 | 0.55359 | 0.56428 | 0.55978 | 0.55884 | 0.54823 | 0.54542 | 0.54909 | 0.55671 | 0.57412 | 0.55999 | 0.56874 | 0.57382 | 0.58925 | 0.60444 | 0.59225 | 0.59964 | 0.59789 | 0.59742 | 0.5938 | 0.57374 | 0.55655 | 0.5621 | 0.53144 | 0.52595 | 0.54717 | |
Timberwolves | 0.49594 | 0.489 | 0.48618 | 0.47759 | 0.4794 | 0.47773 | 0.46355 | 0.45743 | 0.45864 | 0.45482 | 0.45429 | 0.44999 | 0.44054 | 0.4278 | 0.42655 | 0.41931 | 0.41541 | 0.39922 | 0.38838 | 0.38006 | 0.37202 | 0.36292 | 0.35046 | 0.34768 | 0.34725 | 0.34604 | 0.34064 | 0.32888 | 0.32659 | 0.33698 | 0.31887 | 0.31634 | 0.31686 | 0.28702 | 0.28122 | 0.28738 | 0.27322 | 0.27268 | 0.2597 | 0.24388 | 0.24494 | 0.24242 | 0.23367 | 0.24958 | 0.25058 | 0.258 | 0.23478 | 0.24404 | 0.22642 | |
Pelicans | 0.49454 | 0.49158 | 0.49031 | 0.4896 | 0.4864 | 0.48845 | 0.49817 | 0.49012 | 0.49415 | 0.49617 | 0.49715 | 0.49429 | 0.48815 | 0.48601 | 0.47513 | 0.479 | 0.47876 | 0.48634 | 0.48619 | 0.49444 | 0.50567 | 0.51376 | 0.51949 | 0.51717 | 0.53015 | 0.53554 | 0.53665 | 0.53944 | 0.54205 | 0.53967 | 0.53463 | 0.52773 | 0.52796 | 0.52348 | 0.52187 | 0.52653 | 0.523 | 0.52361 | 0.52418 | 0.53354 | 0.55043 | 0.53668 | 0.52674 | 0.52573 | 0.52204 | 0.50877 | 0.53116 | 0.50918 | 0.5283 | |
Knicks | 0.49641 | 0.48715 | 0.48102 | 0.47614 | 0.47718 | 0.47434 | 0.46972 | 0.46332 | 0.46068 | 0.46056 | 0.45196 | 0.4402 | 0.44458 | 0.4436 | 0.43774 | 0.42112 | 0.41815 | 0.41045 | 0.40399 | 0.40141 | 0.39218 | 0.38302 | 0.37913 | 0.38125 | 0.37483 | 0.37409 | 0.3728 | 0.36404 | 0.33662 | 0.32848 | 0.32558 | 0.32101 | 0.31465 | 0.30546 | 0.31202 | 0.31205 | 0.30928 | 0.31292 | 0.30747 | 0.30769 | 0.30707 | 0.29843 | 0.2728 | 0.25048 | 0.23738 | 0.23506 | 0.2153 | 0.23758 | 0.22115 | |
Thunder | 0.50234 | 0.5056 | 0.51094 | 0.50833 | 0.51464 | 0.51581 | 0.51944 | 0.5149 | 0.52346 | 0.53429 | 0.5379 | 0.54434 | 0.53703 | 0.5423 | 0.5474 | 0.53866 | 0.54079 | 0.53281 | 0.53959 | 0.5459 | 0.54159 | 0.54558 | 0.54002 | 0.53202 | 0.5239 | 0.52423 | 0.51825 | 0.5351 | 0.55276 | 0.55758 | 0.56067 | 0.55977 | 0.57222 | 0.5816 | 0.57522 | 0.56631 | 0.57744 | 0.5612 | 0.53668 | 0.54343 | 0.53161 | 0.52505 | 0.54212 | 0.56238 | 0.55633 | 0.54175 | 0.54928 | 0.54605 | 0.5283 | |
Magic | 0.5003 | 0.49621 | 0.48724 | 0.48255 | 0.47933 | 0.47115 | 0.46852 | 0.46738 | 0.46479 | 0.47313 | 0.46338 | 0.45438 | 0.44875 | 0.43909 | 0.44679 | 0.44249 | 0.43855 | 0.44011 | 0.44564 | 0.42977 | 0.41597 | 0.40901 | 0.41592 | 0.41079 | 0.40985 | 0.39909 | 0.41328 | 0.41139 | 0.40176 | 0.39387 | 0.39976 | 0.38301 | 0.38529 | 0.36792 | 0.37472 | 0.36093 | 0.34964 | 0.35416 | 0.35101 | 0.36046 | 0.34937 | 0.32468 | 0.32018 | 0.3219 | 0.30686 | 0.29497 | 0.29847 | 0.2664 | 0.28571 | |
76ers | 0.49579 | 0.49048 | 0.47738 | 0.48725 | 0.48051 | 0.47748 | 0.46175 | 0.45028 | 0.44632 | 0.43626 | 0.41519 | 0.40911 | 0.39735 | 0.38336 | 0.3762 | 0.38015 | 0.37129 | 0.36372 | 0.37013 | 0.35408 | 0.34302 | 0.33818 | 0.33384 | 0.32114 | 0.3164 | 0.29565 | 0.28013 | 0.2714 | 0.26472 | 0.26892 | 0.26749 | 0.27125 | 0.27422 | 0.26929 | 0.27022 | 0.27705 | 0.26862 | 0.25784 | 0.25957 | 0.25492 | 0.25248 | 0.26361 | 0.25132 | 0.23938 | 0.22987 | 0.22357 | 0.23343 | 0.24307 | 0.22642 | |
Suns | 0.50173 | 0.49609 | 0.49791 | 0.49884 | 0.49387 | 0.48473 | 0.48745 | 0.47222 | 0.47362 | 0.47386 | 0.46884 | 0.47604 | 0.4782 | 0.47693 | 0.46875 | 0.47415 | 0.47121 | 0.48171 | 0.48053 | 0.49588 | 0.50833 | 0.50582 | 0.50176 | 0.50292 | 0.50196 | 0.51354 | 0.51527 | 0.51271 | 0.52972 | 0.52838 | 0.51991 | 0.53202 | 0.53261 | 0.52214 | 0.52388 | 0.50982 | 0.51601 | 0.52819 | 0.54672 | 0.55258 | 0.54686 | 0.54771 | 0.54283 | 0.5478 | 0.55691 | 0.56634 | 0.59005 | 0.61414 | 0.58491 | |
Trail Blazers | 0.50597 | 0.50963 | 0.51288 | 0.51226 | 0.51042 | 0.51231 | 0.50684 | 0.50736 | 0.50899 | 0.49891 | 0.49435 | 0.49241 | 0.49757 | 0.49991 | 0.49618 | 0.49735 | 0.48674 | 0.48661 | 0.49884 | 0.50274 | 0.50127 | 0.51123 | 0.51158 | 0.51377 | 0.51817 | 0.5202 | 0.51245 | 0.51898 | 0.52481 | 0.51758 | 0.52109 | 0.50814 | 0.51304 | 0.52769 | 0.53447 | 0.54699 | 0.54007 | 0.55397 | 0.55131 | 0.57455 | 0.58539 | 0.60163 | 0.6072 | 0.6154 | 0.64679 | 0.67641 | 0.68548 | 0.65526 | 0.65385 | |
Kings | 0.50255 | 0.5026 | 0.49792 | 0.50645 | 0.50326 | 0.51691 | 0.52521 | 0.5253 | 0.52679 | 0.52059 | 0.50499 | 0.49907 | 0.50855 | 0.50103 | 0.49991 | 0.4807 | 0.47593 | 0.46588 | 0.46809 | 0.46456 | 0.4555 | 0.46567 | 0.46461 | 0.46629 | 0.46551 | 0.45519 | 0.45909 | 0.46158 | 0.45731 | 0.44783 | 0.44834 | 0.44144 | 0.41818 | 0.40921 | 0.41349 | 0.40713 | 0.38018 | 0.38543 | 0.39397 | 0.38855 | 0.38981 | 0.38358 | 0.38299 | 0.39247 | 0.3966 | 0.37638 | 0.37943 | 0.34526 | 0.33654 | |
Spurs | 0.50132 | 0.50692 | 0.509 | 0.51354 | 0.50912 | 0.50952 | 0.50721 | 0.51497 | 0.52273 | 0.53295 | 0.53617 | 0.55558 | 0.55388 | 0.56435 | 0.5634 | 0.55665 | 0.55583 | 0.55821 | 0.57697 | 0.58152 | 0.58912 | 0.59575 | 0.58282 | 0.59552 | 0.58055 | 0.57545 | 0.58437 | 0.59344 | 0.58875 | 0.58243 | 0.56542 | 0.57606 | 0.58082 | 0.57484 | 0.58245 | 0.58189 | 0.59516 | 0.59458 | 0.6092 | 0.6121 | 0.61777 | 0.62611 | 0.63115 | 0.63321 | 0.64128 | 0.65376 | 0.64433 | 0.69058 | 0.66981 | |
Raptors | 0.49558 | 0.49875 | 0.5042 | 0.50387 | 0.50492 | 0.49835 | 0.49825 | 0.49874 | 0.50431 | 0.50233 | 0.4947 | 0.49752 | 0.50397 | 0.50489 | 0.52241 | 0.53614 | 0.5423 | 0.54469 | 0.53618 | 0.52985 | 0.53234 | 0.54979 | 0.54747 | 0.55252 | 0.55954 | 0.55377 | 0.55648 | 0.55595 | 0.56283 | 0.57901 | 0.57212 | 0.59849 | 0.60936 | 0.62889 | 0.62883 | 0.63349 | 0.65383 | 0.65844 | 0.64669 | 0.64405 | 0.65365 | 0.65148 | 0.65718 | 0.65413 | 0.65111 | 0.64425 | 0.6385 | 0.67018 | 0.67308 | |
Jazz | 0.49181 | 0.49337 | 0.49271 | 0.48511 | 0.49299 | 0.49826 | 0.50189 | 0.50393 | 0.49339 | 0.47568 | 0.47518 | 0.47731 | 0.48016 | 0.48564 | 0.4834 | 0.48115 | 0.46878 | 0.45677 | 0.44932 | 0.44204 | 0.43462 | 0.41851 | 0.41368 | 0.40234 | 0.40241 | 0.40038 | 0.40992 | 0.39773 | 0.39455 | 0.39479 | 0.39418 | 0.3946 | 0.39451 | 0.40251 | 0.4185 | 0.43982 | 0.44357 | 0.42433 | 0.41862 | 0.40634 | 0.38745 | 0.37937 | 0.37572 | 0.38528 | 0.39577 | 0.39115 | 0.38618 | 0.3431 | 0.35849 | |
Wizards | 0.50429 | 0.50344 | 0.50945 | 0.51173 | 0.51391 | 0.51028 | 0.51332 | 0.51939 | 0.53462 | 0.52848 | 0.53593 | 0.53345 | 0.53256 | 0.52541 | 0.52458 | 0.52394 | 0.52225 | 0.52245 | 0.51856 | 0.51423 | 0.53108 | 0.52806 | 0.53679 | 0.54964 | 0.55575 | 0.55662 | 0.56965 | 0.57759 | 0.5802 | 0.5769 | 0.59431 | 0.59094 | 0.59152 | 0.59812 | 0.60713 | 0.59886 | 0.59921 | 0.59855 | 0.5988 | 0.5855 | 0.59076 | 0.58128 | 0.60136 | 0.59199 | 0.56716 | 0.57329 | 0.59176 | 0.60289 | 0.60185 |
{ | |
"teams": [ | |
{ | |
"place": "Atlanta", | |
"team": "Hawks", | |
"color": "#E13A3E" | |
}, | |
{ | |
"place": "Boston", | |
"team": "Celtics", | |
"color": "#008348" | |
}, | |
{ | |
"place": "Brooklyn", | |
"team": "Nets", | |
"color": "#061922" | |
}, | |
{ | |
"place": "Charlotte", | |
"team": "Hornets", | |
"color": "#1D1160" | |
}, | |
{ | |
"place": "Chicago", | |
"team": "Bulls", | |
"color": "#CE1141" | |
}, | |
{ | |
"place": "Cleveland", | |
"team": "Cavaliers", | |
"color": "#860038" | |
}, | |
{ | |
"place": "Dallas", | |
"team": "Mavericks", | |
"color": "#007DC5" | |
}, | |
{ | |
"place": "Denver", | |
"team": "Nuggets", | |
"color": "#4D90CD" | |
}, | |
{ | |
"place": "Detroit", | |
"team": "Pistons", | |
"color": "#ED174C" | |
}, | |
{ | |
"place": "Golden State", | |
"team": "Warriors", | |
"color": "#FDB927" | |
}, | |
{ | |
"place": "Houston", | |
"team": "Rockets", | |
"color": "#CE1141" | |
}, | |
{ | |
"place": "Indiana", | |
"team": "Pacers", | |
"color": "#FFC633" | |
}, | |
{ | |
"place": "Los Angeles", | |
"team": "Clippers", | |
"color": "#ED174C" | |
}, | |
{ | |
"place": "Los Angeles", | |
"team": "Lakers", | |
"color": "#FDB927" | |
}, | |
{ | |
"place": "Memphis", | |
"team": "Grizzlies", | |
"color": "#0F586C" | |
}, | |
{ | |
"place": "Miami", | |
"team": "Heat", | |
"color": "#98002E" | |
}, | |
{ | |
"place": "Milwaukee", | |
"team": "Bucks", | |
"color": "#00471B" | |
}, | |
{ | |
"place": "Minnesota", | |
"team": "Timberwolves", | |
"color": "#005083" | |
}, | |
{ | |
"place": "New Orleans", | |
"team": "Pelicans", | |
"color": "#002B5C" | |
}, | |
{ | |
"place": "New York", | |
"team": "Knicks", | |
"color": "#006BB6" | |
}, | |
{ | |
"place": "Oklahoma City", | |
"team": "Thunder", | |
"color": "#007DC3" | |
}, | |
{ | |
"place": "Orlando", | |
"team": "Magic", | |
"color": "#007DC5" | |
}, | |
{ | |
"place": "Philadelphia", | |
"team": "76ers", | |
"color": "#ED174C" | |
}, | |
{ | |
"place": "Phoenix", | |
"team": "Suns", | |
"color": "#E56020" | |
}, | |
{ | |
"place": "Portland", | |
"team": "Trail Blazers", | |
"color": "#E03A3E" | |
}, | |
{ | |
"place": "Sacramento", | |
"team": "Kings", | |
"color": "#724C9F" | |
}, | |
{ | |
"place": "San Antonio", | |
"team": "Spurs", | |
"color": "#BAC3C9" | |
}, | |
{ | |
"place": "Toronto", | |
"team": "Raptors", | |
"color": "#CE1141" | |
}, | |
{ | |
"place": "Utah", | |
"team": "Jazz", | |
"color": "#002B5C" | |
}, | |
{ | |
"place": "Washington", | |
"team": "Wizards", | |
"color": "#002B5C" | |
} | |
] | |
} |