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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.