Managed to get a basic interactive network setup with some hover and onclick phenomena (play with it!). I intend to expand the effects to include alteration of size (links and nodes), substitution of an image for the circle representation of a node, and the appearance of text nearby. Because nodes and links are obviously sets of very similar objects, I will create them as groups in d3, but then allow selections of individual items. These selections should trigger phenomena that will be specifically associated with that particular node. This is just a quick entry; that’s all I have to say right now.
Update:
Node hover: Node expands (will eventually be pic of offender), background changes to another color via gradient. TO-DO: Tooltip with name of node (perpetrator)? Do I want that blocking part of the picture?
Node click: Node outlinks, node changes color permanently.
Edge hover: Edge changes color and thickness. Tooltip (dummy data, will be name of document linked to).
Edge click: Edge outlinks (dummy link, will be cited document that generated the link).
See the Pen
Document-Outlinked Citation Network Proof of Concept by Eli Zarrindast (@zarrindast)
on CodePen.
Stuff I’m still figuring out:
Upon node hover, bring up (or link out to) a little dataframe profile of the offender, maybe have it slide onscreen at the bottom. Ideally any data that overlaps between offenders (e.g. weapon type) could eventually be clickable to bring up a list of persons relevant to that data value for that column– so, maybe have a pandas dataframe full of the all of the data, then trigger filtering methods for certain values by clicking on those values and show the subset frame on the side of the whole thing. No idea how I would connect Python and JS/CSS/HTML (it’s probably well-known, but not by me).
Upon node hover, highlight nodes of degree 1.
Slider bar that visually grows the network over time, as you slide through each year when an event occurred. I tried to do this in Gephi and while if I recall correctly a little video animation was possible, it wasn’t possible to let the user physically move the slider around themself. I saw a demo of some new Tableau add-ons that seemed to serve this exact purpose so I’m going to take a look at that– not too familiar with Tableau and will have to see how well it can be integrated.