0xadriatorralba/datavisualizationinlinguistics

This is a project about a Colaboration with the Mathematics and Computer Science Department from the Universitat de Barcelona regarding Data Visualization in Linguistics

datavisualizationinlinguistics's Issues

[T1][H] Zoom to fit

• Center the graph
• Bug with some graphs wider than tall
• Scale the graph to fit the canvas
• Sum the radius of the upper and lowest nodes (so they are not cut in the zoom scale)

Save xlsx data to Django db

[T2-6][Radial]

Sizes

• Change node size proportional to quantity of children
• Show icon of a news article in root node

Targets and features

• Scale associated images to the node (those who are centered in the node)
  • Features: trivial cheese on node, all in one: bubble, circle, rectangle
  • Targets: icons outside the node, rings on the node, icons on the node
• Displace targets and features outside of the node

Opacities

• Bug OR (if nothing is selected, highlight all nodes and edges)
• Highlight edges whose both endpoints are highlighted

Django Transfer Knowledge Part 2

[TD1][Hierarchical] Refactor code

Delete unnecessary code.
Add comments.
Reduce some lines.

[T2-6][Force]

Sizes

• Change node size proportional to quantity of children

Targets and features

• Position features radially
• Scale associated images to the node (those who are centered in the node)
  • Features: trivial cheese on node, all in one: bubble, circle, rectangle
  • Targets: icons outside the node, rings on the node, icons on the node
• Displace targets and features outside of the node

Opacities

• Bug OR (if nothing is selected, highlight all nodes and edges)
• Highlight edges whose both endpoints are highlighted

Design useful dashboard with data

Integrate Reyes' frontends to our application

Django setup Transfer Knowledge to Ecem

Implement Ecem's dashboard design with Reyes' visualizations

[T5, T6][H] Opacities

T5: Initial highlighting in OR

• Create functions to highlight by categories and add attribute d.highlighted
• Create function to call individual OR functions to highlight. If nothing is selected: set nodes and edges to normal.
• Create function to call individual AND functions to highlight. If nothing is selected: set nodes and edges to normal.

T6: Highlight edges just if both endpoints are highlighted

• Filter nodes whose both endpoints are highlighted

[T3][H] Size of associated images proportional to node

Resize

• Targets: rings on the node
• Features: trivial cheese on node
• Features: all in one circle

---

Reposition and replace

• Targets: icons on the node

---

Displace

• Target: icons outside the node
• Features: dots

---

Supposed to disappear

• Features: trivial cheese outside node

[TD1][Force] Refactor code

Delete unnecessary code.
Comment code.
Reduce lines.

[TD1][Radial] Refactor code

Delete unnecessary code.
Comment code.
Reduce lines.

Connect backend db into frontend Reyes' js

Check Highcharts API integration in Django

Connect data from Django ORM to Highcharts API

[T2a][H] Change node size

Hierarchical

Make node size proportional to the quantity of children.

• Add parameter radius to each node.
• Show nodes with radius proportinal.
• Add separation between nodes not collapsed.
• Show root node with an icon.
• Limit radius of root node to avoid overlapping its children

---

Questions:

• How does the user now know that the node is collapsed? Should we change the colour of the node or they can guess with the tooltip?
• For nodes with one children collapsed or not, which radius do they want?

Upload xlsx files to web

Implement Ecem's example Graph

The one from https://docs.google.com/drawings/d/1xayaC6zqRP_j_H_C9_ZGifMOtl90HjW3FSX8dZyxfbc/edit?ts=6016f0ce

[T7][H,R,F] Opacity of unhighlighted nodes and edges

Opacity vs change of colour

• Create an image with background colour (#EEEEEE).
• Select all classes associated with the node (to unhighlight) except the circleBackground
• Add it to the node with position and z-index and show it when the node is unhighlighted
• Remove background image when the node is not unhighlighted