Wikidata Graph Builder Versions Save

Visualize Wikidata items using d3.js

v2.0.0

1 year ago

This is a major release for Wikidata Graph Builder after a long period of no updates. The main changes are:

New technology stack

The site has been rewritten entirely on more modern stack, allowing for much faster performance and easier implementation of new features. Key features of the release include the transition from Angular/Jade/npm/Bower/Gulp in favor of SvelteKit/pnpm/Vite, the switch to OffscreenCanvas and Webworkers for rendering, the use of Tailwind for design, the switch from SVG to Canvas, and the switch of Coffeescript to Typescript. By the way, as far as we know, Wikidata Graph Builder is the first system to organize all calculations on Webworkers, not just the layout step.

Performance improvements

Thanks to the use of current technologies, it is now possible to visualize graphs from many thousands of nodes. You can even build the whole family tree (~53 generations) of Adam! (not really, I think in few years this tree will increase tenfold, but it is already cool anyway)

And here is just a screenshot of somewhat more modern family tree: image

New modes of graph building

In addition to the historical method, new modes of directed graphs were added. By the way, it does not have to be directed acyclic graphs, the tool allows to build omnidirectional and cyclic graphs too. image (link to the chart above)

This is especially useful when constructing genealogical trees. Also, parent and child nodes are highlighted when the cursor is hovered over, making it easier to analyze tangled graphs. image

The addition of new layouts made it possible to better apply the old "undirected" directional mode. The diagram below clearly shows who is whose descendant, which was not possible in the force-based layout. image (link to the chart above)

Shortcut control tools

Editors often add shortcuts to a parent class or taxon, for example. If a power graph is used, it becomes difficult to analyze tangled nodes. Shortcut control tools allow you to hide and minimize the impact of shortcuts.

image (link to the chart above)

Animation1 (link to the chart above)

One particular example of a shortcut is the birth of an indirect descendant. Setting special visualization parameters allows to clearly show how NN is a great-great-grandparent for Andrey Khilkov. image

Mobile version

Using Tailwind made it fairly easy to form a mobile version for Wikidata Graph Builder. image

Last but not least, there is finally a fallback to English if there is no label in the selected language. Previously we just displayed Q-codes instead, now it will be easier to check for missing translations.

I hope this release brings something useful to you!