Published
Edited
Sep 16, 2020
md`# Pattern image`
faceURL = await FileAttachment("face.jpg").url()
chart = {
let svg = d3
.create("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
let defs = svg.append("defs");
let pattern = defs
.append("pattern")
.attr("id", "face")
.attr("width", 1)
.attr("height", 1)
.attr("patternUnits", "objectBoundingBox")
.append("image")
.attr("xlink:href", faceURL)
.attr("x", 0)
.attr("y", 0)
.attr("width", 100)
.attr("height", 100);
let g = svg
.append("g")
.attr("transform", "translate(" + chartPadding + "," + chartPadding + ")");
let circle = g
.append("g")
.attr(
"transform",
"translate(" + chartWidth / 2 + "," + chartHeight / 2 + ")"
)
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 50)
.style("fill", `url(#face)`)
.style("stroke", "black")
.attr("transform-origin", "0% 0%")
.on("mouseover", function(d) {
d3.select(this)
.transition()
.attr("transform", "scale(2)");
})
.on("mouseout", function(d) {
d3.select(this)
.transition()
.attr("transform", "scale(1)");
});
return svg.node();
}
svgWidth = d3.min([width, 400])
svgHeight = svgWidth
chartPadding = 50
chartHeight = svgHeight - chartPadding - chartPadding
chartWidth = svgWidth - chartPadding - chartPadding
function roundValue(n) {
n = Math.round(n * 10) / 10;
return n;
}
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.
