Published
Edited
May 21, 2020
Insert cell
Insert cell
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>`
Insert cell
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>
`
Insert cell
pagesImg = await FileAttachment("Pages.png").url()
Insert cell
urlParams = new URL(location).searchParams;
Insert cell
country = urlParams.has("country") ? urlParams.get("country") : "Default Country (2020)";
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
init = embedPanels()
Insert cell
//import {chart as chartA} with {widthA as width, heightA as height} from "@d3/bar-chart"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell

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.
Learn more