I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
data.filter((d) => d.date === "2021-08-10 15:08:51.015000+00:00")
{
// group1 and group3 Cocktail
// group1 and group2 are VR
// group2 and group4 are
// Ayman's labels
// 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
// We only want half a matrix
const nonRepeatedData = data.filter(d => d.i < d.j);
const referenceLines = [
{ x: 0.46, label: "Intimate Distance", dx: -0.1 },
{ x: 1.2, label: "Personal Distance", dx: -0.2 },
{ x: 3.6, label: "Social Distance", dx: -0.4 },
{ x: 7.6, label: "Public Distance (close)", dx: -0.8 },
{ x: 7.7, label: "Public Distance (far)", dx: +0.9 }
];
return Plot.plot({
grid: "true",
x: {
nice: true,
type: "pow",
ticks: 10,
exponent: 0.5,
label: "Distance in meters"
},
y: {
nice: true,
percent: true
},
// height: 800,
width: 900,
facet: {
data: nonRepeatedData,
y: "technology",
x: "audio",
label: null,
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({ stroke: "#aaa" }),
Plot.tickX(referenceLines, {
x: "x",
stroke: "#222"
}),
Plot.text(referenceLines, {
x: d => d.x + d.dx,
text: "label",
rotate: -90,
textAnchor: "start",
dx: -14,
fill: "#999"
}),
Plot.lineY(
nonRepeatedData,
Plot.normalizeY({
basis: "sum",
...Plot.binX(
{
y: "count"
},
{
x: "distance",
stroke: "subGroup"
}
)
})
)
// Plot.tickY([0])
]
});
}
Plot.binX(
{
y: "count"
},
{
x: "distance",
stroke: "subGroup"
}
)
Same chart with a different library, to make it interactive
// vl
// .markLine()
// .encode(
// vl
// .x()
// .fieldQ("distance")
// .bin({ step: 0.1 })
// .scale({ type: "sqrt" })
// .axis({ tickCount: 1 }),
// vl.y().count(),
// vl.stroke().fieldN("subGroup"),
// vl.column().fieldN("audio"),
// vl.row().fieldN("technology")
// )
// .width(250)
// .height(200)
// .data(data)
// .render()
Number of records by time
// vl
// .markBar({ tooltip: true })
// .encode(
// vl
// .x()
// .fieldT("date")
// .timeUnit("yearmonthdatehoursminutesseconds")
// .scale({ type: "sqrt" }),
// vl.fill().average("distance"),
// vl.y().count()
// )
// .data(data)
// .render()
data[0]
// angles = vl
// .markPoint({ opacity: 0.2, size: 1 })
// .encode(
// vl.x().fieldQ("x").axis(null),
// vl.y().fieldQ("y").axis(null),
// vl.stroke().fieldN("subGroup"),
// vl.column().fieldN("audio"),
// vl.row().fieldN("technology")
// )
// .width(350)
// .height(350)
// .data(data)
// .render()
// {
// return vl
// .markPoint({ opacity: 0.1, size: 1 })
// .encode(
// vl.x().fieldQ("x").axis(null),
// vl.y().fieldQ("y").axis(null),
// vl.column().fieldN("i"),
// vl.row().fieldN("condition"),
// vl.color().fieldN("j")
// )
// .width(150)
// .height(150)
// .data(data)
// .render();
// }
import { vl } from "@vega/vega-lite-api-v5"
originalData = (await FileAttachment("distances_smallv3@1.csv.zip")
.zip()
.then(res => res.file("distances_smallv3.csv").csv())).map(d => {
d.audio = d["group"].slice(0, 1) % 2 ? "Cocktail" : "Bubble";
d.technology = +d["group"].slice(0, 1) <= 2 ? "HMD" : "PC";
d.subGroup = d["group"].slice(2, 3);
d.x = d.distance * Math.cos(d.angle);
d.y = d.distance * Math.sin(d.angle);
d.condition = d.audio + " " + d.technology;
return d;
})
// angleData = FileAttachment("angular.csv").csv()
// dates = {
// const datesDistances = Array.from(
// d3.group(originalData, (d) => d.date).keys()
// );
// const datesAngles = Array.from(d3.group(angleData, (d) => d.date).keys());
// return [["distance", "angle"]].concat(
// datesDistances.map((d, i) => [d, datesAngles[i]])
// );
// }
// dates.filter(([a, b]) => a != b)
import {navio} from "@john-guerra/navio"
import { dataInput } from "@john-guerra/data-input"
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.
