Published
Edited
Mar 17, 2021
3 forks
10 stars
graphic = {
// load the file
const text = await FileAttachment("bumpok-bg@1.svg").text();
const document = (new DOMParser).parseFromString(text, "image/svg+xml");
const svg = d3.select(document.documentElement).remove();
// select the objects
let clusters = svg.selectAll('#streams > g');
//add interaction
clusters.on('click', function(){
// reduce opacity for all
clusters.style('opacity',0.2);
// «this» refers to clicked element
let stream = d3.select(this)
//change its opacity to 1
stream.style('opacity',1)
});
svg.selectAll('#background').on('click', function(){
clusters.style('opacity',1);
});
return svg.node();
}
d3 = require("d3@6")
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.
