public servant data scientist (work and opinions here are my own)
Published
Edited
Oct 14, 2021
5 stars
candidates = ["Candidate 1", "Candidate 2","Candidate 3","Candidate 4","Candidate 5","Candidate 6","Candidate 7","Candidate 8"]
legend = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, 60]);
for (let t of keys) {
svg.call(t);
}
svg
.append("g")
.selectAll("rect")
.data(candidates)
.join("rect")
.attr("fill", d=> scale(d).url())
.attr("stroke", "#111")
.attr("width", legendSize)
.attr("height", legendSize)
.attr("x", d=> candidates.indexOf(d)*(legendSize + 5))
.attr("y", 5)
return html`<div style='color:${color};'>${svg.node()}</div>`;
}
keys={
let textureArray = []
for(let i in candidates)
{
let orientation = `${i}/8`
console.log(i)
textureArray.push(
textures
.lines()
.stroke()
.stroke("white")
.background(d3.scaleOrdinal(candidates,d3.schemeTableau10)(candidates[i]))
.orientation(orientation)
.size(lineSize))
}
return textureArray
}
scale=d3.scaleOrdinal(candidates,keys)
legendSize=50
lineSize=10
color="white"
textures = require("textures")
d3=require("d3@7")
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.
