Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



68 Commits

Repository files navigation

๐Ÿ’ป Bandersnatch ๐ŸŽฅ

Bandersnatch Life is an interactive website for the movie Black Mirror: Bandersnatch by Netflix. Bandersnatch Life allows you to explore all possible paths in an interactive way - and in my opinion is a must to fully absorb all possible outcomes of the movie!

Table of Content ๐Ÿ“˜

Features โœจ ๐Ÿ˜Ž

Currently, Bandersnatch Life supports the following:

  • Informational Notifications - Some are Timed

  • Paths Explorations

  • Paths Collapse

  • Page Scaling

  • Vertical and Horizontal Scrolling

๐Ÿ“ท Demo and Screenshots ๐Ÿ“น

Bandersnatch Life Bandersnatch Life
Spoiler Alert Introduction
Notifications Paths


Usage ๐ŸŽฎ

This website is written in Javascript with help of D3.js. Data in JSON and its related scripts are in Python 3.7

  • git clone

  • cd Bandersnatch

  • Run index.html

Contributing ๐Ÿ”ฅ

  1. ๐Ÿ Fork this repo!
  2. Clone and cd into it
  3. Create your feature branch: git checkout -b my-new-feature
  4. Commit your changes: git commit -m 'Add some feature'
  5. Push to the branch: git push origin my-new-feature
  6. Submit a pull request ๐Ÿ‘

Tools ๐Ÿ‘“

Programming languages, formats, and libraries.

  • HTML
    • Bootstrap
  • CSS
  • Javascript
    • D3.JS
    • Sweetalert 2
  • Python 3
  • JSON

Future Plans ๐Ÿ”œ

Based on given feedback, the following improvements are to be made/considered. Please feel free to pick any of them and start working on improving it as a contribtor.

  • General
    • Mobile Responsiveness
    • Save user session with all visited paths
  • Notifications
    • Wait time
    • Change notifications into rounded boxes(popover, toolbox), with hover-over focus, that reside over the center of the links
  • Graphics
    • Horizontal Scrolling (overriding the overflow of the body element by the svg's element)
    • Auto-focus on new choices
    • Zooming in and out
      • Maybe zoom out of the previous nodes while still zoom in on the new ones to make all of them fit on screen?
    • Expand everything!
    • Left to right paths
      • Maybe as an option?
    • Text wrapping
  • Content
    • Which cereal video ad is played
    • Overriding not to talk about the mom path
  • Marketing
    • SEO
    • Share on Social Media button
  • Style/Design
    • Fonts
    • Footer
    • Links and Nodes Color
  • Read Me
    • Add contributors

Current Website Hierarchy ๐Ÿ’ช

  • Single page with paths and notifications.

  • More to come...

๐Ÿ•บ Collaborators & Contributors ๐Ÿ’ƒ

Ahmad M. Osman

Inspiration ๐Ÿ““

You will fail.

You will mess up.

You'll do poorly on assignments and tests.

Your side projects will not work.

Your code will be sloppy and incomplete.

You will bomb job interviews.

Your PR's will be rejected.

And because you fail, you will succeed.

Don't be afraid to fail, don't let it destroy your self-confidence, don't let it define you. Instead, do everything you can to learn from that failure and take that new knowledge into the next piece of work.

Indeed, failure is the only path to success.

    โ€• Stranger on the Internet.

License ๐Ÿ“š

Bandersnatch Life is an open source project under MIT license. Bandersnatch Life is a fan work of Netflix's Black Mirror: Bandersnatch - any assets used are copylefted and should fall under fair use policy. Special thanks to /u/alpine-.