What is Reddit's opinion of Vis.js?

From 3.5 billion Reddit comments

This visualization shows how every nation in this year's World Cup relates to each other in terms of common Football Clubs. Each inter-connected clique in the visual represents a single country's players, with edges joining different cliques signifying that there are at least 2 players on the same Club Team on that path. This visual was inspired by a similar visual done for the 2014 World Cup found at http://visjs.org/examples/network/exampleApplications/neighbourhoodHighlight.html

The data was scraped from https://en.wikipedia.org/wiki/2018_FIFA_World_Cup_squads using python + beautifulsoup. PM me if you are interested in the source code!

The visualization was made with the pyvis library at http://pyvis.readthedocs.io/en/latest/

The visualization is derived from the Founders Online data provided to us by the University of Virginia and was created using visjs as part of a custom data exploration and visualization tool.

Are you by chance also a developer? If so vis.js has some nice implementations for data visualization.

Check out the examples here: http://visjs.org/network_examples.html#allExamples

Perhaps a bubble chart? That could afford you that freedom of avoiding discrete temporal indicators ehile representing freq in the time domain. But it'll probably get ugly.

Or the timelines in this lib might solve your problem: http://visjs.org/

And my favorite: a correlogram. http://en.m.wikipedia.org/wiki/Correlogram

Hey thanks for the feedback and suggestions!

Q1

Displaying networks with that many nodes and edges can be pretty tricky. In the python layer, there is currently no support for tweaking the necessary parameters to support rendering and stabilizing huge graphs. The developers of the javascript library however have provided some suggestions on how to improve performance. It basically involves supplying some extra options in the javascript layer, but I'll just link some GitHub issues involving this.

https://github.com/almende/vis/issues/2906

https://github.com/almende/vis/issues/2900

I would suggest subsetting your data before you visualize it if you're not doing that already, but from my experience I have had the best performance with nodes < 1000.

EDIT: Another thing to suggest is to assign x and y coordinates yourself, and disable physics. And also try looking at the html page and editing the physics attribute to change its stabilization properties. Increasing iterations to a larger value can have huge performance increases.

Q2

The widgets were meant to be there for experimentation purposes, such as playing around with the different settings (node colors, positions, physics settings) to see how the graph looks in real time. Then those parameters resulting in such a desired graph could be plugged in to method calls to achieve the same result.

Q3

The jitter might be the network trying to stabilize. Node positions and inter connectivity could all be factors. There is a stabilization property that can be altered, but I would recommend reading more of the actual VisJS documentation in which they explain it a little more clearly.

http://visjs.org/docs/network/physics.html

It is possible to modify the add_nodes method to reflect what you said as well. Even writing custom widgets! I would gladly appreciate you opening any issues or PRs!

> this website

The anal retentive, everything-has-its-place-and-must-be-aligned-at-right-angles German in me has no love for that website design. In fact, I find it annoying in the extreme and question the motives for creating that design.

A hub and spoke diagram showing major genres and subgenres hanging off them, combined with the ability to zoom in and out....kind of like a network graph, would be the best way to do this...e.g.

http://sigmajs.org/

http://visjs.org/examples/network/nodeStyles/customGroups.html

Very informative, thanks! It's true I still haven't try React even if a lot of people suggest it. My fear is that it would be hard to use third-party libraries with it. Am I wrong?

Let's say, again, widgets like vis.js or DataTables, would it be a pain to use them with React?

My understanding is that Knockout is superior in that regard. And since I definitively don't want to create from scratch all the widgets I'll use on the frontend, I need something that plays well with third-party libraries!

I may check TypeScript, thanks for the suggestion.

[OC] We've created this visualization based on an analysis of all patents of Tesla Motor Company between 2006-2013. We've clustered them based on their comparable metrics like IPC-codes and inventors. Data used: public patent information from the US Patent and Trademark Office (USPTO), the European Patent Office (EPO), and the Japan Patent Office (JPO). Tools used to build this: http://visjs.org for the graph, http://fb.me/react for the UI.

Do these maps need to be static or is it ok if the software will place the nodes on its own?

If its ok then perhaps something like this?

http://visjs.org/examples/network/exampleApplications/neighbourhoodHighlight.html

https://appendto.com/2017/05/creating-network-diagrams-vis-js/

There are some other similar engine.

You can also use other engines to output a svg file and load that in your browser to zoom in/out when needed (svg's are vectorbased so you will maintain quality when zooming).

Try VisJS. It’s JavaScript based but I was able to generate the JSON it requires from Python.

Edit: VisJS, not GraphVis.

Here's an example of the 3D plots it can do: http://visjs.org/graph3d_examples.html

This tool takes the URL of a Reddit thread and displays it as a network diagram/graph, showing change over time.

When you first hit "get" on the virtual browser, you get the first post. Then you use the buttons to go forward or backward in time to see the conversation grow.

• Source data: Reddit's API. Just add .json or .rss to the end of any thread's URL and you can get machine-readable data.
• Tools: javascript. Specifically jQuery, vis.js for the diagram
• To-do:
  • let you know when you've got to the end and there are no more comments
  • some means of handling the "more" areas where there are too many posts for the initial hit on the JSON

This viz uses data from a study done by Macalester researches who extracted character interactions from a Storm of Swords (the second book in the Song Of Ice and Fire series - on which Game of Thrones is based). I used Neo4j graph database to construct a graph of the character interactions and applied some social network analysis techniques to analyze the network. The visualization incorporates these metrics and uses Neo4j and the javascript vis.js library.

Data Source: http://basketball-reference.com

Tools: RStudio for scraping, cleaning and visualizing.

Algorithm: http://cran.r-project.org/web/packages/kohonen/index.html

Visualization Package: http://visjs.org/

Visualisation of cities using vis.js and data from Citi Bikes and TFL

I was faced with the same challenge a couple of years ago, here is what I did: One of the best timeline solutions is IMO the facebook timeline, so I was looking for something that mimics that. If you're familiar with wordpress, have a look at this plugin.

If you'd rather use your own database without being bound to a wordpress like post/page structure, there are several powerful js solutions out there. I find this one very powerful. This solution looks more simple and probably has better example code.

I think your idea is awesome, looking forward!