Published
Edited
Apr 30, 2022
2 stars
Insert cell
Insert cell
Insert cell
{
// group1 and group3 Cocktail
// group1 and group2 are VR
// group2 and group4 are

// group1_1 Cocktail VR
// group1_2 Cocktail VR
// group2_1 Bubble VR
// group2_2 Bubble VR
// group3_1 Cocktail PC
// group3_2 Cocktail PC
// group3_1 Bubble PC
// group3_2 Bubble PC

const secondDigit = (d) => d["group"].slice(7, 9);
const tech = (d) => (+d["group"].slice(5, 6) <= 2 ? "VR" : "PC");
const audio = (d) => (+d["group"].slice(5, 6) % 2 ? "Bubble" : "Cocktail");
return Plot.plot({
grid: "true",

x: {
nice: true,
type: "pow",
ticks: 10,
exponent: 0.25
},
// height: 800,

facet: {
data: data,
y: tech,
x: audio,
marginRight: 80
},
// fy: {
// domain: d3.groupSort(data, g => g[0].group.slice(6, 8), d => d.group) // group by "group" order by the condition
// },
marks: [
Plot.frame(),
Plot.lineY(
data,
Plot.binX(
{
y: "count"
},
{
x: "distance",
stroke: secondDigit
}
)
),
Plot.tickY([0])
]
});
}
Insert cell
angular = FileAttachment("angular.csv").csv()
Insert cell
import { navio} from "@john-guerra/navio"
Insert cell

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.
Learn more