Published
Edited
May 25, 2021
1 star
ues=d3.csvParse(await FileAttachment("uelocations.csv").text(),d3.autoType)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
uegraph= vl.markCircle().data(ues)
.encode(
vl.x().fieldQ("X"),
vl.y().fieldQ("Y"),
vl.color().fieldN("GCellID")
).render();
bsplot= {
const bs=vl.markSquare().data(bsloc)
.encode(vl.x().fieldQ("X"),vl.y().fieldQ("Y"),vl.size().value(30),vl.color().value("red"));
const ue=vl.markPoint().data(ues).encode(vl.x().fieldQ("X"),vl.y().fieldQ("Y"));
return vl.layer(bs,ue). render ();
}
CDFplot=function(data,fieldname){
const cdffn={density:fieldname,cumulative:true,as:[fieldname, "cdf"]}
const mouseover = vl
.selectSingle(fieldname)
.on("mouseover")
.encodings("x")
.nearest(false);
cdffn.extent=[-10 ,10];
// const selector=vl.selectInterval().
const encodeData={x:{field:fieldname,type:"quantitative",title:fieldname},y: { field: "cdf", type: "quantitative",title:"CDF" }};
// encodeData.color=vl.color().if(mouseover, vl.value("firebrick")).value("steelblue")
encodeData.tooltip=vl.tooltip(["cdf",fieldname]); //.format(["1.2f"]);
const lines=vl.markLine().data(data).transform(cdffn).encode(encodeData).select(vl.selectInterval().bind('scales'));
const points=vl.markPoint().data(data).select(mouseover)
.transform(
cdffn,
vl.calculate("datum.cdf >= 0.05 ? 0 : 1").as("celledge")
)
.encode(encodeData,
);
const markerline=vl.markRule().data([0]).encode(vl.y().datum(0.05),vl.color("red"));
return vl.layer(lines,points,markerline).render()
}
viewof dd1 =select({title: "Sector",
description: "Please a sector",options:["0","1","2"]})
{
// vl.markLine().data(slsprofile)
const encoding={x:{field:"RxNodeID",type:"quantitative"},y:{field:"BestSINR",type:"quantitative"}};
// encoding.tooltip=vl.tooltip(["RxNodeID","BestRSRP"]);
const line=vl.markLine().data(slsprofile)
.select(
vl.selectInterval().bind('scales').encodings('x') // bind to x-axis scale only
).encode(encoding);
encoding.color=vl.color().value("red");
encoding.size=vl.size().value(2);
// encoding.tooltip=vl.tooltip(["RxNodeID","BestRSRP"]);
const points=vl.markPoint().data(slsprofile).encode(encoding);
const countplt=vl.markBar().data(slsprofile).encode(
{x:{field:"BestRSRPNode",type:"quantitative"},y:{aggregate:"count"}}
).select(vl.selectInterval().bind('scales').encodings('x'));
const errorplt=vl.markPoint().data(slsprofile).encode(
{x:{field:"BestRSRPNode",type:"quantitative"},y:{field:"RxNodeID",type: "quantitative"}}
).select(vl.selectInterval().bind('scales').encodings('x'));
const errorband=vl.markErrorband().data(slsprofile).encode(
{x:{field:"BestRSRPNode",type:"quantitative"},y:{field:"RxNodeID",type: "quantitative"}}
);
return vl.vconcat(vl.layer(line,points),countplt,vl.layer(errorplt,errorband)).render();
}
md ` The selected sector:${dd1}`
bsloc=d3.tsvParse(await FileAttachment("bslocations.txt").text(),d3.autoType)
width
hexpoints=d3.json("https://wilessapi.appspot.com/geom/hexgrid")
radius = 10
Xscale=d3.scaleLinear().domain(d3.extent(ues.map(d=>d.X))).range([20,width-20]);
Yscale=d3.scaleLinear().domain(d3.extent(ues.map(d=>d.Y))).range([20,height-20]);
height=600;
viewof colorBlendEffect = radio({
title: "Colord blending effect",
description: "Select which color blend effect to apply to the circles",
options: [
{ label: "None", value: "none" },
{ label: "Multiply", value: "multiply" },
{ label: "Screen", value: "screen" }
],
value: "multiply"
})
hexgrid=d3.json("https://wilessapi.appspot.com/geom/hexrandu")
xhexgrid=[{"X":0,"Y":0,"Z":0},{"X":2999.9119954319717,"Y":-0.0000056764911278150976,"Z":0},{"X":1499.9559927999996,"Y":2597.9999886470173,"Z":0},{"X":-1499.9560026319718,"Y":2597.9999943235084,"Z":0},{"X":-2999.9119954319717,"Y":0.0000056764911278150976,"Z":0},{"X":-1499.9559927999996,"Y":-2597.9999886470173,"Z":0},{"X":1499.9560026319718,"Y":-2597.9999943235084,"Z":0},{"X":5999.823990863943,"Y":-0.000011352982255630195,"Z":0},{"X":4499.867988231971,"Y":2597.9999829705257,"Z":0},{"X":2999.9119855999993,"Y":5195.999977294035,"Z":0},{"X":-0.000009831972420215607,"Y":5195.999982970526,"Z":0},{"X":-2999.9120052639437,"Y":5195.999988647017,"Z":0},{"X":-4499.867998063944,"Y":2597.9999999999995,"Z":0},{"X":-5999.823990863943,"Y":0.000011352982255630195,"Z":0},{"X":-4499.867988231971,"Y":-2597.9999829705257,"Z":0},{"X":-2999.9119855999993,"Y":-5195.999977294035,"Z":0},{"X":0.000009831972420215607,"Y":-5195.999982970526,"Z":0},{"X":2999.9120052639437,"Y":-5195.999988647017,"Z":0},{"X":4499.867998063944,"Y":-2597.9999999999995,"Z":0}]
d3
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.
