Wise Fool.
Visioneer.
Public
Edited
Apr 14, 2023
2 forks
3 stars
sketch(text);
sketch = (text) => {
const grid = Grid({aspect: {wide: 6, tall: 4}, pan: {h: -1/2, v: -1/2}}).sketch();
grid.pad.call(
dot(
{
w,
pan: {h, v},
padding,
fontFamily,
lineHeight,
fontSize,
borderRadius,
},
text,
)
);
return grid.plot();
}
dot = (
{
w,
pan = {h: 0, v: 0},
padding = 9,
lineHeight = 1.5,
fontFamily = "sans-serif",
fontSize = 10,
fontWeight = 900,
fontColor = "white",
primer = "black",
borderRadius,
},
text
) =>
(g) =>
{
const r = w - 2 * padding;
const style = `
.box {
display: inline-flex;
height: ${r}px;
width: ${r}px;
padding: ${padding}px;
align-items: center;
justify-content: center;
color: ${fontColor};
font-family: ${fontFamily}, sans-serif;
font-size: ${fontSize}px;
font-weight: ${fontWeight};
line-height: ${lineHeight};
}
`;
g
.append("style")
.html(style)
;
const h = w/2;
const o = g
.append("svg")
.attr("width", w)
.attr("height", w)
.attr("viewBox", [-h, -h, w, w])
.attr("x", w * (pan.h - .5))
.attr("y", w * (pan.v - .5))
.attr("overflow", "visible")
;
o
.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("x", -h)
.attr("y", -h)
.attr("fill", primer)
// .attr("stroke-width", 10)
// .attr("stroke", "green")
.attr("rx", `${100 * borderRadius}%`);
;
o
.append("foreignObject")
.attr("width", "100%")
.attr("height", "100%")
.attr("x", -h)
.attr("y", -h)
// .style("position", "relative")
.html(`<center class="box">${text}</center>`)
;
// o // show bounding box
// .append("path")
// .attr("d", `M${-h} ${-h}h${w}v${w}h${-w}Z`)
// .attr("stroke", "black")
// .attr("stroke-width", 1)
// .attr("fill", "none")
// ;
// o // show center
// .append("circle").attr("r", 6).attr("fill", "green");
}
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto Condensed&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto Slab&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto Mono&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anek Malayalam&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source Sans Pro&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow Condensed&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shadows Into Light&display=swap");
</style>
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.
