chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.selectAll("circle")
.data(seraphon)
.join("circle")
.filter(d => d.char)
.attr("cx", d => x(d.oppTn))
.attr("cy", d => y(eDamage(d)))
.attr("r", 5)
.attr("fill", d => catFill(d.char));
svg.append("g")
.attr("fill", "none")
.selectAll("path")
.data(snest)
.join("path")
.attr("stroke", "black")
.attr("d", ([,d]) => line(d))
return svg.node();
}
test_pmf = FileAttachment("test_pmf.csv").csv()
wb = FileAttachment("seraphon3 (1).xlsx").xlsx()
seraphon = wb.sheet(0, {headers: true}).slice(0,12)
nHits = d => {
return [1, d.strength >= d.oppTn & 1,
d.strength > d.oppTn & 1].reduce((a,b) => a+b)
}
eDamage = d => {return (nHits(d) * d.hit + d.crit)/6*d.attacks}
seraphon.map(s => eDamage(s))
snest = d3.group(seraphon, d=>d.char)
height = 400
x = d3.scaleLinear()
.domain(d3.extent(seraphon, s => s.oppTn)).nice()
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain(d3.extent(seraphon, s => eDamage(s))).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
catFill = d3.scaleOrdinal(d3.schemeAccent)
.domain(...new Set(seraphon.map(s => s.char)))
catLabels = g => g
.attr('transform', "translate(10, 10)")
.attr('class', 'labels')
.selectAll('label')
.data(snest[0].map(s => s.s.char)).enter().append('g') .attr('transform', function(d, i) { return "translate(0," + i * 10 + ")"; })
.append('circle')
.attr('r', x.rangeBand()/2)
.append('text') .text(function(d) { return d; })
.attr('dy', '0.4em')
.attr('x', 10);
margin = ({top: 25, right: 20, bottom: 35, left: 40})
line = d3.line()
.x(d => x(d.oppTn))
.y(d => y(eDamage(d)))
line(snest.get("salamander"))
snest.get("salamander")
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.
