DS Oct, Data 1

<!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>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js

https://npmcdn.com/babel-core@5.8.34/browser.min.js