Maps, Data, Viz, UX, Design
layout = htl.html`
<div class="wrapper">
<div class="amv-container">
<div class="row row-one">
<!-- image width based on image aspect ratio, max-width of 60% -->
<div hidden=${
curImageAspectRatio === "unset"
} class="block image-block">image (max-width: 60%)</div>
<!-- map should consume remaining width of row -->
<div class="block map-block">map</div>
</div>
<div class="row row-two">
<!-- stat blocks
* default width to 1/3 of 50% of total row width
* optionally may expand to be wider, but the combined width of all 3 blocks may not take up more than 70% of the row's total width
-->
${["stat one", "stat two", "stat three"].map((text) =>
renderDataBlock(text)
)}
<!-- chart
* consumes remaining width, min-width of 30% of row
* on mobile, chart should be moved to a 3rd row
-->
<div class="block chart-block">chart (min-width: 30%)</div>
</div>
</div>
</div>
`
renderDataBlock = (text) =>
htl.html`<div class="block data-block" contenteditable="true">${text}</div>`
styles = htl.html`
<style>
:root {
--container-width: ${curContainerSize}px;
--container-height: 960px;
--container-width-half: calc(var(--container-width) * 0.5);
--data-row-height-sm: 117px;
--data-row-height-md: 165px;
--data-row-height-lg: 213px;
--gap: 16px;
--main-content-height: calc(var(--container-width) * 0.4);
/* the height of the row(s) that contain the stats & chart, can be overridden by using a different --data-row-height-* prop */
--data-row-height: var(${curLayoutSize});
/* the default width of the data / stats block */
--data-block-width-default: calc(1/3 * (var(--container-width-half) - 2.5 * var(--gap)));
}
.wrapper {
width: ${width}px;
height: ${Math.ceil((width * screen.height) / screen.width)};
}
.amv-container {
width: 100%;
max-width: var(--container-width);
display: grid;
grid-gap: var(--gap);
grid-template-rows: var(--main-content-height) var(--data-row-height);
margin: 0 auto;
overflow: auto;
}
.amv-container,
.row {
background-color: teal;
}
.row-one {
display: flex;
gap: var(--gap);
}
.row-two {
display: grid;
grid-gap: var(--gap);
grid-template-columns: repeat(3, minmax(auto, 1fr)) minmax(calc(30% - 8px), calc(50% - 8px));
}
.block {
background-color: #e2e2e2;
display: flex;
align-items: center;
justify-content: center;
}
.image-block {
aspect-ratio: ${curImageAspectRatio};
max-height: 100%;
max-width: 60%;
}
.image-block[hidden] {
display: none;
}
.map-block {
flex: 1 1 0;
}
</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.
