Skip to main content

Gestalt Lines

See Asymmetric Relations in Longitudinal Social Networks




{
    "x": 300,
    "y": 300,

    "width": 1000,
    "height": 1000,

    "data": [
        {
            "name": "data",
            "url": "/data/fraternity_network.json"
        }
    ],

    "networks": [
        {
        "name": "network",
        "links": "data.links",
        "nodes": "data.nodes",
        "directed": true,
        "source_node": [ "id", "source" ],
        "target_node": [ "id", "target" ]
        }
    ],


    "orderings": [
        {
            "name": "nodeOrder",
            "data": "network.nodes",
            "orderBy": [{"field": "rank"}],
            "allowTies": false
        }
    ],

    "tables": [
        {
            "name": "adjacencyMatrix",
            "data": "network.links",
            "rowOrder": {
                "order": "nodeOrder",
                "field": "source" //.id is implicit
            },
            "colOrder": {
                "order": "nodeOrder",
                "field": "target" // .id is implicit
            }
        }
    ],

    "scales": [
        {
      "name": "color",
      "type": "linear",
      "scheme": "reds",
      "domain": [0, 16]
    },

    {
      "name": "y",
      "type": "linear",
      "domain": [0, 14],
      "range": [10, 40]
    },

    ],


    "vis": [
        {
            "table": "adjacencyMatrix",

             "rowLabels": { "field": "source.id", "align": "right", "dx": -10  },
             "colLabels": { "field": "target.id", "dx": 20  },

            "rowLines": {"stroke": "black"},
            "colLines": {"stroke": "black"},



            "vis": [

                {
                    "entries": "entry.data.weights",

                    "mark": {
                        "type": "rule",

midpoint of line is (bounds.width/2, t * 5)

length to the left is datum.weight

length to the right is datum.reverse_weight

line length is l = ()



                        "x": {"expression": "bounds.width/2 - datum.weight * 2"},
                        "x2": {"expression": "bounds.width/2 + datum.reverse_weight * 2"},

                        "y": {"expression": "datum.time * 5 - datum.weight * (datum.weight - datum.reverse_weight) / (datum.weight +datum.reverse_weight)"},
                        "y2": {"expression": "datum.time * 5 + datum.reverse_weight * (datum.weight - datum.reverse_weight)/(datum.weight +datum.reverse_weight) "},

                        "stroke": {"field": "weight", "scale": "color"}
                        "tooltip": {"expression": "datum.weight + ', ' + datum.reverse_weight + ' at ' + datum.time " }
                    },

                },

                {
                    "entries": "entry.data.weights",

                     "mark": {
                        "type": "circle",

                        "x": {"expression": "bounds.width/2"},
                        "y": {"expression": "datum.time * 5"},

                        "area": "10",

                        "fill": {"field": "weight", "scale": "color"},
                        "stroke": "none",

                        "tooltip": {"expression": "datum.weight + ', ' + datum.reverse_weight + ' at ' + datum.time " }
                    }
                }

            ]
        }
    ]
}