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