Daily Show Guest Stats

Developer
Andrew Bales
Size
3,335 Kb
Views
26,312
  1. Daily Show Guest Stats Previews
  2. Daily Show Guest Stats HTML Codes
  3. Daily Show Guest Stats CSS Codes
  4. Daily Show Guest Stats JS Codes

How do I make an daily show guest stats?

Visualizing data from FiveThirtyEight! Guest appearances and demographics on The Daily Show with Jon Stewart.. What is a daily show guest stats? How do you make a daily show guest stats? This script and codes were developed by Andrew Bales on 26 October 2022, Wednesday.

Daily Show Guest Stats Previews
IQ Test

Daily Show Guest Stats - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Daily Show Guest Stats</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="navbar navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <h3>Daily Show Guest Stats | <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/387928/538 logo.png" height="30px"><span class="logo">FiveThirtyEight</span></h3> </div> </div>
</nav>
<div class="content"> <h1 class="title">20 Most Frequent Guests</h1> <ul id="top-ten"></ul> <canvas id="group-chart" height="150px"></canvas> <canvas id="occupation-chart" height="150px"></canvas>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.3/papaparse.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Daily Show Guest Stats - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body { font-family: 'Open Sans', sans-serif;
}
nav { color: #181818; width: 100vw;
}
.content { width: 50%; margin: 75px auto;
}
.logo { color: #FC6E48;
}
#group-chart { height: 150px;
}
.title { margin: 45px;
}
#top-ten { margin-bottom: 50px; max-width: 700px;
}
#top-ten h1 { color: #181818; text-align: center;
}
#top-ten p { color: #181818; line-height: 2; font-size: 1.2rem;
}
.num { border-radius: 15px; padding: 10px; margin-right: 10px; background-color: #19B5FE; color: #f5f5f5;
}
@media (max-width: 1550px) { .content { width: 100%; margin: 75px auto; } .navbar { background-color: #fff; } .navbar h3 { width: 100vw; text-align: center; }
}

Daily Show Guest Stats - Script Codes JS Codes

$.ajax({ type: "GET", url: "https://raw.githubusercontent.com/fivethirtyeight/data/master/daily-show-guests/daily_show_guests.csv", dataType: "text", success: function(data) { processData(data); }
});
function processData(data){ // PapaParse creates an object with the data returned in 'data': var d = Papa.parse(data, { quotes: false, delimiter: ",", header: true,}); d = d.data; console.log(d); // tally for no. of appearances, create top 10 list var guestTally = tally(d, 'Raw_Guest_List'); handleGuests(guestTally); // tally for 'group', create chart var groupTally = tally(d, 'Group'); handleGroups(groupTally);
}
function tally(data, key) { // This only tallies one specified key. It could be modified to loop through each key and provide a tally for each. var totals = {}; for(var i = 0; i <= data.length; i++) { if(data[i]) { // For instance, if the entry has a 'group' of 'acting' // and that value doesn't yet exist // it will follow this logic: // value = 'acting' // totals { action: 0 } // totals { acting: 1 } var value = data[i][key] || 'unknown'; totals[value] = totals[value] || 0; totals[value]++; } } return totals;
}
function handleGroups(obj, chartId) { // format data for chart js var tally = [] var labels = [] for ( var groups in obj ) { tally.push(obj[groups]); labels.push(groups); } // make chart var ctx = document.getElementById('group-chart').getContext('2d'); var chart = new Chart(ctx, { type: 'doughnut', data: { datasets: [{ backgroundColor: '#FC6E48', data: tally }], labels: labels } });
}
function handleGuests(data) { // sort top guests var sortable = []; for (var guest in data) { sortable.push([guest, data[guest]]); } var sortedGuests = sortable.sort(function(a, b) { return a[1] - b[1]; }); // create top 10 var topTenGuests = sortedGuests.splice(sortedGuests.length - 20, sortedGuests.length - 1).reverse(); // append top 10 list var li = ''; for(var i = 0; i < topTenGuests.length; i++) { li += '<li class="list-group-item">' + '<span class="badge">' + topTenGuests[i][1] + '</span>' + topTenGuests[i][0] '</li>'; } $("#top-ten").html(li);
}
Daily Show Guest Stats - Script Codes
Daily Show Guest Stats - Script Codes
Home Page Home
Developer Andrew Bales
Username agbales
Uploaded October 26, 2022
Rating 3.5
Size 3,335 Kb
Views 26,312
Do you need developer help for Daily Show Guest Stats?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andrew Bales (agbales) Script Codes
Name
Simon
Video Portfolio
David Bowie Quotes
Making A Murderer - Steven Avery
Open Weather Map API
Floating Camel
Jigsaw
Kerouac
Slanted Div, Fixed Header
Donald Trump - The New Yorker
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!