// viewof splom = vl.markCircle()
// .data(data)
// .encode(
// vl.x().fieldQ(vl.repeat("row")),
// vl.y().fieldQ(vl.repeat("column")),
// vl.tooltip('Food product')
// // vl.color().fieldN("species").scale({ scheme: "set2" })
// )
// .width(Math.max(width / 7 - 80, 100))
// .height(Math.max(width / 7 - 80, 100))
// .repeat({
// column: ['Retail', 'Packging', 'Transport', 'Processing', 'Farm', 'Animal Feed', 'Land use change'],
// row: ['Retail', 'Packging', 'Transport', 'Processing', 'Farm', 'Animal Feed', 'Land use change']
// })
// .resolve({"scale": {"x": "shared", "y": "shared"}})
// .render()
d3 = require('d3@5')
dataDense = data.map(d => {
return [
{ param: 'Retail', value: +d['Retail']},
{ param: 'Packging', value: +d['Packging']},
{ param: 'Transport', value: +d['Transport']},
{ param: 'Processing', value: +d['Processing']},
{ param: 'Farm', value: +d['Farm']},
{ param: 'Animal Feed', value: +d['Animal Feed']},
{ param: 'Land use change', value: +d['Land use change']},
].map(l => {
return {
param: l.param,
value: l.value,
'Food product': d['Food product'],
};
});
})
.flat()
import {vl} from '@vega/vega-lite-api'
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.
