Published
Edited
Mar 3, 2020
2 forks
{
var uniform =
d3.range(0, 7).map((_,i) => ({
id: i,
size: Math.ceil(d3.randomUniform(1, 3)(_)),
url: image_urls[i]
}));
let pack = data => d3.pack()
.size([width, width])
.padding(0)
(d3.hierarchy({children: data})
.sum(d => d.size))
const root = pack(uniform);
console.log(root.leaves());
const svg_hex = d3.create("svg")
.attr("viewBox", [0, 0, width, width])
const defs = svg_hex.append("defs")
.selectAll("pattern")
.data(root.leaves())
.enter();
defs.append("pattern")
.attr("id", d => "pattern" + d.data.id)
.attr("width", 1)
.attr("height", 1)
.append('image')
.attr("xlink:href", d => d.data.url)
.attr("x", d => -0.05 * d.r * 2)
.attr("y", d => -0.05 * d.r * 2)
.attr("width", d => 1.1 * d.r * 2)
.attr("height", d => 1.1 * d.r * 2);
const container = svg_hex.append("g");
const leaf = container.selectAll("g")
.data(root.leaves())
.enter().append("g")
.attr("transform", d => {
return `translate(${d.x},${d.y})`
});
leaf.append("g")
.append("path")
.attr("d", d => `M${0},${0}${hex(d.r)}`)
.style("fill", d => `url(#pattern${d.data.id})`)
.style("stroke", "#000")
.style("stroke-width", 4)
.on("mouseover", function() {
d3.select(this).style("stroke-opacity", 0.5);
d3.select(this).style("fill-opacity", 0.5);
})
.on("mouseout", function() {
d3.select(this).style("stroke-opacity", 1);
d3.select(this).style("fill-opacity", 1);
});
return svg_hex.node();
}
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.
