Published
Edited
May 21, 2020
grid = html`<div style="
background: #fff;
display: grid;
height: ${screen.height / screen.width * 100}vw;
grid-template-areas:
'a a b'
'c c d'
'c c d'
'c c d'
'c c d'
'c c d'
'c c d'
'e f d'
'e f d'
'e f d'
'e f d'
'e f d';
grid-gap: 10px;
">
<div name="a" class="panel panelheader" style="grid-area:a;">
<h2>In-force Constitution Available on Constitute</h2>
<p>${country}</p>
</div>
<div name="b" class="panel" style="grid-area:b;"></div>
<div name="c" class="panel" style="grid-area:c;"></div>
<div name="d" class="panel" style="grid-area:d;"></div>
<div name="e" class="panel" style="grid-area:e;"></div>
<div name="f" class="panel" style="grid-area:f;"></div>
</div>`
style = html`<style>
div.panel {
background-color: #ecf6fe;
}
div.panelheader {
padding: 1em 1em 0 90px;
margin: 0;
background-image: url(${pagesImg});
background-repeat: no-repeat;
background-position: 1em 1em;
/*max-height: 80px; */
}
div.panelheader h2 {
color: #555555;
font-family: "Lato", Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 9pt;
text-transform: uppercase;
line-height: 1;
padding: 0 0 0.75em 0;
margin: 0;
}
div.panelheader p {
color: #2929fc;
font-family: "Lato", Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 24pt;
font-weight: bold;
line-height: 1;
padding: 0;
margin: 0;
}
</style>
`
pagesImg = await FileAttachment("Pages.png").url()
urlParams = new URL(location).searchParams;
country = urlParams.has("country") ? urlParams.get("country") : "Default Country (2020)";
init = embedPanels()
//import {chart as chartA} with {widthA as width, heightA as height} from "@d3/bar-chart"
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.
