Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
<style>
.video {
display: inline-block;
width: 120px;
padding: 20px;
vertical-align: top;
}
.video div {
padding-top: 10px;
}
</style>
</head>
<body>
<div id='main'></div>
<script>
var exclude = [
'yl8Xg9FdPNc', 'xzV9CPFKo5c', 'udiob8yH7TE',
'0yx499FCZmU', 'eQqotbU_mDs', '4pyVsGqwVAc',
'izXvkDVJUro', 'ZTgBVUPLK6c', 'eZNGOoUg_bk',
'RDTwHAYuE4Q', 'jw6AEvzUqMg', 'RYmm6porKlU',
'mMh0Ao4Hj5c', '-QZX7uaILjA', 'EeRY9Ko22fk',
'm2I9FSABYWA', '2efUcDcCbvk', 'EX1BjLDra_o',
'yEF022BMc6A', 'b3cnQGeKAHQ', '8q5iPoyrDpQ',
'KZYXOSvpYQ0', 'j4UpB6__V', 'P9H4u2Idjp0',
'mAai3w2H9lY', '7RzStwiI63w', 'ZGdM07mKcdA',
'6rX-iUcBJ38', 'I0v5kMrQUss', 'Nni9dIiIoyw',
'VykspFfwnDM', 'gaBK3AKlxkA', '8M57I22OPFQ',
'Lg_PDIWn3Oo', 'iycmKgOMdKs', 'IuM5Ncwb0hs',
'hsHWMpFzf9g', 'l2yt8bO_pEQ', 'KrP8I0DJmOc',
'DB9nHRVDQnI', 'XQtVgmpjmqI', 'SgNh0gJ99iI',
'29QcG1gz1og', 'Q0yS25hUTSc', '07nXzFPHiGU',
'39X26LSyZWo', 'vGKGs-45X3M', 'wwvJtScH1C8',
'aeh_9ad32mI', 'V6IYX_NfWWw', 'DP5ePdeqN4c',
'frI78NQdP5E', 'S8gseQnJ7wI', 'ntYdrLChiyA',
'Hvs59ma1pHM', 'byP7XvzFqRc', 'JOh1FhdstaU',
'8YUjXMw4114', 'oNiTn06nQn8', 'O_u7QaoJVwc',
'2RqPeAjHDm4', 'dou62XtJSRA', 'JP27HV_KbPA',
'OgJbo94Z1pk', 'kSpyqfZcOOg', '2EtalOOS-eM',
'1oEzEK7hL4Y', 'oeujW-xj3Yo', '8OtMq2s0TyM',
'yG2r9gleg48', 'AiKPZegwMjY', 'bxCGIi7ZBRU',
'LgP_U4SzYd4', 'uVEEz1Rhgvs', 'ZC57Szds3cE',
'9L7u_8MscP8', 'Gd_NZ_ZCIxA', 'xAGhCorPniU',
'yV8q6s4FgOo', 'l_AI40koJWo', 'G7Tg7aIpbi8',
'blLaZ26j4r4', 'IcckIzMiGes', 'J1Yhsjn47FA',
'-uta5XOJniY', 'n8-pxBuFvaw', 'QX-xToQI34I',
'RSwRN8zo2bc', 'KgtizhlbIOQ', 'RBHXkKxhey4',
't1WBC-hYO8g', 'd5Loe67H2G8', 'q_wlfQZe6L4',
'eFKhq6Abj4Y', 'W7EPvmfDDlU', 'oTr1H4c4wTs',
'WWTXGjZNMSQ', 'IHfiMoJUDVQ', 'vMaE1qTOWt0',
'vMaE1qTOWt0', '4ckSC-h72hw', 'QtAGE0quN5g',
'V55HX30q6Q4', 'JK1LAzl-yIA', 'FoD28oLJUnY',
'hNc0ldlxbIE', 'UPzYf6PmprQ', '9wbGDM8QtPM',
'hyWaIGHJmbc', 'GG4B2jC_cXk', 'oPpc3V6l_CU',
'Zl0HMuzJ_G0', 'OMf7luKRwIU', '4zVtaGFU4lo',
'Nir6HKoRttw', 'wsUiSinCsyA', 'hy56hmCZ-rQ',
'HURLrEl-GrQ', '_YR-KLSr3Bo', 'QrMnF3VZrdU',
'n-ElDeeAUA8', 'm1_iriasROc', '_w4x2qez138',
'4jP5AAA1XgQ', 'RiQmHf86KHU', 'OqvL6Ils_sk',
'r36wnaSqJtw', 'Ff7vqKp3a-8', 'RAJl2swaAVc',
'xvbslzC8Z94', 'K2RXXuPfQr0', 'T_jCHL0OUf4',
'jgpQe_NlTK4', 'pM21uQR6G_Q', 'Vn30FJEX8XI',
'7w4TMdCLNMM', 'THlwBXqOtUY', 'ecK5sZsAdRw',
'XwzMJOhderk', 'dt8mfmRobMg', 'x86wXp5ARpI',
'QNJzAdRTV3s', 'CAPCz6_8nuE', 'ZWNs-Stz0Vg',
'wp4bjK3G51I', 'hO4mAZ0dyPc', 'mlC_G4etBCs',
'iwA25q-Vvsk', 'y3SRExaoYT0', 'oheTUlXvoJw',
'qvSD5j0LTs0', 'IBrVrTz5IKo', 'rIMrXiW9UaM',
'_3eCjjz1erM', '8MIemZpExIQ', '05tYHL6s0UA',
'o0mmT9VDRok', 'SbKyE3gaEk8', 'VaAPeZXzowE',
'AM9Sz9CoafA', 'MTp2NGIpK1U', 'A2L91QKFyRs',
'O9WqZVE2oUU', 'ktMZtECAi7A', 'LEH3LoOj0Dg',
'9BHRu1CrTME', 'COu_e_5vjUI', 'MJnXB-93pq8',
'kxU9BYwBsm4', 'Tgx8YtmJ4hc', 'bonTR6EQ7x4',
'6uBK8nSR1UI', 'kdwtYcwHiH4', 'DISuxOzx2Ac',
'bxvCt34QCkw', 'uwHbOEHrKn4', 'JM5r-CJpajA',
'i6SqsB3OsBE', '9WVYe0dpvu4', 'WVMSt4JeNak',
'O51ir5XGcaA', 'VKEkuUMrhsI', 'gvpuMJXtIgI',
'iLvI3_a7StQ', 'uWJs0Yo4K3I', '7-JJSBL-jMY',
];
d3.json('videos.json', videos => {
console.log(videos.length, exclude.length);
videos = _.filter(videos, video => video.videoId && !_.includes(exclude, video.videoId));
videos = _.uniqBy(videos, d => d.channelId + ':' + d.videoId);
console.log(JSON.stringify(videos))
var main = d3.select('#main');
var video = main.selectAll('.video')
.data(videos).enter().append('span')
.classed('video', true);
video.append('img')
.attr('src', d => d.thumbnails.default.url)
.on('click', d => {
var url = 'https://www.youtube.com/watch?v=' + d.videoId;
window.open(url, '_new');
});
video.append('div')
.text((d, i) => i + '. ' + d.channelTitle);
video.append('div')
.text(d => d.title);
video.append('div')
.text(d => d.publishedAt.split('T')[0]);
video.append('div')
.text(d => d.videoId);
});
</script>
</body>