Public
Edited
Nov 15, 2022
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="A" name="flask" viewBox="0 0 512 512">
<path d="M437.2 403.5L320 215V64h8c13.3 0 24-10.7 24-24V24c0-13.3-10.7-24-24-24H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h8v151L10.8 403.5C-18.5 450.6 15.3 512 70.9 512h306.2c55.7 0 89.4-61.5 60.1-108.5zM137.9 320l48.2-77.6c3.7-5.2 5.8-11.6 5.8-18.4V64h64v160c0 6.9 2.2 13.2 5.8 18.4l48.2 77.6h-172z"></path>
</symbol>
<symbol id="B" name="brain" viewBox="0 0 576 512">
<path d="M208 0c-29.9 0-54.7 20.5-61.8 48.2-.8 0-1.4-.2-2.2-.2-35.3 0-64 28.7-64 64 0 4.8.6 9.5 1.7 14C52.5 138 32 166.6 32 200c0 12.6 3.2 24.3 8.3 34.9C16.3 248.7 0 274.3 0 304c0 33.3 20.4 61.9 49.4 73.9-.9 4.6-1.4 9.3-1.4 14.1 0 39.8 32.2 72 72 72 4.1 0 8.1-.5 12-1.2 9.6 28.5 36.2 49.2 68 49.2 39.8 0 72-32.2 72-72V64c0-35.3-28.7-64-64-64zm368 304c0-29.7-16.3-55.3-40.3-69.1 5.2-10.6 8.3-22.3 8.3-34.9 0-33.4-20.5-62-49.7-74 1-4.5 1.7-9.2 1.7-14 0-35.3-28.7-64-64-64-.8 0-1.5.2-2.2.2C422.7 20.5 397.9 0 368 0c-35.3 0-64 28.6-64 64v376c0 39.8 32.2 72 72 72 31.8 0 58.4-20.7 68-49.2 3.9.7 7.9 1.2 12 1.2 39.8 0 72-32.2 72-72 0-4.8-.5-9.5-1.4-14.1 29-12 49.4-40.6 49.4-73.9z"></path>
<symbol id="C" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240.86 240.86">
<path d="M16.6 120.43c0-54.46 42.14-99.26 95.53-103.5v47.89a56.8 56.8 0 0 1 16.6 0 56.4 56.4 0 0 1 46.15 41.62h17.02a72.99 72.99 0 0 0-63.17-58.35V0h-8.3C54.02 0 0 54.02 0 120.43c0 57.87 41.03 106.31 95.53 117.82v-17.02C50.26 210.05 16.6 169.1 16.6 120.43Z M145.33 2.61v17.02c45.27 11.18 78.93 52.13 78.93 100.8 0 54.46-42.14 99.26-95.53 103.5v-31.16a73 73 0 0 0 63.2-58.49h-17.02a56.37 56.37 0 0 1-54.49 42.38 56.31 56.31 0 0 1-56.23-56.23 56.26 56.26 0 0 1 31.33-50.38V52.02c-27.93 10.19-47.93 37-47.93 68.41 0 37.35 28.27 68.21 64.53 72.34v48.09h8.3c2.79 0 5.56-.1 8.3-.29 62.55-4.28 112.13-56.52 112.13-120.14 0-57.87-41.03-106.32-95.53-117.82Z"/>
</symbol>
</svg>
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("stroke-width", 1.5)
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.selectAll("g")
.data(data)
.join("g")
.attr("transform", d => `translate(${x(d.x)},${y(d.y)})`)
.call(g => g.append("use")
.attr("href", d=>`#${d.category}`)
.attr("width", 20)
.attr("height", 20)
.attr("stroke", "#000")
.attr("fill", "#000"))
return svg.node();
}
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.
