chart = {
const svg = d3.create("svg")
.attr("viewBox", [-4, -0.5, 32, 25])
.style("max-width", "640px");
const path = svg.append("path")
.attr("fill", "#8b00ff");
for (let i = 0, n = pathStrings.length; true; i = (i + 1) % n) {
yield svg.node();
await path.transition().duration(1500).attrTween("d", function() {
return flubber.interpolate(
pathStrings[i],
pathStrings[(i + 1) % n],
{maxSegmentLength: 0.1}
);
}).end();
}
}
pathStrings = [
"M124.933 7.88167C142.544 -2.62723 164.456 -2.62722 182.067 7.88168L229.913 36.4333L278.429 63.8173C296.286 73.8965 307.243 92.9763 306.996 113.564L306.325 169.5L306.996 225.436C307.243 246.024 296.286 265.104 278.429 275.183L229.913 302.567L182.067 331.118C164.456 341.627 142.544 341.627 124.933 331.118L77.0873 302.567L28.571 275.183C10.7138 265.104 -0.242686 246.024 0.00408241 225.436L0.674527 169.5L0.00408235 113.564C-0.242686 92.9763 10.7138 73.8965 28.571 63.8173L77.0873 36.4333L124.933 7.88167Z",
"M292.592 104.629C312.221 77.2464 308.254 39.2757 282.866 16.54C259.535 -4.34244 224.539 -5.34221 199.093 12.9225L191.424 18.4224C168.152 35.1285 136.858 35.1285 113.586 18.4224L105.916 12.9225C80.4993 -5.31299 45.4736 -4.31294 22.1427 16.54C-3.27434 39.2757 -7.21176 77.2464 12.4167 104.629L18.6461 113.335C35.3655 136.658 35.3655 168.041 18.6461 191.365L13.1807 198.983C-5.03733 224.424 -4.03832 259.483 16.7949 282.836C39.5087 308.277 77.4434 312.219 104.8 292.571L113.497 286.336C136.799 269.601 168.152 269.601 191.453 286.336L199.063 291.807C224.48 310.042 259.506 309.042 282.837 288.189C308.254 265.454 312.192 227.483 292.563 200.1L286.334 191.394C269.614 168.071 269.614 136.688 286.334 113.364L292.563 104.658L292.592 104.629Z",
"M245.525 37.7111C257.697 38.5383 267.388 48.229 268.215 60.4014L270.62 95.7982C270.982 101.117 273.075 106.172 276.581 110.188L299.909 136.919C307.932 146.111 307.932 159.815 299.909 169.007L276.581 195.738C273.075 199.754 270.982 204.809 270.62 210.128L268.215 245.525C267.388 257.697 257.697 267.388 245.525 268.215L210.128 270.62C204.809 270.982 199.754 273.075 195.738 276.581L169.008 299.909C159.815 307.932 146.111 307.932 136.919 299.909L110.188 276.581C106.172 273.075 101.117 270.982 95.7983 270.62L60.4014 268.215C48.229 267.388 38.5383 257.697 37.7112 245.525L35.3058 210.128C34.9443 204.809 32.8507 199.754 29.3452 195.738L6.01672 169.007C-2.00557 159.815 -2.00557 146.111 6.01672 136.919L29.3452 110.188C32.8507 106.172 34.9443 101.117 35.3058 95.7982L37.7112 60.4014C38.5383 48.229 48.229 38.5383 60.4015 37.7111L95.7983 35.3057C101.117 34.9443 106.172 32.8507 110.188 29.3452L136.919 6.01672C146.111 -2.00557 159.815 -2.00557 169.008 6.01672L195.738 29.3452C199.754 32.8507 204.809 34.9443 210.128 35.3057L245.525 37.7111Z",
"M142.81 303.67C149.244 306.678 156.682 306.678 163.116 303.67L186.126 292.909C188.675 291.718 191.413 290.984 194.216 290.742L219.523 288.555C226.6 287.944 233.041 284.225 237.109 278.402L251.656 257.579C253.268 255.272 255.272 253.268 257.579 251.656L278.402 237.109C284.225 233.041 287.944 226.6 288.555 219.523L290.742 194.216C290.984 191.413 291.718 188.675 292.909 186.126L303.67 163.116C306.678 156.682 306.678 149.244 303.67 142.81L292.909 119.8C291.718 117.251 290.984 114.513 290.742 111.71L288.555 86.4027C287.944 79.326 284.225 72.8849 278.402 68.8171L257.579 54.2698C255.272 52.6586 253.268 50.6539 251.656 48.3475L237.109 27.524C233.041 21.7011 226.6 17.9823 219.523 17.3709L194.216 15.1844C191.413 14.9423 188.675 14.2085 186.126 13.0167L163.116 2.25665C156.682 -0.752216 149.244 -0.752216 142.81 2.25665L119.8 13.0167C117.251 14.2085 114.513 14.9423 111.71 15.1844L86.4027 17.3709C79.326 17.9823 72.8849 21.7011 68.8171 27.524L54.2698 48.3475C52.6586 50.6539 50.6539 52.6586 48.3476 54.2698L27.524 68.8171C21.7011 72.8849 17.9824 79.326 17.371 86.4027L15.1845 111.71C14.9423 114.513 14.2085 117.251 13.0168 119.8L2.25665 142.81C-0.752216 149.244 -0.75222 156.682 2.25665 163.116L13.0168 186.126C14.2085 188.675 14.9423 191.413 15.1845 194.216L17.371 219.523C17.9824 226.6 21.7011 233.041 27.524 237.109L48.3476 251.656C50.6539 253.268 52.6586 255.272 54.2698 257.579L68.8171 278.402C72.8849 284.225 79.326 287.944 86.4027 288.555L111.71 290.742C114.513 290.984 117.251 291.718 119.8 292.909L142.81 303.67Z",
"M38.4355 267.564C-12.8118 216.317 -12.8118 133.229 38.4355 81.9814L81.9814 38.4355C133.229 -12.8118 216.317 -12.8118 267.564 38.4355C318.812 89.6828 318.812 172.771 267.565 224.019L224.019 267.564C172.771 318.812 89.6828 318.812 38.4355 267.564Z"
]
flubber = require("flubber@0.4")
d3 = require("d3@5")
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.