height = (width * 2) / 3
w = 66
h = 17
// excel mac
ratio = w / h
green = "#3A724A"
html`<style>
.graphic {
}
.grid path {
stroke: #ddd;
fill: none;
}
.grid.selected path {
stroke: ${green};
}
</style>`
lorem = () => `<path d="M ${width * .3 + 20} ${height * .3 +
20 +
5} h 150" stroke-width="10" stroke="black" />
<path d="M ${width * .3 + 20} ${height * .3 + 20 + 60} h 250 M ${width *
.3 +
20} ${height * .3 + 20 + 80} h 250" stroke-width="1" stroke="black" />
<path d="M ${width * .7 - 20} ${height * .7 -
20 -
2} h -60 m -10 0 h -60" stroke="black" fill="none" stroke-width="1" />`
icon = (w = 80) => {
const h = (55 / 80) * w;
const n = 3;
const m = 4;
const dx = w / n;
const dy = h / m;
const margin = (4 / 80) * w;
const arrowhead = (12 / 80) * w;
const blue = "#6391CD";
const lightblue = "#CFDCEB";
const red = "#B75551";
const strokeWidth = Math.max((4 / 80) * w, 2);
return svg`<svg viewBox="0 0 ${w} ${h}" style="overflow: visible;" width="${w}" height="${h}">
${d3.cross(d3.range(n), d3.range(m)).map(
([x, y]) =>
svg`<rect
x="${x * dx}"
y="${y * dy}"
width="${dx}"
height="${dy}"
stroke="#bbb"
fill="${x + y < 1 ? blue : x + y > 3 ? lightblue : "white"}"
/>`
)}
<path d="M 0 0 H ${w} V ${h} H 0 Z" stroke="#666" fill="none" />
<path d="M ${dx * 2 - margin} ${dy * 3 - margin}
L ${dx + margin} ${dy + margin}
M ${dx + margin} ${dy + margin + arrowhead}
v -${arrowhead} h ${arrowhead}"
stroke="${red}"
stroke-width="${strokeWidth}"
fill="none"
/>
</svg>`;
}
d3 = require("d3@5")
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.
