Created
September 17, 2017 09:19
-
-
Save danharr/444cd7f43e66c4ddc3a238d19197867a to your computer and use it in GitHub Desktop.
stream
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //read in gameplay data | |
| var title = "FIFA 17"; | |
| d3.json("gameplay-data.json", function(data) { | |
| //top played games | |
| var games = data.report; | |
| //find rank of chosen game | |
| games.forEach( | |
| function(d,i) { | |
| d.rank = i+1; | |
| } | |
| ) | |
| var rank = games.filter( | |
| function(d){return d.label === title})[0].rank; | |
| games.forEach( | |
| function(d,i) { | |
| d.relative = d.rank-rank; | |
| } | |
| ) | |
| if(rank<5) | |
| { var games_7 = games.filter( | |
| function(d){return d.rank < 8});} | |
| if(rank>4) | |
| { var games_7 = games.filter( | |
| function(d){return d.relative > -4 && d.relative < 4});} | |
| games_7.forEach( | |
| function(d,i) { | |
| if(d.relative===0) { d.class = 'table-info'} else {d.class = ' '} | |
| } | |
| ) | |
| //populate table | |
| var gameplay_rows = d3.select('#broadcast').selectAll('.broadcast_rows').data(games_7).enter().append('tr').attr('class' , 'broadcast_rows'); | |
| gameplay_rows.append('td').html(function(d) {return d.rank}).attr('class',function(d) {return d.class + ' rank '}); | |
| gameplay_rows.append('td').html(function(d) {return d.label}).attr('class',function(d) {return d.class + ' label '}); | |
| gameplay_rows.append('td').html(function(d) {return numberWithCommas(d.total)}).attr('class',function(d) {return d.class + ' total '}); | |
| }); | |
| //now update | |
| function update() { | |
| d3.json("gameplay-data.json", function(data) { | |
| //top played games | |
| var games = data.report; | |
| games.forEach( | |
| function(d,i) { | |
| d.total = Math.round(d.total * ( 1 - Math.random() / 10)); | |
| } | |
| ) | |
| games.sort(function(x, y){ | |
| return d3.descending(x.total, y.total); | |
| }) | |
| //find rank of chosen game | |
| games.forEach( | |
| function(d,i) { | |
| d.rank = i+1; | |
| } | |
| ) | |
| var rank = games.filter( | |
| function(d){return d.label === title})[0].rank; | |
| games.forEach( | |
| function(d,i) { | |
| d.relative = d.rank-rank; | |
| } | |
| ) | |
| if(rank<5) | |
| { var games_7_new = games.filter( | |
| function(d){return d.rank < 8});} | |
| if(rank>4) | |
| { var games_7_new = games.filter( | |
| function(d){return d.relative > -4 && d.relative < 4});} | |
| games_7_new.forEach( | |
| function(d,i) { | |
| if(d.relative===0) { d.class = 'table-info'} else {d.class = ' '} | |
| } | |
| ) | |
| //populate table | |
| d3.selectAll('.broadcast_rows').remove(); | |
| var gameplay_rows = d3.select('#broadcast').selectAll('.broadcast_rows').data(games_7_new).enter().append('tr').attr('class' , 'broadcast_rows'); | |
| gameplay_rows.append('td').html(function(d) {return d.rank}).attr('class',function(d) {return d.class + ' rank '}); | |
| gameplay_rows.append('td').html(function(d) {return d.label}).attr('class',function(d) {return d.class + ' label '}); | |
| gameplay_rows.append('td').html(function(d) {return numberWithCommas(d.total)}).attr('class',function(d) {return d.class + ' total '}); | |
| function nth(d) { | |
| if(d>3 && d<21) return 'th'; | |
| switch (d % 10) { | |
| case 1: return "st"; | |
| case 2: return "nd"; | |
| case 3: return "rd"; | |
| default: return "th"; | |
| } | |
| } | |
| d3.select('#broadcast_rank').html(rank + nth(rank)+' most broadcasted game today'); | |
| }); | |
| }; | |
| setInterval(update, 2000); | |
| function numberWithCommas(x) { | |
| return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //read in gameplay data | |
| var title = "FIFA 17"; | |
| d3.json("gameplay-data.json", function(data) { | |
| //top played games | |
| var games = data.report; | |
| //find rank of chosen game | |
| games.forEach( | |
| function(d,i) { | |
| d.rank = i+1; | |
| } | |
| ) | |
| var rank = games.filter( | |
| function(d){return d.label === title})[0].rank; | |
| games.forEach( | |
| function(d,i) { | |
| d.relative = d.rank-rank; | |
| } | |
| ) | |
| if(rank<5) | |
| { var games_7 = games.filter( | |
| function(d){return d.rank < 8});} | |
| if(rank>4) | |
| { var games_7 = games.filter( | |
| function(d){return d.relative > -4 && d.relative < 4});} | |
| games_7.forEach( | |
| function(d,i) { | |
| if(d.relative===0) { d.class = 'table-info'} else {d.class = ' '} | |
| } | |
| ) | |
| //populate table | |
| var gameplay_rows = d3.select('#commerce').selectAll('.commerce_rows').data(games_7).enter().append('tr').attr('class' , 'commerce_rows'); | |
| gameplay_rows.append('td').html(function(d) {return d.rank}).attr('class',function(d) {return d.class + ' rank '}); | |
| gameplay_rows.append('td').html(function(d) {return d.label}).attr('class',function(d) {return d.class + ' label '}); | |
| gameplay_rows.append('td').html(function(d) {return numberWithCommas(d.total)}).attr('class',function(d) {return d.class + ' total '}); | |
| }); | |
| //now update | |
| function update() { | |
| d3.json("gameplay-data.json", function(data) { | |
| //top played games | |
| var games = data.report; | |
| games.forEach( | |
| function(d,i) { | |
| d.total = Math.round(d.total * ( 1 - Math.random() / 10)); | |
| } | |
| ) | |
| games.sort(function(x, y){ | |
| return d3.descending(x.total, y.total); | |
| }) | |
| //find rank of chosen game | |
| games.forEach( | |
| function(d,i) { | |
| d.rank = i+1; | |
| } | |
| ) | |
| var rank = games.filter( | |
| function(d){return d.label === title})[0].rank; | |
| games.forEach( | |
| function(d,i) { | |
| d.relative = d.rank-rank; | |
| } | |
| ) | |
| if(rank<5) | |
| { var games_7_new = games.filter( | |
| function(d){return d.rank < 8});} | |
| if(rank>4) | |
| { var games_7_new = games.filter( | |
| function(d){return d.relative > -4 && d.relative < 4});} | |
| games_7_new.forEach( | |
| function(d,i) { | |
| if(d.relative===0) { d.class = 'table-info'} else {d.class = ' '} | |
| } | |
| ) | |
| //populate table | |
| d3.selectAll('.commerce_rows').remove(); | |
| var gameplay_rows = d3.select('#commerce').selectAll('.commerce_rows').data(games_7_new).enter().append('tr').attr('class' , 'commerce_rows'); | |
| gameplay_rows.append('td').html(function(d) {return d.rank}).attr('class',function(d) {return d.class + ' rank '}); | |
| gameplay_rows.append('td').html(function(d) {return d.label}).attr('class',function(d) {return d.class + ' label '}); | |
| gameplay_rows.append('td').html(function(d) {return numberWithCommas(d.total)}).attr('class',function(d) {return d.class + ' total '}); | |
| function nth(d) { | |
| if(d>3 && d<21) return 'th'; | |
| switch (d % 10) { | |
| case 1: return "st"; | |
| case 2: return "nd"; | |
| case 3: return "rd"; | |
| default: return "th"; | |
| } | |
| } | |
| d3.select('#commerce_rank').html(rank + nth(rank)+' most purchased game today'); | |
| }); | |
| }; | |
| setInterval(update, 2000); | |
| function numberWithCommas(x) { | |
| return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //read in gameplay data | |
| var title = "FIFA 17"; | |
| d3.json("gameplay-data.json", function(data) { | |
| //top played games | |
| var games = data.report; | |
| //find rank of chosen game | |
| games.forEach( | |
| function(d,i) { | |
| d.rank = i+1; | |
| } | |
| ) | |
| var rank = games.filter( | |
| function(d){return d.label === title})[0].rank; | |
| games.forEach( | |
| function(d,i) { | |
| d.relative = d.rank-rank; | |
| } | |
| ) | |
| if(rank<5) | |
| { var games_7 = games.filter( | |
| function(d){return d.rank < 8});} | |
| if(rank>4) | |
| { var games_7 = games.filter( | |
| function(d){return d.relative > -4 && d.relative < 4});} | |
| games_7.forEach( | |
| function(d,i) { | |
| if(d.relative===0) { d.class = 'table-info'} else {d.class = ' '} | |
| } | |
| ) | |
| //populate table | |
| var gameplay_rows = d3.select('#community').selectAll('.community_rows').data(games_7).enter().append('tr').attr('class' , 'community_rows'); | |
| gameplay_rows.append('td').html(function(d) {return d.rank}).attr('class',function(d) {return d.class + ' rank '}); | |
| gameplay_rows.append('td').html(function(d) {return d.label}).attr('class',function(d) {return d.class + ' label '}); | |
| gameplay_rows.append('td').html(function(d) {return numberWithCommas(d.total)}).attr('class',function(d) {return d.class + ' total '}); | |
| d3.select('#community_rank').html(rank + nth(rank)+' highest for community creations today'); | |
| }); | |
| //now update | |
| function update() { | |
| d3.json("gameplay-data.json", function(data) { | |
| //top played games | |
| var games = data.report; | |
| games.forEach( | |
| function(d,i) { | |
| d.total = Math.round(d.total * ( 1 - Math.random() / 10)); | |
| } | |
| ) | |
| games.sort(function(x, y){ | |
| return d3.descending(x.total, y.total); | |
| }) | |
| //find rank of chosen game | |
| games.forEach( | |
| function(d,i) { | |
| d.rank = i+1; | |
| } | |
| ) | |
| var rank = games.filter( | |
| function(d){return d.label === title})[0].rank; | |
| games.forEach( | |
| function(d,i) { | |
| d.relative = d.rank-rank; | |
| } | |
| ) | |
| if(rank<5) | |
| { var games_7_new = games.filter( | |
| function(d){return d.rank < 8});} | |
| if(rank>4) | |
| { var games_7_new = games.filter( | |
| function(d){return d.relative > -4 && d.relative < 4});} | |
| games_7_new.forEach( | |
| function(d,i) { | |
| if(d.relative===0) { d.class = 'table-info'} else {d.class = ' '} | |
| } | |
| ) | |
| //populate table | |
| d3.selectAll('.community_rows').remove(); | |
| var gameplay_rows = d3.select('#community').selectAll('.community_rows').data(games_7_new).enter().append('tr').attr('class' , 'community_rows'); | |
| gameplay_rows.append('td').html(function(d) {return d.rank}).attr('class',function(d) {return d.class + ' rank '}); | |
| gameplay_rows.append('td').html(function(d) {return d.label}).attr('class',function(d) {return d.class + ' label '}); | |
| gameplay_rows.append('td').html(function(d) {return numberWithCommas(d.total)}).attr('class',function(d) {return d.class + ' total '}); | |
| d3.select('#community_rank').html(rank + nth(rank)+' highest for community creations today'); | |
| }); | |
| }; | |
| setInterval(update, 2000); | |
| function nth(d) { | |
| if(d>3 && d<21) return 'th'; | |
| switch (d % 10) { | |
| case 1: return "st"; | |
| case 2: return "nd"; | |
| case 3: return "rd"; | |
| default: return "th"; | |
| } | |
| } | |
| function numberWithCommas(x) { | |
| return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "report":[ | |
| { | |
| "label":"Mario Kart", | |
| "total":6500 | |
| }, | |
| { | |
| "label":"FIFA 17", | |
| "total":6400 | |
| }, | |
| { | |
| "label":"Halo", | |
| "total":6355 | |
| }, | |
| { | |
| "label":"Worms WMD", | |
| "total":6255 | |
| }, | |
| { | |
| "label":"Star Wars: Battlefront", | |
| "total":6000 | |
| }, | |
| { | |
| "label":"Uncharted", | |
| "total":3558 | |
| }, | |
| { | |
| "label":"GTA V", | |
| "total":3162 | |
| }, | |
| { | |
| "label":"Mario World", | |
| "total":2935 | |
| }, | |
| { | |
| "label":"Zelda", | |
| "total":2405 | |
| }, | |
| { | |
| "label":"Punch Out", | |
| "total":2367 | |
| }, | |
| { | |
| "label":"Final Fantasy", | |
| "total":2344 | |
| }, | |
| { | |
| "label":"NBA 2k18", | |
| "total":2234 | |
| }, | |
| { | |
| "label":"WWE 2k16", | |
| "total":2231 | |
| }, | |
| { | |
| "label":"PES 2016", | |
| "total":1903 | |
| }, | |
| { | |
| "label":"Just Cause 3", | |
| "total":1862 | |
| } | |
| ], | |
| "comeback":15000, | |
| "request_time_gmt":1505569598.1989, | |
| "refreshing":true, | |
| "last_update_gmt":false, | |
| "settings":{ | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //read in gameplay data | |
| var title = "FIFA 17"; | |
| d3.json("gameplay-data.json", function(data) { | |
| var utcSeconds = data.request_time_gmt; | |
| var update_time = new Date(0); // The 0 there is the key, which sets the date to the epoch | |
| update_time.setUTCSeconds(utcSeconds); | |
| d3.select("#current-date").html('All data is dummy data '+update_time) | |
| //top played games | |
| var games = data.report; | |
| //find rank of chosen game | |
| games.forEach( | |
| function(d,i) { | |
| d.rank = i+1; | |
| } | |
| ) | |
| var rank = games.filter( | |
| function(d){return d.label === title})[0].rank; | |
| games.forEach( | |
| function(d,i) { | |
| d.relative = d.rank-rank; | |
| } | |
| ) | |
| if(rank<5) | |
| { var games_7 = games.filter( | |
| function(d){return d.rank < 8});} | |
| if(rank>4) | |
| { var games_7 = games.filter( | |
| function(d){return d.relative > -4 && d.relative < 4});} | |
| games_7.forEach( | |
| function(d,i) { | |
| if(d.relative===0) { d.class = 'table-info'} else {d.class = ' '} | |
| } | |
| ) | |
| //populate table | |
| var gameplay_rows = d3.select('#gameplay').selectAll('.gameplay_rows').data(games_7).enter().append('tr').attr('class' , 'gameplay_rows'); | |
| gameplay_rows.append('td').html(function(d) {return d.rank}).attr('class',function(d) {return d.class + ' rank '}); | |
| gameplay_rows.append('td').html(function(d) {return d.label}).attr('class',function(d) {return d.class + ' label '}); | |
| gameplay_rows.append('td').html(function(d) {return numberWithCommas(d.total)}).attr('class',function(d) {return d.class + ' total '}); | |
| }); | |
| //now update | |
| function update() { | |
| d3.json("gameplay-data.json", function(data) { | |
| var utcSeconds = data.request_time_gmt; | |
| var update_time = new Date(0); // The 0 there is the key, which sets the date to the epoch | |
| update_time.setUTCSeconds(utcSeconds); | |
| d3.select("#current-date").html('All data is dummy data '+update_time); | |
| //top played games | |
| var games = data.report; | |
| games.forEach( | |
| function(d,i) { | |
| d.total = Math.round(d.total * ( 1 - Math.random() / 10)); | |
| } | |
| ) | |
| games.sort(function(x, y){ | |
| return d3.descending(x.total, y.total); | |
| }) | |
| //find rank of chosen game | |
| games.forEach( | |
| function(d,i) { | |
| d.rank = i+1; | |
| } | |
| ) | |
| var rank = games.filter( | |
| function(d){return d.label === title})[0].rank; | |
| games.forEach( | |
| function(d,i) { | |
| d.relative = d.rank-rank; | |
| } | |
| ) | |
| if(rank<5) | |
| { var games_7_new = games.filter( | |
| function(d){return d.rank < 8});} | |
| if(rank>4) | |
| { var games_7_new = games.filter( | |
| function(d){return d.relative > -4 && d.relative < 4});} | |
| games_7_new.forEach( | |
| function(d,i) { | |
| if(d.relative===0) { d.class = 'table-info'} else {d.class = ' '} | |
| } | |
| ) | |
| //populate table | |
| d3.selectAll('.gameplay_rows').remove(); | |
| var gameplay_rows = d3.select('#gameplay').selectAll('.gameplay_rows').data(games_7_new).enter().append('tr').attr('class' , 'gameplay_rows'); | |
| gameplay_rows.append('td').html(function(d) {return d.rank}).attr('class',function(d) {return d.class + ' rank '}); | |
| gameplay_rows.append('td').html(function(d) {return d.label}).attr('class',function(d) {return d.class + ' label '}); | |
| gameplay_rows.append('td').html(function(d) {return numberWithCommas(d.total)}).attr('class',function(d) {return d.class + ' total '}); | |
| function nth(d) { | |
| if(d>3 && d<21) return 'th'; | |
| switch (d % 10) { | |
| case 1: return "st"; | |
| case 2: return "nd"; | |
| case 3: return "rd"; | |
| default: return "th"; | |
| } | |
| } | |
| d3.select('#gameplay_rank').html(rank + nth(rank)+' most played game today'); | |
| }); | |
| }; | |
| setInterval(update, 2000); | |
| function numberWithCommas(x) { | |
| return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"> | |
| <link rel="stylesheet" href="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" type="text/css"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="gameplay.js"></script> | |
| <script src="commerce.js"></script> | |
| <script src="spectate.js"></script> | |
| <script src="broadcast.js"></script> | |
| <script src="community.js"></script> | |
| <script src="pie.js"></script> | |
| <script src="stream.js"></script> | |
| <style> | |
| .table th, | |
| .table td { | |
| font-size: 12px; | |
| padding: 0px; | |
| } | |
| .lead { | |
| font-size: 1.00rem; | |
| } | |
| svg{ | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .arc text { | |
| font: 10px sans-serif; | |
| text-anchor: middle; | |
| } | |
| .arc path { | |
| stroke: #fff; | |
| } | |
| /*HTML Horizonal Legend*/ | |
| .country-name { | |
| margin: 0 !important; | |
| } | |
| .key-dot { | |
| display: inline-block; | |
| height: 10px; | |
| margin-right: .5em; | |
| width: 10px; | |
| } | |
| #legend2{ | |
| overflow:hidden; | |
| } | |
| .legend2 { | |
| float:left; | |
| margin-right: 1em; | |
| } | |
| .key-dot { | |
| display: inline-block; | |
| height: 10px; | |
| margin-right: .5em; | |
| width: 10px; | |
| } | |
| .legend { | |
| margin-right:20px; | |
| } | |
| .queens { background: #98abc5;} | |
| .kings { background: #8a89a6;} | |
| .bronx { background: #7b6888; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #e9e9ea; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| font-family: sans-serif; | |
| font-size: 11px; | |
| fill:#e9e9ea; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="top"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <h1 class="">FIFA 17</h1> | |
| </div> | |
| <div class="col-md-6 align-self-center text-right"> | |
| <p class="lead " id="current-date">Current Date</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="py-5"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <p class="lead" id="gameplay_rank">Today's gameplay</p> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Game</th> | |
| <th>Value</th> | |
| </tr> | |
| </thead> | |
| <tbody id="gameplay"> </tbody> | |
| </table> | |
| </div> | |
| <div class="col-md-4"> | |
| <div id="device"> | |
| <p class="lead" id="pie-text">Sales by Edition</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <p class="lead" id="commerce_rank">5th most purchased game today</p> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Game</th> | |
| <th>Value</th> | |
| </tr> | |
| </thead> | |
| <tbody id="commerce"> </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="py-5"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12" id="stream"> | |
| <p class="lead">Sales by storefront (Last 60 minutes)</p> | |
| <div class="legend2"> <p class="country-name"><span class="key-dot queens"></span>Web</p> </div> | |
| <div class="legend2"> <p class="country-name"><span class="key-dot kings"></span>PS4</p> </div> | |
| <div class="legend2"> <p class="country-name"><span class="key-dot bronx"></span>Mobile</p> </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="py-5"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <p class="lead" id="spectate_rank">8th most spectated game today</p> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Game</th> | |
| <th>Value</th> | |
| </tr> | |
| </thead> | |
| <tbody id="spectate"> </tbody> | |
| </table> | |
| </div> | |
| <div class="col-md-4"> | |
| <p class="lead" id="broadcast_rank">21st most broadcasted game today</p> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Game</th> | |
| <th>Value</th> | |
| </tr> | |
| </thead> | |
| <tbody id="broadcast"> </tbody> | |
| </table> | |
| </div> | |
| <div class="col-md-4"> | |
| <p class="lead" id="community_rank">#,### associated communities created today</p> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Game</th> | |
| <th>Value</th> | |
| </tr> | |
| </thead> | |
| <tbody id="community"> </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function pie() { | |
| d3.select('#svg-pie').remove(); | |
| var svg = d3.select('#device').append('svg').attr('id','svg-pie'); | |
| console.log(d3.select('#svg-pie').node().getBoundingClientRect().width) | |
| var | |
| width = d3.select('#svg-pie').node().getBoundingClientRect().width, | |
| height = d3.select('#svg-pie').node().getBoundingClientRect().height, | |
| radius = Math.min(width, height) / 2, | |
| g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| var color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); | |
| var pie = d3.pie() | |
| .sort(null) | |
| .value(function(d) { return d.value; }); | |
| var path = d3.arc() | |
| .outerRadius(radius - 10) | |
| .innerRadius(30); | |
| var label = d3.arc() | |
| .outerRadius(radius - 40) | |
| .innerRadius(radius - 40); | |
| var data = [{category:'standard',value:Math.round(500 * ( Math.random() ))},{category:'deluxe',value:Math.round(100 * ( Math.random()))}]; | |
| var arc = g.selectAll(".arc") | |
| .data(pie(data)) | |
| .enter().append("g") | |
| .attr("class", "arc"); | |
| arc.append("path") | |
| .attr("d", path) | |
| .attr("fill", function(d,i) { return color(i); }); | |
| arc.append("text") | |
| .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) | |
| .attr("dy", "0.35em") | |
| .text(function(d) { console.log(d) ; return d.data.category; }); | |
| } | |
| setInterval(pie,2000) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //read in gameplay data | |
| var title = "FIFA 17"; | |
| d3.json("gameplay-data.json", function(data) { | |
| //top played games | |
| var games = data.report; | |
| //find rank of chosen game | |
| games.forEach( | |
| function(d,i) { | |
| d.rank = i+1; | |
| } | |
| ) | |
| var rank = games.filter( | |
| function(d){return d.label === title})[0].rank; | |
| games.forEach( | |
| function(d,i) { | |
| d.relative = d.rank-rank; | |
| } | |
| ) | |
| if(rank<5) | |
| { var games_7 = games.filter( | |
| function(d){return d.rank < 8});} | |
| if(rank>4) | |
| { var games_7 = games.filter( | |
| function(d){return d.relative > -4 && d.relative < 4});} | |
| games_7.forEach( | |
| function(d,i) { | |
| if(d.relative===0) { d.class = 'table-info'} else {d.class = ' '} | |
| } | |
| ) | |
| //populate table | |
| var gameplay_rows = d3.select('#spectate').selectAll('.spectate_rows').data(games_7).enter().append('tr').attr('class' , 'spectate_rows'); | |
| gameplay_rows.append('td').html(function(d) {return d.rank}).attr('class',function(d) {return d.class + ' rank '}); | |
| gameplay_rows.append('td').html(function(d) {return d.label}).attr('class',function(d) {return d.class + ' label '}); | |
| gameplay_rows.append('td').html(function(d) {return numberWithCommas(d.total)}).attr('class',function(d) {return d.class + ' total '}); | |
| }); | |
| //now update | |
| function update() { | |
| d3.json("gameplay-data.json", function(data) { | |
| //top played games | |
| var games = data.report; | |
| games.forEach( | |
| function(d,i) { | |
| d.total = Math.round(d.total * ( 1 - Math.random() / 10)); | |
| } | |
| ) | |
| games.sort(function(x, y){ | |
| return d3.descending(x.total, y.total); | |
| }) | |
| //find rank of chosen game | |
| games.forEach( | |
| function(d,i) { | |
| d.rank = i+1; | |
| } | |
| ) | |
| var rank = games.filter( | |
| function(d){return d.label === title})[0].rank; | |
| games.forEach( | |
| function(d,i) { | |
| d.relative = d.rank-rank; | |
| } | |
| ) | |
| if(rank<5) | |
| { var games_7_new = games.filter( | |
| function(d){return d.rank < 8});} | |
| if(rank>4) | |
| { var games_7_new = games.filter( | |
| function(d){return d.relative > -4 && d.relative < 4});} | |
| games_7_new.forEach( | |
| function(d,i) { | |
| if(d.relative===0) { d.class = 'table-info'} else {d.class = ' '} | |
| } | |
| ) | |
| //populate table | |
| d3.selectAll('.spectate_rows').remove(); | |
| var gameplay_rows = d3.select('#spectate').selectAll('.spectate_rows').data(games_7_new).enter().append('tr').attr('class' , 'spectate_rows'); | |
| gameplay_rows.append('td').html(function(d) {return d.rank}).attr('class',function(d) {return d.class + ' rank '}); | |
| gameplay_rows.append('td').html(function(d) {return d.label}).attr('class',function(d) {return d.class + ' label '}); | |
| gameplay_rows.append('td').html(function(d) {return numberWithCommas(d.total)}).attr('class',function(d) {return d.class + ' total '}); | |
| function nth(d) { | |
| if(d>3 && d<21) return 'th'; | |
| switch (d % 10) { | |
| case 1: return "st"; | |
| case 2: return "nd"; | |
| case 3: return "rd"; | |
| default: return "th"; | |
| } | |
| } | |
| d3.select('#spectate_rank').html(rank + nth(rank)+' most spectated game today'); | |
| }); | |
| }; | |
| setInterval(update, 2000); | |
| function numberWithCommas(x) { | |
| return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); | |
| function stream() { | |
| var data = [ | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(800 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(400 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))], | |
| [Math.round(500 * ( Math.random() )),Math.round(200 * ( Math.random() ))] | |
| ] | |
| d3.select('#svg-stream').remove(); | |
| var svg = d3.select('#stream').append('svg').attr('id','svg-stream'); | |
| var | |
| width = d3.select('#svg-stream').node().getBoundingClientRect().width, | |
| height = d3.select('#svg-stream').node().getBoundingClientRect().height; | |
| var n = 4, // number of layers | |
| m = 60, // number of samples per layer | |
| k = 10; // number of bumps per layer | |
| var stack = d3.stack().keys(d3.range(n)).offset(d3.stackOffsetWiggle), | |
| layers0 = stack(d3.transpose(d3.range(n).map(function() { return bumps(m, k); }))), | |
| layers1 = stack(d3.transpose(d3.range(n).map(function() { return bumps(m, k); }))), | |
| layers = layers0.concat(layers1); | |
| var x = d3.scaleLinear() | |
| .domain([0, m - 1]) | |
| .range([0, width]); | |
| var x2 = d3.scaleLinear() | |
| .domain([0, m - 1]) | |
| .range([ width-10,0]); | |
| var y = d3.scaleLinear() | |
| .domain([d3.min(layers, stackMin), d3.max(layers, stackMax)]) | |
| .range([height, 0]); | |
| var z = d3.interpolateCool; | |
| var area = d3.area() | |
| .curve(d3.curveMonotoneX) | |
| .x(function(d, i) { return x(i); }) | |
| .y0(function(d) { return y(d[0]); }) | |
| .y1(function(d) { return y(d[1]); }); | |
| console.log('layers0'); | |
| console.log(d3.transpose(d3.range(n).map(function() { return bumps(m, k); }))); | |
| svg.selectAll("path") | |
| .data(layers0) | |
| .enter().append("path") | |
| .attr("d", area) | |
| .attr("fill", function(d,i) { return color(i); }); | |
| function stackMax(layer) { | |
| return d3.max(layer, function(d) { return d[1]; }); | |
| } | |
| function stackMin(layer) { | |
| return d3.min(layer, function(d) { return d[0]; }); | |
| } | |
| // Inspired by Lee Byron’s test data generator. | |
| function bumps(n, m) { | |
| var a = [], i; | |
| for (i = 0; i < n; ++i) a[i] = 0; | |
| for (i = 0; i < m; ++i) bump(a, n); | |
| return a; | |
| } | |
| function bump(a, n) { | |
| var x = 1 / (0.1 + Math.random()), | |
| y = 2 * Math.random() - 0.5, | |
| z = 10 / (0.1 + Math.random()); | |
| for (var i = 0; i < n; i++) { | |
| var w = (i / n - y) * z; | |
| a[i] += x * Math.exp(-w * w); | |
| } | |
| } | |
| // Add the x Axis | |
| svg.append("g").attr('class',"xaxis axis") | |
| //.attr("transform", "translate(0," + (height-20) + ")") | |
| .call(d3.axisBottom(x2)); | |
| } | |
| setInterval(stream,4000); | |
| setTimeout(stream,1000); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment