David B.

Data visualization engineer

Datastax - class diagram

24 February 2019

Diagram had several requirements:

  1. Should be looking as clean as possible
  2. Should be zoomable and pannable
  3. Collapsible and Draggable nodes
  4. Should be able to work with graphql source file
  5. After each interaction, layout should be saved in browser

I used

d3.js - for drawing

d3-dag - to calculate optimal positioning of nodes. Most helpful was topological layout

Crow’s foot notations - to display relationship multiplicity

Graphql tag - to parse graphql files

End product is very smooth and pretty performant, compared to built in tools in several applications (Eyes towards you, visual studio and your entity relationship diagram)