Crafting Visual Stories with Data.
viewof view = vegalite(spec1)
spec1 = ({
width: 400,
height: 400,
view: { stroke: null },
data: { values: links_undirected },
transform: [
{ flatten: ["link"], as: ["node"] },
{
lookup: "node",
from: { data: { values: nodes }, key: "index", fields: ["posX", "posY"] }
}
],
layer: [
{
mark: "point",
selection: {
highlightNode: {
type: "interval",
empty: "none",
init: { x: [0.1, 0.3], y: [0.1, 0.3] }
}
},
encoding: {
x: {
field: "posX",
type: "quantitative",
scale: { domain: [0, 1] },
axis: null
},
y: {
field: "posY",
type: "quantitative",
scale: { domain: [0, 1] },
axis: null
},
opacity: { value: 0 }
}
},
{
mark: {
type: "line",
stroke: "grey",
strokeOpacity: 0.5,
interpolate: "monotone"
},
encoding: {
x: { field: "posX", type: "quantitative" },
y: { field: "posY", type: "quantitative" },
size: { field: "weight", type: "quantitative", legend: null },
order: { field: "edge", type: "nominal" }
}
},
{
transform: [
{
lookup: "edge",
from: { selection: "highlightNode", key: "edge" },
as: "highlightEdges"
},
{ filter: "datum.highlightEdges" }
],
mark: { type: "line", stroke: "blue" },
encoding: {
x: { field: "posX", type: "quantitative" },
y: { field: "posY", type: "quantitative" },
size: { field: "weight", type: "quantitative" },
order: { field: "edge", type: "nominal" }
}
},
{
mark: { type: "circle", size: 600 },
encoding: {
x: { field: "posX", type: "quantitative" },
y: { field: "posY", type: "quantitative" },
fill: {
condition: { selection: "highlightNode", value: "lightblue" },
value: "yellow"
},
stroke: {
condition: { selection: "highlightNode", value: "blue" },
value: "black"
},
strokeWidth: {
condition: { selection: "highlightNode", value: 3 },
value: 1
}
}
},
{
mark: { type: "text", size: 14 },
encoding: {
x: { field: "posX", type: "quantitative" },
y: { field: "posY", type: "quantitative" },
text: { field: "node" }
}
}
]
})
nodes = [
{ index: 1, posX: 0.65, posY: 0.43 },
{ index: 2, posX: 0.25, posY: 0.24 },
{ index: 3, posX: 0.85, posY: 0.21 },
{ index: 4, posX: 0.12, posY: 0.74 },
{ index: 5, posX: 0.84, posY: 0.95 }
]
links_undirected = ([
{edge: 1, link: [1, 2], weight: 8},
{edge: 2, link: [1, 3], weight: 1},
{edge: 3, link: [1, 4], weight: 5},
{edge: 4, link: [1, 5], weight: 3},
{edge: 5, link: [2, 3], weight: 6},
{edge: 6, link: [2, 5], weight: 5},
{edge: 7, link: [4, 5], weight: 4}
])
vegalite(spec2)
spec2 = ({
width: 400,
height: 400,
view: {stroke: null},
data: {values: links_directed},
transform: [
{ lookup: "source",
from: { data: {values: nodes}, key: "index", fields: ["posX", "posY"]},
as: ["sourceX", "sourceY"]
},
{ lookup: "target",
from: { data: {values: nodes}, key: "index", fields: ["posX", "posY"]},
as: ["targetX", "targetY"]
},
{ fold: ["source", "target"], as: ["edgeType", "nodeIndex"]},
{ lookup: "nodeIndex",
from: { data: {values: nodes}, key: "index", fields: ["posX", "posY"]},
as: ["posX", "posY"]
}
],
layer: [
{ mark: "point",
selection: { "highlightNode": { type: "single", on: "mouseover", nearest: true,
field: "nodeIndex", init: {"nodeIndex": 2}}},
encoding: {
x: {field: "posX", type: "quantitative", scale: {domain: [0, 1]}, axis: null},
y: {field: "posY", type: "quantitative", scale: {domain: [0, 1]}, axis: null},
opacity: {value: 1}
}
},
{
mark: {type: "rule", stroke: "grey", strokeOpacity: 0.5},
encoding: {
x: {field: "sourceX", type: "quantitative"},
x2: {field: "targetX", type: "quantitative"},
y: {field: "sourceY", type: "quantitative"},
y2: {field: "targetY", type: "quantitative"},
size: {field: "weight", type: "quantitative", legend: null}
}
},
{
transform: [{filter: {selection: "highlightNode"}}],
mark: {type: "rule"},
encoding: {
x: {field: "sourceX", type: "quantitative"},
x2: {field: "targetX", type: "quantitative"},
y: {field: "sourceY", type: "quantitative"},
y2: {field: "targetY", type: "quantitative"},
size: {field: "weight", type: "quantitative"},
color: {field: "edgeType", type: "nominal", scale: {range: ["blue", "red"]}}
}
},
{ mark: {type: "circle", size: 600},
encoding: {
x: {field: "posX", type: "quantitative"},
y: {field: "posY", type: "quantitative"},
fill: {condition: { selection: "highlightNode", value: "tan"}, value: "yellow"},
stroke: {condition: { selection: "highlightNode", value: "maroon"}, value: "grey"},
strokeWidth: {condition: { selection: "highlightNode", value: 3}, value: 1}
}
},
{ mark: {type: "text", size: 14},
encoding: {
x: {field: "posX", type: "quantitative"},
y: {field: "posY", type: "quantitative"},
text: {field: "nodeIndex"}
}
}
]
})
links_directed = ([
{edge: 1, source: 1, target: 2, weight: 8},
{edge: 2, source: 1, target: 3, weight: 1},
{edge: 3, source: 1, target: 4, weight: 5},
{edge: 4, source: 1, target: 5, weight: 3},
{edge: 5, source: 2, target: 3, weight: 6},
{edge: 6, source: 2, target: 5, weight: 5},
{edge: 7, source: 4, target: 5, weight: 4},
{edge: 8, source: 5, target: 3, weight: 4}
])
vegalite = require("vega-embed")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
