colorCategoryUH = colorCategory(merges)
chart(data)
colorCategory = (same) => {
const colorScale = d3.scaleOrdinal(d3.schemeCategory10)
const cache = new Map()
const coord = new Map()
const groupYIndex = new Map() // [d] contains y index
const groupIndex = new Map() // [d] contains same category counter...
let fullIndex = 0
const background = (name) => {
if (cache.has(name)) {
return cache.get(name)
}
for(let i = 0; i < same.length; i++) {
if (same[i].indexOf(name) !== -1) {
if (!groupIndex.has(i)) {
let y = fullIndex++
groupIndex.set(i, 0)
groupYIndex.set(i, y)
} else {
groupIndex.set(i, groupIndex.get(i)+1)
}
let y = null
let index = groupIndex.get(i)
coord.set(name, [groupIndex.get(i), groupYIndex.get(i)])
let c = d3.color(colorScale(same[i][0])).brighter(index*0.4)
if (index > 0) {
c = saturate(c, -index)
}
cache.set(name, c)
coord.set(name, [index, groupYIndex.get(i)])
console.log("Set " + name + " " + index + "," + groupYIndex.get(i))
return c
}
}
let nc = d3.color(colorScale(name))
cache.set(name, nc)
coord.set(name, [0, fullIndex])
console.log("Set " + name + " " + 0 + "," + fullIndex)
fullIndex++
return nc
}
const foreground = (name) => {
let b = background(name).rgb()
let lum = luminance([b.r, b.g, b.b])
return lum > 200 ? "#000000" : "#ffffff"
}
const x = (name) => {
background(name)
return coord.get(name)[0]
}
const y = (name) => {
background(name)
return coord.get(name)[1]
}
return {
background: background,
foreground: foreground,
x: x,
y: y
}
}
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.
