viewof dieSingular = Die({values: ["deeppink", "red", "orange", "gold", "green", "blue"], face: colors})
viewof dicePlural = Die({numDice:5})
colors = function() {
return sel => sel.selectAll(".pip")
// .data(d => pips[d])
.data(d => [d]) //should be an integer between 1 and n
.join(enter => enter.append("circle")
.attr("class", `pip`)
.attr("r", 15)
.attr("fill", "#000"),
update => update,
exit => exit.remove() )
.attr("fill", d => d)
}
Die = function({value = 0,
numDice = 1, numSides = 6,
values= [1,2,3,4,5,6],
random = () => Math.floor(Math.random() * numSides),
face = pips,
callback= d => d} = {}) {
console.log("defaults", value, numDice, numSides, values, random, face, random())
const roll = () => {
const dieRolls = new Array(numDice).fill()
.map(d => values[random()])
console.log("rolls", dieRolls)
// .map((d,i) => values[d] )
//return an array of numDice, each with numSides, mapped to some values
return dieRolls
}
//create SVG to display the numDice
const svg = d3.create("svg")
.attr("width", numDice * 100)
.attr("height", 100)
const g = svg.append("g").attr("transform", `translate(0 50)`)
const element = svg.node()
const init
element.value = (value.length != numDice) ? roll() : values[value]
// console.log("Die",element.value)
//update the roll text
const render = function(sel) {
const dice = sel.selectAll(".die")
.data(element.value)
.join(enter => {
const c = enter.append("g")
.attr("transform", (d,i) => `translate( ${i*100 + 50} 0)`)
.attr("class", "die")
c.append("rect")
.attr("width", 84)
.attr("height", 84)
.attr("x", -42)
.attr("y", -42)
.attr("rx", 10)
.attr("stroke", "#000")
.attr("fill", "oldlace")
c.append("circle")
.attr("r", 40)
.attr("fill", "papayawhip")
.attr("stroke", "navajowhite")
return c
},
update=> update,
exit => exit.remove())
dice.call(face({radius: 40}))
}
render(g)
element.onmousedown = () => {
//TODO: add a "pressed" state
}
element.onclick = () => {
element.value = roll()
render(g)
g.transition()
.duration(0)
.style("opacity", 0)
g.transition()
.delay(500)
.duration(250)
.style("opacity", 1)
element.dispatchEvent(new Event("input", {bubbles: true}));
};
return element
}
pips = function({radius}) {
const scale = d3.scaleLinear([-1, 1], [-radius/2, radius/2])
const pips = {
1: [[ 0, 0]],
2: [[ 1,-1], [-1, 1]],
3: [[ 0, 0], [ 1,-1], [-1, 1]],
4: [[-1,-1], [ 1,-1], [-1, 1], [ 1,1]],
5: [[ 0, 0], [-1,-1], [ 1,-1], [-1,1], [ 1, 1]],
6: [[-1,-1], [ 1,-1], [-1, 0], [ 1,0], [-1, 1], [1, 1]]
}
return sel => sel.selectAll(".pip")
.data(d => pips[d])
// .data(d => [...pips[1], colors[d])
.join(enter => enter.append("circle")
.attr("class", d => `pip`)
.attr("r", 5)
.attr("fill", "#000"),
update => update,
exit => exit.remove() )
.attr("cx", d => scale(d[0]))
.attr("cy", d => scale(d[1]))
}
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.
