Published
Edited
Dec 11, 2021
3 stars
columns = 5 // to properly layout the grid, as our tilemap is one-dimensional
tilemap = [
tiles.grass, tiles.grass, tiles.grass, tiles.grass, null,
tiles.grass, tiles.riverEndN, tiles.riverEndE, null, tiles.grass,
tiles.grass, [tiles.grass, tiles.castleTowerPurple], tiles.grassRiverCrossing, null, tiles.grass,
null, tiles.riverE, tiles.riverBendE, tiles.grass, tiles.grass,
tiles.grass, tiles.riverE, tiles.riverEndW, tiles.grass, tiles.grass,
tiles.riverEndW, tiles.grass, tiles.grass, [tiles.grass, tiles.structureHigh, tiles.structureHigh, tiles.roofChurchBrown], tiles.grass,
tiles.grass, tiles.grass, null, tiles.grass, tiles.grass,
tiles.grass, tiles.grass, null, tiles.grass, null
]
tileWidth = '10em' // rendering size
imageScaleFactor = 1.2 // to compensate for padding in tile image files
tileHeightLevelRatio = 0.55 // to align height levels properly, as a ratio of tile width
tileHeightRatio = 0.25 // height ratio in screenspace a tile should fill relative to its image
style = html`<style>
.grid {
padding: 2em;
padding-top: 10em;
--rows: ${tilemap.length / columns};
--columns: ${columns};
--tileWidth: ${tileWidth};
display: grid;
font-size: 0.5em;
width: calc((var(--columns) + 1) * var(--tileWidth));
grid-template: repeat(var(--rows), calc(var(--tileWidth) * ${tileHeightRatio})) / repeat(calc(var(--columns) * 2 + 1), auto);
background-color: #357;
}
.tile {
grid-column: auto / span 2;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
width: var(--tileWidth);
}
.layer {
height: calc(var(--tileWidth) * ${tileHeightLevelRatio});
display: flex;
align-items: flex-end;
}
.layer > img {
width: 100%;
transform: scale(${imageScaleFactor});
}
.indent {
grid-column-start: 2;
}
</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.
