Public
Edited
Sep 6, 2022
lbChart = {
// screen.height / screen.width
console.log(` screenHeight : ${screen.height}, screenWidth : ${screen.width}, width : ${width}`)
// if (yForceToggle === "Single") {
// beeswarm.setIsMerged(true)
// } else {
// beeswarm.setIsMerged(false)
// }
// let screenRatio = screen.width / screen.height
//let height = screen.height
//let height = width * screen.height / screen.width
let screenRatio = screen.width / screen.height
let height = 500//width * screen.height / screen.width
console.log(` screen.width : ${screen.width}, screen.height : ${screen.height}, screenRatio : ${screenRatio}`)
let uniqueIDs = ItemTools.uniquesForField(userData.nodes, d=>d.userID)
let beeswarm = new Beeswarm(userData.nodes,
{
width: width,
height: height,
margin: {top: 80, right: 10, bottom: 58, left: 80},
includeColorLegend:true,
includeSizeLegend:false,
radiusFunc: d=>Math.min(3600, d.engagement_secs),
radiusRange: [2, 12],
// radiusDomainField: 'engagement_secs',
// forcedRadiusDomain: [0,3600],
// colorDomainField: 'type',
// colorFunc:d=>
colorFunc: d => { return uat.colorForFeatureType(d.type)},
yOrdinals: Array.from(new Array(24).keys()),//uniqueIDs,
xValueFunc: d=>d.timestamp,
yValueFunc: d=>parseInt(d.session_start_local_hour),
isMerged: (yForceToggle === "Single"),
//timelineEvents : [],//timelineEvents,
tooltipHTMLFunc: d=> yvActivityPopupHTMLLabelForNode(d),
})
//beeswarm.createBaseGraph(metaTitle)
beeswarm.createGraph()
// if (userData.brazeTimelineEvents) {
// addTimeline(userData.brazeTimelineEvents.campains.filter(c => !c.engaged),
// {
// svg: beeswarm.svg,
// xScale: beeswarm.xScale,
// // yScale: beewarm.yScale,
// margin: beeswarm.margin,
// flagStartY: height/2,//-this.margin.bottom,
// flagEndY : height/2 - (height/2 * 2/3) - 20,
// flagLabelColor: "#f0f0f0",
// flagStemColor: "#f0f0f0",
// flagLabelFontSize : 8,
// flagStemSize : 0.5,
// flagLabelRotation: -90,
// })
// addTimeline(userData.brazeTimelineEvents.campains.filter(c => c.engaged),
// {
// svg: beeswarm.svg,
// xScale: beeswarm.xScale,
// // yScale: beewarm.yScale,
// margin: beeswarm.margin,
// flagStartY: height/2,//-this.margin.bottom,
// flagEndY : height/2 - (height/2 * 2/3),
// flagLabelColor: "#5555dd",
// flagStemColor: "#5555dd",
// flagLabelFontSize : 8,
// flagStemSize : 0.75,
// flagLabelRotation: -90,
// })
// addTimeline(userData.brazeTimelineEvents.canvases,
// {
// svg: beeswarm.svg,
// xScale: beeswarm.xScale,
// // yScale: beewarm.yScale,
// margin: beeswarm.margin,
// flagStartY: height/2,//-this.margin.bottom,
// flagEndY : height - beeswarm.margin.bottom - 30,
// flagLabelFontSize : 8,
// flagLabelColor: "#bbaaaa",
// flagStemColor: "#bbaaaa",
// flagStemSize : 0.75,
// flagLabelRotation: 90,
// })
// }
//beeswarm.addSwarm(metaTitle)
while (true) {
beeswarm.tickSimulation()
yield beeswarm.svg.node()
await Promises.delay(20, ()=>{});
}
// let ticks = 10000
// for (let i=0; i<10000; i++) {
// // console.log(`tick`)
// beeswarm.tickSimulation()
// // if (i % Math.max(1,Math.floor(ticks * 0.001)) == 0) {
// if (i % 3 == 0) {
// yield beeswarm.svg.node()
// }
// }
// return graph.node()
// yield graph.node()
// return graph.node()
}
// beeswarm = {
// let screenRatio = screen.width / screen.height
// let height = 600//width * screen.height / screen.width
// console.log(` screen.width : ${screen.width}, screen.height : ${screen.height}, screenRatio : ${screenRatio}`)
// let uniqueIDs = ItemTools.uniquesForField(userData.nodes, d=>d.userID)
// return new Beeswarm(userData.nodes,
// {
// width: width,
// height: height,
// margin: {top: 80, right: 10, bottom: 58, left: 80},
// includeColorLegend:true,
// includeSizeLegend:true,
// radiusFunc: d=>Math.min(3600, d.engagement_secs),
// radiusRange: [1.0, 15],
// // radiusDomainField: 'engagement_secs',
// // forcedRadiusDomain: [0,3600],
// // colorDomainField: 'type',
// // colorFunc:d=>
// colorFunc: d => { return uat.colorForFeatureType(d.type)},
// yOrdinals: Array.from(new Array(24).keys()),//uniqueIDs,
// xValueFunc: d=>d.timestamp,
// yValueFunc: d=>parseInt(d.session_start_local_hour),
// isMerged: true,
// //timelineEvents : [],//timelineEvents,
// tooltipHTMLFunc: d=> yvActivityPopupHTMLLabelForNode(d),
// })
// }
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
userData = {
// return await getAllDataForUserPseudoID("148A7A01DE5C4249922AF312B69BB8FB", "None")
return coryUserData
}
// unknownResults = {
// let unknowns = uat.findAndAccumulatedUncategorizedEvents(rawSamples)
// return unknowns
// }
// import {addTimeline} from "@albright888/libtimeline"
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.
