{
await visibility();
const mysvg = html`
<!-- How do I require this properly?? -->
<script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
<svg version="1.1" id="svg2" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path id="D" class="st1" d="${D}" transform="scale(0.5)"/>
<path id="tree" class="st1" d="${tree}">
</svg>`;
var box = $("svg2");
var tl = new gs.TimelineLite({paused:true}),
circle = document.getElementById("D");
tl.to(circle, {morphSVG:"#tree"}, "+=1")
.to(circle, {morphSVG:circle}, "+=1");
box.on('mouseover', function(){
tl.play();
}).on('mouseout', function(){
tl.reverse();
});
return mysvg;
}
md `# D3: This also doesn't work yet`
// https://bost.ocks.org/mike/path/
// https://www.andyshora.com/tweening-shapes-paths-d3-js.html
chart = {
d3.select('myPath')
.transition()
.duration(1000)
.attrTween('d', function () {
var startPath = d3.select('#path1').attr('d'),
endPath = d3.select('#path2').attr('d');
return d3.morphPath(startPath, endPath);
});
}
d3 = require("d3@6")
gsap = gs.gsap
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.
