LynxSight

LynxSight is a web-based visualisation tool that allows to organise legal information (more specifically legal events) in a way that it makes sense for the user, targeted at both specialised and non-specialised public.

Legal events can be defined as actions of certain relevance from the legal point of view (e.g. an incident, a decision, etc). Reading long documents all day can be frustrating and synthesizing or just locating important infomation often requires a lot of time. LynxSight aims to make this process so much simpler by providing with visual guidance along the legal sentences you may be going through at th moment.

Look and Feel

What it does

LynxSight is used to analyse legal sentences and provides with:

• Inline highlighting.
• Temporal analysis and sorting.
• Graph-based visualisation of legal events, answering at a glance to common questions like: Who, Against Whom, When…
• Visual categorisation of legal events.
• Hierarchical sizing according to degree of importance according to professional lawyers.
• Zooming functionality to enable exploring events as in a natural way.

About the project

The LynxSight project is part of a European project called Lynx whose purpose is to build a LKG (Legal Knowledge Graph). This work, focused on front-end development and UX, assisted in the progress of such project, supported by researchers of the Ontology Engineering Group, from the Artificial Intelligent department of Universidad Politécnica de Madrid.

The project involved 4 weeks of work. Our task was to improve the previous design, dealing with external code, Bootstrap and nested pages. Apart from the improvement of the whole site, we redesigned and fixed the top of the page to provide permanent visualisation mechanisms to the user while scrolling.

Amongst the technologies used in the project we find the chief components of any front-end development: HTML, CSS and JS. Vanilla Javascript was used to generate all dynamic content and CSS Flexbox was used to organise elements in the page in a way that the design could be made fully responsive in further iterations of the project.

All the graphical elements were created using svg, in order to make elements show perfectly at any size and so that interaction could be implemented more easiy than using other html elements, such as canvas.