UI hover functionality #95
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Fixed all merge conflicts and tested, it works. |
SaswatB
requested changes
Apr 20, 2017
client/src/app/app.js
Outdated
| //Hovering over a representative node. | ||
|
|
||
|
|
||
| //Hovering over a donation edge. |
client/src/app/utils/d3-modules.js
Outdated
| @@ -8,6 +8,8 @@ import * as scale from 'd3-scale'; | |||
| import * as selection from 'd3-selection'; | |||
| import * as transition from 'd3-transition'; | |||
| import * as zoom from 'd3-zoom'; | |||
| import * as path from 'd3-path'; | |||
| import * as shape from 'd3-shape'; | |||
There was a problem hiding this comment.
you import these but dont seem to use them (assign them below)
client/src/app/utils/graph.js
Outdated
|
|
||
| class Graph { | ||
| constructor(element, nodeMenu) { | ||
|
|
||
|
|
client/src/app/utils/graph.js
Outdated
| }); | ||
|
|
||
| //add the representative nodes | ||
| init_y = 0; | ||
| Object.keys(data.representatives || {}).forEach((key) => { | ||
| nodes.push({id:"r_"+data.representatives[key].id, name: data.representatives[key].name,party:data.representatives[key].party, x:600, fx: 600, y: init_y+=60}); | ||
| nodes.push({id:"r_"+data.representatives[key].id, type:"representative",name: data.representatives[key].name,party:data.representatives[key].party, x:600, fx: 600, y: init_y+=60,state:data.representatives[key].state,district:data.representatives[key].district}); |
There was a problem hiding this comment.
please be consistent in attribute order
client/src/app/utils/graph.js
Outdated
| @@ -61,14 +66,16 @@ class Graph { | |||
| //add the donation links between committees and representatives | |||
| Object.keys(data.donations || {}).forEach((key) => { | |||
| if(data.donations[key].source in data.committees && data.donations[key].destination in data.representatives){ | |||
| links.push({source:"c_"+data.donations[key].source, target: "r_"+data.donations[key].destination,thickness:data.donations[key].amount, status:data.donations[key].support == "S" ? 1 : 2}); | |||
|
|
|||
client/src/app/utils/graph.js
Outdated
| @@ -91,10 +100,12 @@ class Graph { | |||
| .force("center", d3.forceCenter()) | |||
| .force('Y', d3.forceY().y(0).strength(.001)); | |||
| //Draw the edges between the nodes | |||
|
|
|||
client/src/app/utils/hover.js
Outdated
|
|
||
| //Mouse event when you stop hovering over a node in the visualization. | ||
| //Shows the representative description of the representative on the edge. | ||
| handleMouseOverNode(d,i) { // Add interactivity |
There was a problem hiding this comment.
javascript files use 4 tabs
client/src/style/app.css
Outdated
| @@ -155,6 +155,7 @@ footer { | |||
| color: lightgreen; | |||
| } | |||
|
|
|||
|
|
|||
client/src/app/utils/hover.js
Outdated
|
|
||
| if(d.type == "representative"){ | ||
| d3.select(this.parentNode).selectAll("g > rect#"+d.id) | ||
| .attr("width",d.bbox.width+10); |
There was a problem hiding this comment.
please use display = "none" instead of setting width to 0 as that can cause undesired side effects
There was a problem hiding this comment.
Sorry, please ignore this one
client/src/app/utils/hover.js
Outdated
| if(d.type == "donation"){ | ||
| //Thickness is amount.... | ||
| var svg = d3.select("g"); | ||
| let thickness = d.thickness; |
There was a problem hiding this comment.
Thickness should not be used like this
SaswatB
approved these changes
Apr 20, 2017
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Added hovering popups for representative nodes, and donation edges. allows you to find out more info about them.
Nodes: Tells you whether the rep is a senator or congressman, what state they represent, and if they have a district, which one.
Edges: for the donation edge, going from a superpac, to a representative, it gives the total dollar amount donated.