<html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> <script src="https://cdn.jsdelivr.net/npm/d3@5.16.0/dist/d3.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script> <script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script> <style> .c3-chart-arcs-background { fill: rgb(238, 237, 237) } </style> </head> <body> <div class="container"> <h1 class="title">Realtime Language Identification On Tweets Containing Netflix</h1> <h2 class="subtitle">Total Tweets : <span id="total"></span></h2> <div class="card"> <div class="card-content"> <div class="content"> <div id="chart" style="width:80%;height:400px"></div> </div> </div> </div> </div> <script> //Change this to your ngrok url or simply enter http://localhost:3000 if running a browser from //your local system. var endpointUrl = "https://your_ngrok_url" let languageNames = new Intl.DisplayNames(['en'], { type: 'language' }); let counter = 0; var chart = c3.generate({ data: { columns: [], type: 'gauge' }, bar: { width: { ratio: 0.1 } } }); let chart_data = {} var socket = io(endpointUrl); socket.on('data', function (data) { var x = JSON.parse(data.line) if (chart_data[x[1]]) { chart_data[x[1]] = chart_data[x[1]] + 1 } else { chart_data[x[1]] = 1 } counter += 1; document.getElementById("total").innerText = counter.toString(); }); setInterval(function () { let updated_data = { "columns": [] } let values = [] for (var key in chart_data) { values.push(chart_data[key]) } let n = 5 let top_n = values.sort(function (a, b) { return b - a }).slice(0, n) let max_val = (top_n.length >= n) ? top_n[n - 1] : 1 for (var a in chart_data) { if (chart_data[a] < max_val || updated_data.columns.length == n) { continue; } updated_data.columns.push([languageNames.of(a), chart_data[a] * 100 / counter]) } chart.load(updated_data); }, 1000) </script> </body> </html>