function handleMouseOver(d,i) { // Add interactivity
let nodeIndex = d.target.__data__.hasOwnProperty("index")? d.target.__data__.index : getNodeIndex(switchingGraph.nodes, d.target.__data__.impacted)
//hovered rank interaction
d3.select(`#rank_node_${nodeIndex} circle`)
.attr("fill", "grey")
d3.select(`text#ranktext_node_${nodeIndex}`)
.attr("fill", "#fff")
//node interaction
d3.select(`#node_${nodeIndex} circle.image-mask`)
.attr("stroke", "grey")
}
colors = typeof dataMockDisplayr.colors != "undefined"? d3.index(dataMockDisplayr.colors, o => o._row): null
nodeListMapped = dataMockDisplayr.nodeListMapped
nodesBase = dataMockDisplayr.nodesBase
minBase = dataMockDisplayr.minBase
linksMatrixMapped = dataMockDisplayr.linksMatrixMapped.map(o => {
return {
...o,
significant: typeof o["significant"] != "undefined"? o["significant"] == " TRUE"? 1: 0: 0
}
}
)
hifi = FileAttachment("hifi.png").url()
speaker = FileAttachment("speaker.png").url()
images = {
const entities = Object.keys(dataMockDisplayr.imageUrls)
return entities.map(o => { return { name: o, url: dataMockDisplayr.imageUrls[o][0]} })
}
/*[
{name: "hifi", url: hifi},
{name: "speaker", url: speaker}
]*/
imageMap = d3.index(images, (o) => o.name)
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.
