Attilatech: Data product frontend work
-
- Force diagram using given sample mock JSON nodes and links from Attilatech.
- Prior version used straight lines, but curved lines better for ingoing and outgoing arrows. Drag event added to current version.
- Unless there is more than one receive and one sender link between two nodes, fixed curved arrows will draw every interaction nicely.
- Force diagram is the right choice of visualization as it positions the nodes correctly in a pleasing manner with respect to each other node / band.
- Added in all the Purdue levels from 0 to 3.5 (layered as bands) and drew the force simulation based on that.
- In the first revamp with only the main central area of the bands as a gravity center, you get a messy hairball of connected nodes. Not very pleasing, and messy.
- Then tried a hard placement route by sorting the data and calculating each node's location in the center of the bands, giving each node its own gravity. Result neater, but still hard to parse
- So went back to the first version. Beyond band gravity, also constrained the distance of the links depending on whether sender/receiver crosses Purdue levels (or not), and adding charges so the nodes so that the link / node interaction causes them to spread out.
- Also constrained the forces so that gravity reacts in a sort of like an oval shape, rather than circular so the nodes are spread out within the bands.
- Aspect ratio tweaked to 3:2 instead of 1:1 - more space to view
- Visualization works well for this sample set of data. I tried adding in bands for Purdue levels 4 and 5, and tweaked it so it seems ok.
- But may need more sample data sets to see if all the networks look like this.
- Took the existing visualization code and updated the nodes and links to be visualized based on the new sample data.
- My first comment is that I probably overtuned the forces to fit the first network so it looks "nicer". If the links cross a purdue model layer, the links are longer. However I made purdue level 0 short (expected 0 to always have more nodes is not true!), and all other layers mid length, and you get this.
- Setting links in the same layer to be equally short in length, you get this cleaner version. I think trying to tweak for a specific network is proving not to be a good option.
- Lastly, I drew this network with version 1 code (a non-constrained environment with only one centre and allowing all the nodes to shift around) and you get this rather nice version.
- Important thing is to generalize the solution for any network. Previous network data.
- Labelling of Purdue levels added
- Lots of design theming done for the piece
- Mouseover / mouseout highlight support for links / nodes added.
- Mouseover for information panel pop-up on right added.
- Important thing is to generalize the solution for any network. Previous network data.
- Purdue levels legend added
- Lots of design theming done for the piece
- Mouseover / mouseout highlight support for links / nodes added.
- Mouseover for information panel pop-up on right added.
- Icons from Dickson added. Refactored data structure into code.
- New, more complicated nodes /links structure added.
- Data structure had new unknown node types - added to data structure.
- Width / height now changed to ViewBox. Aspect ratio is 3:2, and size is dependent on width of parent frame.
- Icons added to chart.
- Printout of icons on bottom-right legend
- Zoom / pan added. CSS tweaks (grabbing icon) and scaling extent tweaked.
- Any node that does not have the status "normal" is now circled with a thick red stroke for the anlyst to explore.
- All issues as above.
- Bigger network necessitated tweaks to the force functions.
- Zooming extents tigther, and panning limits added, else you would get this, which is very weird as the canvas is not infinite (unlike the other piece)
- Also, decided against printing out the legend as this chart has less space already. Version with legend here.
FINAL: (production version) 12th September.
- Separated out pieces into individual HTML, CSS, and javascript components.
- All required libraries are now packaged into the piece - no need to load from an external CDN resource.
- JQuery helper library taken out. Rewrote the portions I used JQuery with D3 instead (since we are already using D3.js), and loads one less library.
- Moved all defined data structures into config.js
- Network Discovery
- Network Discovery(Purdue)
- Zipped production code here.