Developer, artist, writer, and mother. Core committer to @pydanny 💘My notebooks are for my own personal learning purposes. If you see anything I could be doing better, suggestions would be a huge help.
Published
Edited
Oct 14, 2019
kale = svg`<svg xmlns="http://www.w3.org/2000/svg" width="281.181" height="504.054"><path fill="#052" d="M154.538 410.7c-60.12-39.308-36.997-60.119-36.997-60.119s-46.245 11.562-55.495-20.81c-9.249-32.372-13.873-83.243-13.873-83.243S-21.196 170.223 6.55 91.605C34.3 12.987 112.917 29.173 112.917 29.173s11.561-41.621 67.056-25.435c55.495 16.186 69.369 87.867 69.369 108.678 0 20.81-13.874 39.308-13.874 39.308s32.372 30.06 43.934 71.681c11.561 41.622-36.997 78.618-36.997 78.618s41.621 23.123 36.997 46.246c-4.625 23.123-53.183 30.06-50.87 46.246 2.312 16.186 4.624 53.183 4.624 53.183l-18.498 6.936s-9.25-30.06-20.811-41.62c-11.561-11.562-39.309-2.313-39.309-2.313z"/><path fill="#71c837" d="M129.103 100.854l100.222 403.2 16.186-6.937L137.196 98.542z"/><path fill="#71c837" d="M185.754 290.462s21.864-28.684 30.06-46.246c8.093-17.342 11.561-34.684 11.561-34.684h6.937s-9.827 39.887-20.233 54.917c-10.405 15.03-26.013 35.262-26.013 35.262zM62.046 160.974s27.17 31.216 43.934 38.152c16.764 6.937 52.605 8.093 52.605 8.093l-2.89-10.983s-32.95 3.469-48.559-5.78c-15.608-9.25-40.465-30.06-40.465-30.06zM177.083 291.618s-36.997-5.78-49.714-10.983c-13.376-5.472-24.857-23.123-24.857-23.123l-2.313 1.734s13.296 21.967 25.435 27.17c12.14 5.202 55.495 13.873 55.495 13.873zM159.163 188.721s18.264-31.298 20.232-54.917c1.156-13.874 2.312-39.887 2.312-39.887l4.047-1.156s.578 25.435.578 36.997c0 11.561-8.093 41.043-12.718 51.448-4.624 10.405-12.14 18.499-12.14 18.499z"/></svg>`
md`It looks like when you use the \`svg\` function, you get a \`SVGSVGElement\`:`
kale
{
let x = svg`<svg xmlns="http://www.w3.org/2000/svg" width="281.181" height="504.054"><path fill="#052" d="M154.538 410.7c-60.12-39.308-36.997-60.119-36.997-60.119s-46.245 11.562-55.495-20.81c-9.249-32.372-13.873-83.243-13.873-83.243S-21.196 170.223 6.55 91.605C34.3 12.987 112.917 29.173 112.917 29.173s11.561-41.621 67.056-25.435c55.495 16.186 69.369 87.867 69.369 108.678 0 20.81-13.874 39.308-13.874 39.308s32.372 30.06 43.934 71.681c11.561 41.622-36.997 78.618-36.997 78.618s41.621 23.123 36.997 46.246c-4.625 23.123-53.183 30.06-50.87 46.246 2.312 16.186 4.624 53.183 4.624 53.183l-18.498 6.936s-9.25-30.06-20.811-41.62c-11.561-11.562-39.309-2.313-39.309-2.313z"/><path fill="#71c837" d="M129.103 100.854l100.222 403.2 16.186-6.937L137.196 98.542z"/><path fill="#71c837" d="M185.754 290.462s21.864-28.684 30.06-46.246c8.093-17.342 11.561-34.684 11.561-34.684h6.937s-9.827 39.887-20.233 54.917c-10.405 15.03-26.013 35.262-26.013 35.262zM62.046 160.974s27.17 31.216 43.934 38.152c16.764 6.937 52.605 8.093 52.605 8.093l-2.89-10.983s-32.95 3.469-48.559-5.78c-15.608-9.25-40.465-30.06-40.465-30.06zM177.083 291.618s-36.997-5.78-49.714-10.983c-13.376-5.472-24.857-23.123-24.857-23.123l-2.313 1.734s13.296 21.967 25.435 27.17c12.14 5.202 55.495 13.873 55.495 13.873zM159.163 188.721s18.264-31.298 20.232-54.917c1.156-13.874 2.312-39.887 2.312-39.887l4.047-1.156s.578 25.435.578 36.997c0 11.561-8.093 41.043-12.718 51.448-4.624 10.405-12.14 18.499-12.14 18.499z"/></svg>`;
x.setAttribute('transform', 'translate(200, 20)');
return d3.select(x).node();
}
//kale.setAttribute('transform', 'rotate(90)')
{
let y = svg`<svg xmlns="http://www.w3.org/2000/svg" width="281.181" height="504.054"><path fill="#052" d="M154.538 410.7c-60.12-39.308-36.997-60.119-36.997-60.119s-46.245 11.562-55.495-20.81c-9.249-32.372-13.873-83.243-13.873-83.243S-21.196 170.223 6.55 91.605C34.3 12.987 112.917 29.173 112.917 29.173s11.561-41.621 67.056-25.435c55.495 16.186 69.369 87.867 69.369 108.678 0 20.81-13.874 39.308-13.874 39.308s32.372 30.06 43.934 71.681c11.561 41.622-36.997 78.618-36.997 78.618s41.621 23.123 36.997 46.246c-4.625 23.123-53.183 30.06-50.87 46.246 2.312 16.186 4.624 53.183 4.624 53.183l-18.498 6.936s-9.25-30.06-20.811-41.62c-11.561-11.562-39.309-2.313-39.309-2.313z"/><path fill="#71c837" d="M129.103 100.854l100.222 403.2 16.186-6.937L137.196 98.542z"/><path fill="#71c837" d="M185.754 290.462s21.864-28.684 30.06-46.246c8.093-17.342 11.561-34.684 11.561-34.684h6.937s-9.827 39.887-20.233 54.917c-10.405 15.03-26.013 35.262-26.013 35.262zM62.046 160.974s27.17 31.216 43.934 38.152c16.764 6.937 52.605 8.093 52.605 8.093l-2.89-10.983s-32.95 3.469-48.559-5.78c-15.608-9.25-40.465-30.06-40.465-30.06zM177.083 291.618s-36.997-5.78-49.714-10.983c-13.376-5.472-24.857-23.123-24.857-23.123l-2.313 1.734s13.296 21.967 25.435 27.17c12.14 5.202 55.495 13.873 55.495 13.873zM159.163 188.721s18.264-31.298 20.232-54.917c1.156-13.874 2.312-39.887 2.312-39.887l4.047-1.156s.578 25.435.578 36.997c0 11.561-8.093 41.043-12.718 51.448-4.624 10.405-12.14 18.499-12.14 18.499z"/></svg>`;
y.setAttribute('transform', 'rotate(90)');
return d3.select(y).node();
}
{
let z = svg`<svg xmlns="http://www.w3.org/2000/svg" width="281.181" height="504.054"><path fill="#052" d="M154.538 410.7c-60.12-39.308-36.997-60.119-36.997-60.119s-46.245 11.562-55.495-20.81c-9.249-32.372-13.873-83.243-13.873-83.243S-21.196 170.223 6.55 91.605C34.3 12.987 112.917 29.173 112.917 29.173s11.561-41.621 67.056-25.435c55.495 16.186 69.369 87.867 69.369 108.678 0 20.81-13.874 39.308-13.874 39.308s32.372 30.06 43.934 71.681c11.561 41.622-36.997 78.618-36.997 78.618s41.621 23.123 36.997 46.246c-4.625 23.123-53.183 30.06-50.87 46.246 2.312 16.186 4.624 53.183 4.624 53.183l-18.498 6.936s-9.25-30.06-20.811-41.62c-11.561-11.562-39.309-2.313-39.309-2.313z"/><path fill="#71c837" d="M129.103 100.854l100.222 403.2 16.186-6.937L137.196 98.542z"/><path fill="#71c837" d="M185.754 290.462s21.864-28.684 30.06-46.246c8.093-17.342 11.561-34.684 11.561-34.684h6.937s-9.827 39.887-20.233 54.917c-10.405 15.03-26.013 35.262-26.013 35.262zM62.046 160.974s27.17 31.216 43.934 38.152c16.764 6.937 52.605 8.093 52.605 8.093l-2.89-10.983s-32.95 3.469-48.559-5.78c-15.608-9.25-40.465-30.06-40.465-30.06zM177.083 291.618s-36.997-5.78-49.714-10.983c-13.376-5.472-24.857-23.123-24.857-23.123l-2.313 1.734s13.296 21.967 25.435 27.17c12.14 5.202 55.495 13.873 55.495 13.873zM159.163 188.721s18.264-31.298 20.232-54.917c1.156-13.874 2.312-39.887 2.312-39.887l4.047-1.156s.578 25.435.578 36.997c0 11.561-8.093 41.043-12.718 51.448-4.624 10.405-12.14 18.499-12.14 18.499z"/></svg>`;
return d3
.select(z)
.transition()
.duration(7500)
.attr('transform', 'rotate(180)')
.node();
}
{
let svgNode = svg`<svg xmlns="http://www.w3.org/2000/svg" width="281.181" height="504.054"><path fill="#052" d="M154.538 410.7c-60.12-39.308-36.997-60.119-36.997-60.119s-46.245 11.562-55.495-20.81c-9.249-32.372-13.873-83.243-13.873-83.243S-21.196 170.223 6.55 91.605C34.3 12.987 112.917 29.173 112.917 29.173s11.561-41.621 67.056-25.435c55.495 16.186 69.369 87.867 69.369 108.678 0 20.81-13.874 39.308-13.874 39.308s32.372 30.06 43.934 71.681c11.561 41.622-36.997 78.618-36.997 78.618s41.621 23.123 36.997 46.246c-4.625 23.123-53.183 30.06-50.87 46.246 2.312 16.186 4.624 53.183 4.624 53.183l-18.498 6.936s-9.25-30.06-20.811-41.62c-11.561-11.562-39.309-2.313-39.309-2.313z"/><path fill="#71c837" d="M129.103 100.854l100.222 403.2 16.186-6.937L137.196 98.542z"/><path fill="#71c837" d="M185.754 290.462s21.864-28.684 30.06-46.246c8.093-17.342 11.561-34.684 11.561-34.684h6.937s-9.827 39.887-20.233 54.917c-10.405 15.03-26.013 35.262-26.013 35.262zM62.046 160.974s27.17 31.216 43.934 38.152c16.764 6.937 52.605 8.093 52.605 8.093l-2.89-10.983s-32.95 3.469-48.559-5.78c-15.608-9.25-40.465-30.06-40.465-30.06zM177.083 291.618s-36.997-5.78-49.714-10.983c-13.376-5.472-24.857-23.123-24.857-23.123l-2.313 1.734s13.296 21.967 25.435 27.17c12.14 5.202 55.495 13.873 55.495 13.873zM159.163 188.721s18.264-31.298 20.232-54.917c1.156-13.874 2.312-39.887 2.312-39.887l4.047-1.156s.578 25.435.578 36.997c0 11.561-8.093 41.043-12.718 51.448-4.624 10.405-12.14 18.499-12.14 18.499z"/></svg>`;
while (true) {
yield d3.select(svgNode).node();
}
}
{
const a = svg`<svg xmlns="http://www.w3.org/2000/svg" width="281.181" height="504.054"><path fill="#052" d="M154.538 410.7c-60.12-39.308-36.997-60.119-36.997-60.119s-46.245 11.562-55.495-20.81c-9.249-32.372-13.873-83.243-13.873-83.243S-21.196 170.223 6.55 91.605C34.3 12.987 112.917 29.173 112.917 29.173s11.561-41.621 67.056-25.435c55.495 16.186 69.369 87.867 69.369 108.678 0 20.81-13.874 39.308-13.874 39.308s32.372 30.06 43.934 71.681c11.561 41.622-36.997 78.618-36.997 78.618s41.621 23.123 36.997 46.246c-4.625 23.123-53.183 30.06-50.87 46.246 2.312 16.186 4.624 53.183 4.624 53.183l-18.498 6.936s-9.25-30.06-20.811-41.62c-11.561-11.562-39.309-2.313-39.309-2.313z"/><path fill="#71c837" d="M129.103 100.854l100.222 403.2 16.186-6.937L137.196 98.542z"/><path fill="#71c837" d="M185.754 290.462s21.864-28.684 30.06-46.246c8.093-17.342 11.561-34.684 11.561-34.684h6.937s-9.827 39.887-20.233 54.917c-10.405 15.03-26.013 35.262-26.013 35.262zM62.046 160.974s27.17 31.216 43.934 38.152c16.764 6.937 52.605 8.093 52.605 8.093l-2.89-10.983s-32.95 3.469-48.559-5.78c-15.608-9.25-40.465-30.06-40.465-30.06zM177.083 291.618s-36.997-5.78-49.714-10.983c-13.376-5.472-24.857-23.123-24.857-23.123l-2.313 1.734s13.296 21.967 25.435 27.17c12.14 5.202 55.495 13.873 55.495 13.873zM159.163 188.721s18.264-31.298 20.232-54.917c1.156-13.874 2.312-39.887 2.312-39.887l4.047-1.156s.578 25.435.578 36.997c0 11.561-8.093 41.043-12.718 51.448-4.624 10.405-12.14 18.499-12.14 18.499z"/></svg>`;
const node = d3.select(a);
let x = 0;
let y = 0;
while (true) {
x += 100;
y += 100;
//svgNode.attr("transform", d => `translate(${x}, ${y})`);
yield node.node();
await node
.transition()
.duration(2000)
.attr("transform", d => `translate(${x}, ${y})`);
}
}
{
const a = svg`<svg xmlns="http://www.w3.org/2000/svg" width="281.181" height="504.054"><path fill="#052" d="M154.538 410.7c-60.12-39.308-36.997-60.119-36.997-60.119s-46.245 11.562-55.495-20.81c-9.249-32.372-13.873-83.243-13.873-83.243S-21.196 170.223 6.55 91.605C34.3 12.987 112.917 29.173 112.917 29.173s11.561-41.621 67.056-25.435c55.495 16.186 69.369 87.867 69.369 108.678 0 20.81-13.874 39.308-13.874 39.308s32.372 30.06 43.934 71.681c11.561 41.622-36.997 78.618-36.997 78.618s41.621 23.123 36.997 46.246c-4.625 23.123-53.183 30.06-50.87 46.246 2.312 16.186 4.624 53.183 4.624 53.183l-18.498 6.936s-9.25-30.06-20.811-41.62c-11.561-11.562-39.309-2.313-39.309-2.313z"/><path fill="#71c837" d="M129.103 100.854l100.222 403.2 16.186-6.937L137.196 98.542z"/><path fill="#71c837" d="M185.754 290.462s21.864-28.684 30.06-46.246c8.093-17.342 11.561-34.684 11.561-34.684h6.937s-9.827 39.887-20.233 54.917c-10.405 15.03-26.013 35.262-26.013 35.262zM62.046 160.974s27.17 31.216 43.934 38.152c16.764 6.937 52.605 8.093 52.605 8.093l-2.89-10.983s-32.95 3.469-48.559-5.78c-15.608-9.25-40.465-30.06-40.465-30.06zM177.083 291.618s-36.997-5.78-49.714-10.983c-13.376-5.472-24.857-23.123-24.857-23.123l-2.313 1.734s13.296 21.967 25.435 27.17c12.14 5.202 55.495 13.873 55.495 13.873zM159.163 188.721s18.264-31.298 20.232-54.917c1.156-13.874 2.312-39.887 2.312-39.887l4.047-1.156s.578 25.435.578 36.997c0 11.561-8.093 41.043-12.718 51.448-4.624 10.405-12.14 18.499-12.14 18.499z"/></svg>`;
const node = d3.select(a);
let theta = 0;
while (true) {
theta += 10;
yield node.node();
await node
.transition()
.duration(100)
.attr("transform", d => `rotate(${theta})`);
}
}
height = 500
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.
