1. FluidDiagrams Framework for 3D/2D Visualisations in JavaScript Developed in TypeScript -> Compiled to JavaScript

3. Adding own elements TypeScript: class JSONParser extends FDParser{ public parse() { … } } JavaScript fd = new FluidDiagrams(true); var factory = fd.getParserFactory(); var parser = factory.getParserEmpty(); parser.parse = function () { … }

4. Scene Graph Each element in a 3D scene is positioned within a Scene Graph. (Hierarchy of Geometry) Transformations always relative to Parent Car Front Axis Wheel Left Circle Mesh Wheel Right Circle Mesh Rear Axis Wheel Left Circle Mesh Wheel Right Circle Mesh

5. In FluidDiagrams Hierarchies: Tabular Data: Scene Root Child 1 Child 1.1Child 1.2 Child 2 Child 2.1Child 2.2 Scene Element 1 Element 2 Element 3

6. Scene Graph Scene Node 1 Line Node 2 Line Triangle Vertical Line Scene Nodes Node Line Node Line Axis Year Triangle Milage Triangle