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>
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.