Public
Edited
Jan 24, 2024
function mpgData(brand,size){
var arr = [];
var stroke = brand == 'toyota' ? "#0000ff" : "#cdcdcd";
while(arr.length < size){
var r = (Math.random() * 2) + 25;
arr.push({"brand":brand,"mpg":r,stroke:stroke,date:arr.length});
};
if(true && brand !=="toyota"){//true cuts out other brand data
var fractionalData=[],keep=4;
arr.forEach((obj,i)=>{if(i%keep == 0 ){fractionalData.push(obj)}});
return fractionalData;
}
return arr
}
numMpgs=100
mpg=[mpgData("toyota",numMpgs),mpgData("ford",numMpgs),mpgData("gm",numMpgs),mpgData("honda",numMpgs)]
toyotaMpg= mpg[0]
toyMap = new Map();
toyotaMpg.map((obj,ind)=>{
toyMap.set(ind,obj)
})
toyMap
withoutToyota = mpg
flattenedMpg=withoutToyota.flatMap((d)=>d)
Plot.plot({
grid: true,
fy:{domain:["ford", "gm", "honda"]},
marks: [
Plot.frame(),
Plot.line(flattenedMpg, {
y: "mpg",
x:"date",
z:'brand',
fy: "brand",
stroke: "stroke"
}),
Plot.lineY(toyotaMpg, {
y: "mpg",
x: "date",
z:'brand',
stroke:"stroke"
}),
Plot.tip(flattenedMpg, Plot.pointerX({x: "date",y:"mpg",fy:"brand",title:tipTitle}))
]
})
tipTitle = (d,b,c)=>{
if(d.brand=="toyota"){return null};
var dateStr = d.date;
var brandStr = d.brand+": "+d.mpg;
var toyotaData = toyMap.get(d.date);
var toyotaStr = "toyota: "+ toyotaData.mpg;
return dateStr +"\n"+brandStr+"\n"+toyotaStr;
}
Plot.plot({
grid: true,
facet:{data:flattenedMpg, y:'brand'},
fy:{domain:["ford", "gm", "honda"]},
marks: [
Plot.frame(),
Plot.line(flattenedMpg, {
y: "mpg",
x:"date",
stroke: "stroke",
//tip:true,
//title:filTipFunction
}),
Plot.lineY(toyotaMpg, {
y: "mpg",
x: "date",
stroke:"stroke",
}),
Plot.tip(toyotaMpg, Plot.pointerX({x: "date",y:"mpg",title:filTipFunction}))
]
})
groupTipTitle = (d,b,c)=>{
var dateStr = d[0].date;
var brandStr = '';
d.forEach((pt)=>{brandStr +=pt.brand+": "+pt.mpg+"\n"});
//debugger
return dateStr +"\n"+brandStr
}
filTipFunction = {
const tips = d3.rollup(
flattenedMpg,
(v) => v.map(({ brand, mpg }) => `${brand}: ${mpg}`).join("\n"),
(d) => d.date
);
return ({ date }) => tips.get(date);
}
filTipOneBrand = {
const tips = d3.rollup(
flattenedMpg,
(v) => v.map(({ brand, mpg }) => `${brand}: ${mpg}`).join("\n"),
(d) => d.date
);
return ({ date }) => tips.get(date);
}
Plot.plot({
grid: true,
marks: [
Plot.frame(),
Plot.line(flattenedMpg, {
y: "mpg",
x:"date",
z:'brand',
stroke: "stroke",
tip:true,
title:(d)=>d.brand+": "+d.mpg,
}),
//Plot.tip(flattenedMpg, Plot.pointerX(Plot.groupX({y:"identity"}, {x: "date",y:"mpg",fx:tipFxFacet})))
]
})
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.
