Public
Edited
Jan 28
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof selected = TimeSearcher(data, {
x: (d) => d.cycle,
y: (d) => d[y],
id: (d) => d.schoolid,
color: d => d.oecd,
width: 600,

// maxTimelines: 100000,
hasDetails: true,
alphaScale: d3.scalePow().exponent(0.25).range([0.7, 0.1]),
showGroupMedian: true,
overviewHeight: 300
})
Insert cell
Insert cell
viewof selectedCountries = TimeSearcher(data, {
x: (d) => d.cycle,
y: (d) => d[y],
id: (d) => d.cnt,
color: d => d.oecd,
width: 600,

// maxTimelines: 100000,
hasDetails: false,
// alphaScale: d3.scalePow().exponent(0.25).range([1, 0.03]),
showGroupMedian: true,
overviewHeight: 300,
yLabel: y
})
Insert cell
Insert cell
viewof selected2 = TimeSearcher(groupedData, {
x: (d) => d.cycle,
y: (d) => d[`mean_${y}`],
id: (d) => d.schoolid,
color: d => d.oecd,
width: 600,

// maxTimelines: 100000,
hasDetails: false,
alphaScale: d3.scalePow().exponent(0.25).range([1, 0.3]),
showGroupMedian: true,
overviewHeight: 300
})
Insert cell
Inputs.table(
selected2.selectedIds.map((d) => mapDataBySchoolid.get(d))
)
Insert cell
groupedData = d3
.rollups(
data,
(v) => ({
[`mean_${y}`]: d3.mean(v, (d) => d[y]),
oecd: v[0]?.oecd
}),
(d) => d.schoolid,
(d) => d.cycle
)
.map(([schoolid, v]) =>
v.map(([cycle, aggregatedValues]) => ({
schoolid,
cycle,
...aggregatedValues
}))
)
.flat()
Insert cell
Insert cell
viewof selectedStudents = TimeSearcher(data, {
x: (d) => d.cycle,
y: (d) => d[y],
id: (d) => `${d.schoolid}_${d.studentid}`,
color: d => d.oecd,
width: 600,

maxTimelines: 100000,
alphaScale: d3.scalePow().exponent(0.25).range([0.3, 0.01]),
overviewHeight: 300
})
Insert cell
selected2.selectedIds
Insert cell
mapDataBySchoolid = new Map(data.map(d => [d.schoolid, d]))
Insert cell
data = (await FileAttachment("escs_trend.zip").zip())
.file("escs_trend.csv")
.csv({ typed: true })

// FileAttachment("mostRetweeted.csv")
// .csv({ typed: true })
// .then((res) => {
// const minDates = new Map();
// res.map((d) => {
// d.parsedDate = new Date(d.created_at);
// d.rtParsedDate = new Date(d.rt_created_at);
// d.diffTimeToCreation = (d.parsedDate - d.rtParsedDate)/1000;
// const prevMin = minDates.get(d.rt_id_str) || Infinity;

// minDates.set(d.rt_id_str, Math.min(prevMin, d.parsedDate));
// return d;
// });

// const minDate = d3.min(res, (d) => d.parsedDate);
// return res.map((d) =>
// Object.assign(d, { parsedDate: new Date(d.created_at) })
// );
// })
Insert cell
// timesearcher = FileAttachment("TimeSearcher.js")
Insert cell
// navio(data)
Insert cell
// import {navio} from "@john-guerra/navio"
Insert cell
import {TimeSearcher} from "@john-guerra/timesearcher-example"
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