Add network diagrams and positions

[anisfeld]

What Issue Are You Seeing or What Feature Needs To Be Added?

We want the ability to share information about the network structure.

Question to address: When do we present the network and with what information?

• proposal 1: we only show it in the beginning of a game with the students position highlighted with the color provided. ~- proposal 2: we show it the whole game but without any color information (you are here -- and we label each player you can see with their name or make this a mouse-over type thing.)~

Proposal 1 wins. We'll show it at the beginning of some fraction of games. Frontend:

• [x] Write code to add graph programmatically into beginning of first round -- if it's a graph round. (Use external template from round)
• [x] Add explanation of graph before the graph is shown on the start_of_round page.

Backend:

• [x] Update db and game creation sequence to account for this (new row in game table called "is_network_visible")
• [x] Write route that fetches network information (or include this in round??)

Are There Any Links That Would Be Helpful?

https://www.d3indepth.com/

[anisfeld]

Ideas from D3 Selection.

First make a container in SVG in the html (still working on lines ...)

<svg width="760" height="240">
<g transform="translate(70, 70)">
</g>
</svg>

javascript with d3

// programmatically build the network
data = [[0,0], [0,40], [0,80], [40,0], [0,40], [0,80]

// fill individuals circle with their color
d3.selectAll('circle')
  .filter(function(d, i) {
    return this.id === "me";
  })
  .style('fill', 'red');

// add functionality to get information about other players?
d3.selectAll('circle')
    .on('mouseover', function(e, d) {
        ...
    });

in css

circle {
    fill: #ddd;
}

[anisfeld]

@pepipandi Here's the current state of the network diagram. I'm trying to make the names show up only when the person mouses over and then put it inside a box so there is no interference. We want language that explains what's going on.

I think it might also be useful to have a little legend "green circle = You" "grey circle = Other player" "white line = players who can see each others guesses"

[pepipandi]

Ok, here's my take on the language.

Diagram Explanation

This diagram shows who can see whom in this game. Each circle is a player: you are the green circle, and other players are the gray circles. Players who connected by a line can see each other's guesses.

@anisfeld is this enough? I can have this to CHRCR for translations... or should we wait?

[anisfeld]

@FedericoDM I'd like you to try to finish this issue. If you pull in my branch, you should see the start of games session now has a network diagram using d3.

We want this diagram to appears sometimes. You'll change this line to turn the diagram on or off: https://github.com/prijatelilab/PrijateliTree/blob/77e918f7037ceb581844937d39e0b3a0408829b5/prijateli_tree/app/templates/start_of_game.html#L23

To complete this do the two unchecked check boxes at the top of the issue.

• For now, let's show the network randomly 20 percent of the time--we will not show the network in self-selected games (since they won't have a network yet!). Let me know if you have any questions.

[anisfeld]

@pepipandi

"This diagram shows who can see who in this game. Each circle is a player: you are the green circle. Players connected by a line can see each other's guesses."

A little simpler. I'm worried about saying green circle in case we want to change the viz at some point. But I think it's okay like this. Please make each line be it's own row in the excel spreadsheet and then @FedericoDM can incorporate the new text.

[anisfeld]

@pepipandi See above! We need some language updates.

[anisfeld]

Closed with #151