This is a very simple project, that renders graph of related YouTube videos:

video

It's built on top of:

• ngraph.graph - to store graph
• ngraph.forcelayout - to produce layout at runtime
• query-state - to map query string to search term
• panzoom - for interactive SVG manipulation

The graph is rendered with SVG, but I'm using vue.js to provide higher level API for elements construction. I had to fall back to native javascript positions manipulation, because reactive properties of vue produced choppy rendering. See code here: GraphView.

The data is fetched with plain ajax request from YouTube API

Please feel free to contribute and let me know what you think!

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

I hope you like it. Thank you for dedicating your time to read this thing :).

MIT