Skip to main content

Scatterplot of weights

Within each cell of the adjacency matrix, we can use the x-coordinate to encode time, and the y-coordinate to encode the friendship rating. This can be drawn as a scatterplot, line chart or area plot, with only very minor changes tot he specification.

Scatterplot​

In the specification for a scatterplot glyph, the mark is:

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

    "area": 20,

    "x": {"field": "time", "scale": "x"},
    "y": {"field": "weight", "scale": "y2"},

    "fill": "black"
}

Line Chart glyphs​

A line chart can be drawn by changing the mark block to:

 "mark": {
    "type": "line",

    "x": {"field": "time", "scale": "x"},
    "y": {"field": "weight", "scale": "y2"},

    "stroke": "black"
}

Area plot glyphs​

An area plot can be drawn by changing the mark block to:

 "mark": {
    "type": "area",

    "x": {"field": "time", "scale": "x"},

    "y": {"field": "weight", "scale": "y2"},
    "y2": {"value": 0, "scale": "y2"},

    "fill": "grey",
    "stroke": "black"
}

Full specification​

The complete specification for the scatterplot example is:


{
    "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": "redyellowgreen", // or redblue
      "domain": [-14, 14]
    },


    ],


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

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

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

            "scales": [
                {
                    "name": "y",
                    "type": "linear",
                    "domain": [0, 16]
                    "rangeExpressions": ["0","bounds.height"]
                },
                           {
                    "name": "y2",
                    "type": "linear",
                    "domain": [0, 16]
                    "rangeExpressions": ["bounds.height", "0"]
                },
                    {
                    "name": "x",
                    "type": "linear",
                    "domain": [0, 13]
                    "rangeExpressions": ["0","bounds.width"]
                },
            ],

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

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

                        "area": 20,

                        "x": {"field": "time", "scale": "x"},
                        "y": {"field": "weight", "scale": "y2"},

                        "fill": "black"
                    }
                },
                }

            ]
        }
    ]
}