Our visualization tackles the problem of understanding the factors that contribute to making a YouTube video trend online.
Our visualization allows the user to obtain customized information based on the following filters: YouTube categories, countries in the dataset, trending date and whether to analyze the data based on number of views, number of likes, number of dislikes, and number of comments.
The world map view allows the user to quickly compare the selected information geographically between the countries.
The table view allows the user to clearly see the top 10 videos given the selected filters.
The bubbles allow the user to see the distribution of trending videos between the different categories.
Lastly, we have a heatmap to visualize trends in the number of views trending videos get based on what day and time they are posted.
This visualization is intended to help content creators better understand what currently drives videos to become trending, and provide them with insights into how they can optimize their own content.
- View Here. Best on Chrome (may take a couple of seconds to load) - Scrolling & icon placements may not work properly on Safari / Firefox
- Github-Pages hosted here: jonathanhirsch.ca/YoutubeTrendingVisualization
Our project will run using the small dataset by default. To use the full dataset, unzip 'fullsizedata.json.zip' to ' fullsizedata.json', comment out line 5 in main.js, and uncomment line 6 in main.js
- main:
src/js/main.js - index:
src/index.html
- Map:
src/js/mapView.js - Category Bubbles:
src/js/categoryBubbles.js - Most Popular Videos Table:
src/js/top10Table.js - Timeline:
src/js/timeline.js - Heatmap:
src/js/heatmap.js
- css:
src/css/style.css - d3:
src/js/d3.v6.min.js - d3-annotations:
src/d3-annotations.min.js - topojson:
src/js/topojson.v3.js
- Category names & numbers:
src/data/categories.json - Small Dataset:
src/data/smalldata.json - Fullsize Data (zip):
src/data/fullsizedata.zip - Country lat/lon/population:
src/data/country-info.csv - Country size/loc:
src/data/world-110m.json
Country centroid information for placing country bubbles on the centre of each country was obtained from: https://developers.google.com/public-data/docs/canonical/countries_csv
Country population numbers were obtained from: https://www.worldometers.info/world-population/population-by-country/
The map view was built upon the tutorial code from Tutorial 6. The code was modified to display country bubbles at the centroid of each country in our dataset. The same world map and projection were chosen as the example since it is a recognizable world map that users are familiar with. The bubbles were changed to be size encoded by a variable that is selected by the user (views, comments, likes and dislikes). UI changes include the ability to select and deselect bubbles and to select the background image to reset the bubbles.
Modified to suit our needs
http://www.d3noob.org/2013/02/add-html-table-to-your-d3js-graph.html The initial implementation was taken from the above link. The code was adapted to support transitions, updates, and tooltips. Design changes were made, including positioning of the text, styling of the rows, and fixed row sizes.
https://observablehq.com/@d3/focus-context?collection=@d3/d3-brush The brushing was taken from the context featured in the above link. The code was almost entirely stripped, removing the dependence on the fixed data, removing the chart and the axis on the context. The brushing, scales, and area drawing of the context were kept, the scale was adapted to fit our data, and the code was modified to support transitions, different types of datasets, and data updates. Additionally, the listener for the brush was modified, as our dataset was too large and could not be updated while the brush was being moved. While most of the code was removed, the brushing logic proved to be invaluable for our project, and worked flawlessly.
The annotation was borrowed from the tutorials and adapted to fit inside the timeline
https://bl.ocks.org/officeofjane/a70f4b44013d06b9c0a973f163d8ab7a The simulation was taken from the above link. Minor modifications were made to better fit our code, but the bulk of the logic remained the same. Additional changes were introduced to support updating the data contained in the nodes and re-rendering their sizes when the underlying data changed without restarting the simulation, which proved to be challenging.
The logic for dragging the bubbles was borrowed from the above SOF post. The major changes included support for other mouse events, and moving the labels with the bubbles. This proved to be challenging as well, because the dragging events typically consumed other mouse events, such as click and mousedown. Dragging events also prevented mouseup from firing, so the events needed in mouseup were integrated into draggended.
The tutorials were also extensively used for animations and other UI tweaks, and GeeksForGeeks & MDN were used to aid in CSS layouts and styling.
https://github.com/UBC-InfoVis/436V-materials/tree/22Jan/case-studies/case-study_measles-and-vaccines The code for our heatmaps legend was almost entirely copied from the courses’ (CPSC 436V) case study, The Impact of Vaccines on the Measles. Additional changes were made so to fit our colour scheme and so that the labels would show the proper units depending on the filtered dataset.
Annie Maurer, Julian Platel, Jonathan Hirsch