CerealsSP1 = VegaLite({
data: {values: simpleCereals},
width: 300,
height: 300,
mark:
{
type: "circle",
opacity: 0.5,
stroke: "black",
strokeWidth: 1
},
encoding: {
y: {
field: "rating",
type: "quantitative",
},
x: {
field: "sugar",
type: "quantitative"
},
color: {condition: {selection: "plotbrush", field: "Type", type: "nominal"}, value: "grey"},
size: {
field: "shelf",
type: "ordinal"
}
},
selection: {plotbrush: {type: "interval",resolve: "global"}}
})
md ` I could also use different highlighting mechanisms for the brush. Let's try enlarging the stroke and changing the opacity.`
viewof CerealsSPbrush2 = VegaLite({
data: {values: simpleCereals},
width: 300,
height: 300,
mark:
{
type: "circle",
opacity: 0.5,
stroke: "black",
strokeWidth: 1
},
encoding: {
y: {
field: "rating",
type: "quantitative",
},
x: {
field: "sugar",
type: "quantitative"
},
color: {field: "Type", type: "nominal"},
strokeWidth: {condition: {selection: "plotbrush", value: 2}, value: 1},
fillOpacity: {condition: {selection: "plotbrush", value: 0.7}, value: 0.5},
size: {
field: "shelf",
type: "ordinal"
}
},
selection: {plotbrush: {type: "interval",resolve: "global"}}
})
md `The problem with combining them in an HTML table is that they do not interact as a single cell, because they are only \`\`\`div\`\`\` elements and so we can't easily combine <b>interactions</b>. Let's put them together in a single cell. We can do this using \`\`\`hconcat\`\`\` and \`\`\`vconcat\`\`\`. Here they are but with no interactions.`
VegaLite({
data: {values: simpleCereals},
hconcat: [{
mark:
{
type: "circle",
opacity: 0.5,
stroke: "black",
strokeWidth: 1
},
encoding: {
y: {field: "rating",type: "quantitative" },
x: { field: "sugar", type: "quantitative"},
color: {
field: "Type",
type: "nominal"
},
size: {
field: "shelf",
type: "ordinal"
}
}
},
{
mark:
{
type: "point",
opacity: 0.4,
stroke: "black",
strokeWidth: 1.5,
size: 40,
filled: true,
"tooltip": [
{"field": "Brand","type": "nominal"},
{"field": "calories","type": "quantitative"}
],
},
encoding: {
y: {field: "rating", type: "quantitative" },
x: {field: "calories", type: "quantitative", scale: {"domain": [40,200]}},
color: {
field: "Type",
type: "nominal"
},
size: {field: "sugar",type: "quantitative", legend: { title: "Sugars", clipHeight: 40},
scale: {range: [40, 400]} },
}
}
]
})
html `
So now we add interaction using <b>brushing</b>. The general idea is that each view can have a brush (a selection operator) and can react to its own and/or any other selection operator (specified in other views). In this example we are specifying the same brush for each view, but we need to spec it in each view, because we are not using one view as the overview and one as the detail (see the next example).
So first we add a selection operator to the first view and tell it where the selectable area is.<br>
<br>
<table border=0 width=600>
<tr>
<td><code>selection:</code></td>
<td><code>{brush: {type: "interval", </code></td>
<td><code>resolve: "global" </code></td>
</tr>
<tr>
<td>adds the selection operator</td>
<td>sets the type of selector (<em>brush</em>)<br> and the type of selection (<em>interval</em>)</td>
<td>sets the way selections are resolved on multiple views.<br> <code>global</code> means effects are global and all local effects in the group of views are cleared.</td></tr>
</table>
<br>
Then we need to link the brush to the top view by adding it to the x-axis encoding.<br><br>
<table border=0 width=500>
<tr>
<td><code>mark{encoding:x:</code></td>
<td><code>{scale: {domain: </code></td>
<td><code>{selection: "brush"}}</code></td>
</tr>
<tr>
<td>identifies the dimension to be brushed</td>
<td>sets what can be affected</td>
<td>connects the brush selector</td></tr>
</table>
`
InteractiveTable = VegaLite({
data: {values: simpleCereals},
hconcat: [{
mark:
{
type: "circle",
opacity: 0.5,
stroke: "black",
strokeWidth: 1
},
encoding: {
y: {field: "rating",type: "quantitative" },
x: { field: "sugar", type: "quantitative"},
color: {condition: {selection: "plotbrush", field: "Type", type: "nominal"}, value: "grey"},
size: {
field: "shelf",
type: "ordinal"
}
},
selection: {"plotbrush": {type: "interval",resolve: "global"}},
},
{
mark:
{
type: "point",
opacity: 0.4,
stroke: "black",
strokeWidth: 1.5,
size: 40,
filled: true,
"tooltip": [
{"field": "Brand","type": "nominal"},
{"field": "calories","type": "quantitative"}
],
},
encoding: {
y: {field: "rating", type: "quantitative" },
x: {field: "calories", type: "quantitative", scale: {"domain": [40,200]}},
color: {field: "Type", type: "nominal"},
strokeWidth: {condition: {selection: "plotbrush", value: 2}, value: 1},
fillOpacity: {condition: {selection: "plotbrush", value: 0.7}, value: 0.5},
size: {
field: "shelf",
type: "ordinal"
},
size: {field: "sugar",type: "quantitative", legend: { title: "Sugars", clipHeight: 40},
scale: {range: [40, 400]} },
},
selection: {"plotbrush": {type: "interval",resolve: "global"}},
}
]
})
SP1=CerealsSP1;
embed = require('vega-embed@3')
Stocks = d3.csv("https://raw.githubusercontent.com/vega/vega-datasets/master/data/stocks.csv")
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.
