The Ambassador program is made up of a group of inclusive, collaborative, and curious minds in the Observable community.
Published
Edited
Feb 7, 2022
5 stars
fontHeight = 12 // 10 // 8 looks good byt 16 is good for testing.
fontWidth = fontHeight * 0.6 // width ish, works best at 60%
cols = ~~(width / fontWidth)
parseFont = selectedFont.split(" ").join("+")
text = "What does the money machine eat? It eats youth, spontaneity, life, beauty, and, above all, it eats creativity."
<div class="grid-container" id='tout'></div>
div_image = /* prettier-ignore */ {
d3.selectAll(".grid-item").remove();
let wordlen = text.length;
let wordIndex = 0;
let tout = d3.select("#tout");
tout.selectAll('.grid-item').remove();
for (let idx = 0; idx <= cols * TeImage.rows - 1; idx++) {
// look up pixel_colour at colours[idx]
tout
.append("div")
.attr("class", "grid-item")
.style("color",`rgb(${TeImage.colours[idx]},${TeImage.colours[idx]},${TeImage.colours[idx] }` )
.style("font-weight", weightScale(TeImage.colours[idx]))
.text(text[wordIndex]);
wordIndex = (wordIndex + 1) % wordlen;
}
}
weightScale = d3.scaleLinear().domain([0, 255]).range(fontWeights[selectedFont])
TeImage = ({ colours: [], rows: 0 })
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${parseFont}:ital@0;1&display=swap">
<style>
.grid-container {
font-family: '${selectedFont}', serif;
font-size: ${fontHeight}px;
display: grid ;
grid-template-columns: repeat(auto-fit, minmax(${fontWidth}px, 1fr));
background-color: black;
}
.grid-item {
align-self: center;
text-align: center; /* Makes the font act like a mono font or a fixed character width */
line-height: 1;
}
.katex-display,p,ul,h1,h2,h3,h4,li
{
font-family: sans-serif;
}
@media (hover: hover) {
.katex-display,p,ul,h1,h2,h3,h4,li {
max-width: 1100px;
min-width: $1100px; }
}
</style>
import { cv, handleError, registerFile } from "@mootari/opencv-js"
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.
