myData = [
{ name:"Instagram", read_time:24.45, avg_time:30.1, read_img: "Instagram_PP.svg", avg_img: "Instagram_avgtime.svg" },
{ name:"Facebook", read_time:24.45, avg_time:34.8, read_img: "Facebook_PP.svg", avg_img: "Facebook_avgtime.svg" },
{ name:"Twitter", read_time:17.77, avg_time:34.8, read_img: "Twitter_PP.svg", avg_img: "Twitter_avgtime.svg" },
{ name:"Youtube", read_time:24.71, avg_time:45.6, read_img: "Youtube_PP.svg", avg_img: "Youtube_avgtime.svg" },
{ name:"TikTok", read_time:18.66, avg_time:45.8, read_img: "TikTok_PP.svg", avg_img: "TikTok_avgtime.svg" },
{ name:"Snapchat", read_time:19.61, avg_time:30.4, read_img: "Snapchat_PP.svg", avg_img: "Snapchat_avgtime.svg" },
]
image = svg`<svg width=400 height=300>
<foreignObject width=400 height=300>
<image width=400 autoplay loop muted crossorigin=anonymous>
<source src="FileAttachment(d.read_img).image()"">
</image>
</foreignObject>
</svg>`
graphic = {
// load the file
const text = await FileAttachment("Final_PP.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();
}
<svg>
<line x1="50" x2="10000" y1="0" y2="100" style="stroke: red; stroke-width: 20px"></line>
<img src="${await FileAttachment("Final_PP.svg").url()}" style="height:300px"/>
</svg>
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.
