DEMO: https://micheledallatorre.github.io/p101s2/
This project is a D3.js interactive ranking chart based on Produce 101 Season 2 Rankings.
I extended the original project by loading data dynamically from a shared (and published to the web) Google Sheet file (see details below and in commit https://github.com/micheledallatorre/p101s2/commit/971314ce06698de25cd805ddb5da1199477f7c17).
An interactive ranking chart for MNet's Produce 101 Season 2 made with d3.js. I began this project around Episode 4 in order to better keep track of the numerous contestants and also in hopes of being able to better predict the final 11 winners. I updated this website after each episode as the season progressed. This site now displays the full rankings and final results for each contestant.
I used tabletop (https://github.com/jsoma/tabletop).
Tutorial: http://blog.vida.io/2015/11/02/using-google-spreadsheet-data-in-d3-dot-js-visualizations/
- Create a Google Sheet file and publish the spreadsheet to the web.
- Copy published spreadsheet URL and paste it into the code (
var public_spreadsheet_url
). - Load
tabletop.js
library - Move d3 visualization code into a function, e.g.
draw
- Use tabletop to get data and render the visualization.
You can play with the data by editing the linked Google Sheets https://docs.google.com/spreadsheets/d/1L85YpH5MTVN03cleDU9B6hP-ogmWRTYjgLwYxQw9Scc/edit#gid=214040230 and reloading the chart to see the effects.
-
To run as a local server, open a console as administrator, install https://www.npmjs.com/package/http-server and run it:
npm install -g http-server http-server &
-
Access the website at http://localhost:8080/