Comparative Judgement for Schools
firstLines = data.filter(d => d.line != "")
signs = new Map([].concat(
data.negatives.map(d => [d, -1]),
data.positives.map(d => [d, +1])
))
bias = d3.rollups(data, v => d3.sum(v, d => d.value * Math.min(0, signs.get(d.category))), d => d.name)
.sort(([, a], [, b]) => d3.ascending(a, b))
series = d3
.stack()
.keys([].concat(data.negatives.slice().reverse(), data.positives))
.value(
([, value], category) => signs.get(category) * (value.get(category) || 0)
)
.offset(d3.stackOffsetDiverging)(
d3.rollups(
data,
data => d3.rollup(data, ([d]) => d.value, d => d.category),
d => d.name
)
)
x = d3.scaleLinear()
.domain(d3.extent(series.flat(2)))
.rangeRound([margin.left, width - margin.right])
y = d3.scaleBand()
.domain(bias.map(([name]) => name))
.rangeRound([margin.top, height - margin.bottom])
.padding(2 / 33)
color = d3.scaleOrdinal()
.domain([].concat(data.negatives, data.positives))
.range(d3.schemeSpectral[data.negatives.length + data.positives.length])
xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x)
.ticks(width / 80)
.tickFormat(formatValue)
.tickSizeOuter(0))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", x(0) + 20)
.attr("y", -24)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.positive))
.call(g => g.append("text")
.attr("x", x(0) - 20)
.attr("y", -24)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text(data.negative))
yAxis = g => g
.call(d3.axisLeft(y).tickSizeOuter(0))
.call(g => g.selectAll(".tick").data(bias).attr("transform", ([name, min]) => `translate(${x(min)},${y(name) + y.bandwidth() / 2})`))
.call(g => g.select(".domain").attr("transform", `translate(${x(0)},0)`))
formatValue = {
const format = d3.format(data.format || "");
return x => format(Math.abs(x));
}
height = bias.length * 33 + margin.top + margin.bottom
margin = ({top: 40, right: 30, bottom: 0, left: 80})
d3 = require("d3@5", "d3-array@2")
import {swatches} from "@d3/color-legend"
import { table } from "@tmcw/tables/2"
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.
