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"
}
]
}