I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
vl
.markPoint({ tooltip: true })
.encode(
vl.x().fieldO("date").axis({
labelOverlap: "greedy",
labelExpr: "utcFormat(datum.value, '%A')"
}),
vl.y().fieldN("group"),
vl.row().fieldN("condition")
)
.data(data)
.width(800)
.height(100)
.render()
import { vl } from "@vega/vega-lite-api-v5"
1 % 2 ? "Cocktail" : "Bubble"
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 ? "VR" : "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.timestamp = new Date(d.date);
return d;
})
truncate = (d) => new Date(d).setMilliseconds(0)
import { zip, zipreader } from "@fil/jszip"
zipreader(FileAttachment("distances_smallv3@1.csv.zip"))
// 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"
import {Scrubber} from "@mbostock/scrubber"
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.
