Published
Edited
Jan 16, 2020
1 star
md`
# Canton Zurich
## Communes
${generateList([
"59087a31535a3c1a864e5d3f8c9560b9",
"26dd57f960f55fa68cd53af02c278d36",
"35f0da3b31ab01dcc3c01b2a26b16499",
"5dfe022c71b8605915198b425f26800f",
"1547211c4830cf5a602c186e03ae2164",
"53d3366b037483069aceb23e8c128304",
"97e900b081f8e952c99579bbb0fb7108",
"e0001f68df91d263b919759e89e49307",
"e0001f68df91d263b919759e89e4539e",
"e0001f68df91d263b919759e89e47d1b",
"e79a7fbcbec1e11a54ce7d623ee51abe",
"e0001f68df91d263b919759e89e4633a",
"24bc24315cc913913c963abee550b6b62",
"2d26960e703a2a75329cddcd792ef4a5",
"ea61aa859ffb49763b2a3c2bb2565a0c",
"0f9e91c30c93e29b943c6f9895cd1978","71746da77a97358374d51a047bdfea60","49701efaf72c234ba2b72a84bb9d6432","71746da77a97358374d51a047be01cf6","49701efaf72c234ba2b72a84bb9d471a","82e14440322f7450e0b5f8ed225e7f32"
])}
## Regions
${generateList([
"26dd57f960f55fa68cd53af02c278d36",
"4bc24315cc913913c963abee550b6b62",
"5dfe022c71b8605915198b425f26800f",
"ca3b995981f006d503cfd5e38687dc0c",
"4bc24315cc913913c963abee550b6b62"
])}
## City
${generateList([
"3b344b8e2d2f0690bf2c83311372f31a",
"519d5c8e61a1aa6e180623360e2e65df",
"28fa8b1173bf29680f3f6b2f7f8ddad2"
])}
`
md`
# World Map
## Sequential
${generateList([
"d7ed46ba2d32b0106cb1affec28ed989",
"bd92d64b7ea3f2e8c1bb98688f1cffbd",
"f1acd253007af9adc0718cd0ccc0b036",
"bd92d64b7ea3f2e8c1bb98688f3484dc",
"ee9d06343c078de3d26488bda04010c7",
"c332a030acb9c5540432f72c8c3a3544",
"3abefcd60f086888982d01762f82e3f7",
"def62375dc252a96dc379547d15e8e4b",
"874eb6b4408fc31432d7d58f8a84e6a4",
"e11d3b296fd80633f3637e0e521b9228",
"8e3b038369b87ebff32c26123de98d0e",
"5bf07a540e9579ffd16c095f1680c811",
"4d9dbcafd5950d2c2991a0699214722c",
"bf79471e97c3cee8b107a6fc203ef316"
])}
## Divergent
${generateList([
"182865f7d36536a6cc355a990eac9d90",
"874eb6b4408fc31432d7d58f8a8ae703",
"310ba496e99f15b2c6aead667d804e08"
])}
## Clustered
${generateList(["87ebf9356559614d54ab34cfa0fdef5a", "91536091deb9363261a383616df252d4", "c332a030acb9c5540432f72c8c3a74bd", "e451976821eeb77c12b95f5bfc821808", "d5558f4a91b1c8af2eef2a090a7b17ab", "746c14fb22b2730b6b544346277a201e", "de6a2fd6922a6da24e5fa75ee78fa30f", "a733ebc09a6a9938fd9f1234d5abf140", "c86bd381ac38a47a20ee9db522b4ffbf", "7b9e524c94eaa5607eda81ace4e291d4", "719647d79c42343806fc59b4332958aa", "8652981e9e505b6cef60fa1c07c69ca6", "062f77af3d99e220d1455b2977b61f77", "de6a2fd6922a6da24e5fa75ee78b8754", "82921fc0a72ef4692f6225bd5cad8af0", "8652981e9e505b6cef60fa1c07a2f3d0", "f2aebcf58cc4ab8cc9c2905a323c3eaa", "3e6a8b2f943f059c2ef2f19e5e514320", "022a672b3f9fa2b1be4ea3c48a0fe223", "faaa0aeda80e44fcb99f7abc16ff8e17"])}
`
md`
# Other Countries
## Germany
${generateList(
["31b5dfb73edf38b64241c455f927d5a8", "31b5dfb73edf38b64241c455f927fa15", "e11d3b296fd80633f3637e0e5220083d", "5321b11cf741e53531e7ae5fd81bdacb", "c701776e519634a91408c7058e4569f8", "e11d3b296fd80633f3637e0e521f1376", "31b5dfb73edf38b64241c455f9277ab3", "e11d3b296fd80633f3637e0e521f8d39", "e11d3b296fd80633f3637e0e521e658d", "874eb6b4408fc31432d7d58f8a6334c0"])}
## France
${generateList(
["31b5dfb73edf38b64241c455f9efa3fe", "e11d3b296fd80633f3637e0e52e46fe5", "e11d3b296fd80633f3637e0e52b74b9f", "e11d3b296fd80633f3637e0e52b79d5b"]
)}
## UK
${generateList(
["4bc24315cc913913c963abee55034366", "3f62e32df8265fbb693ab264d7d7cfdc"]
)}
## USA
${generateList(
["3b6ca18bb7aef5f273e0eb30d3cec6f3","4a1bd7c22ce78c000d532ed202d8a135","bf79471e97c3cee8b107a6fc20845c8e","45eab0c020108c0518358da5e00034be","7e380267caf7008c8c13aa8a9908e10c"]
)}
## Africa
${generateList(
["874eb6b4408fc31432d7d58f8a84e6a4", "bf79471e97c3cee8b107a6fc203ef316", "91536091deb9363261a383616df252d4"]
)}
## Others
${generateList(
["6139048cccfaf4419891fa225d654a27","0a94db7555396199c19c42b21dd9f71e","8e3b038369b87ebff32c26123d491313","f1acd253007af9adc0718cd0cc85488d","fdbc31f9559f307cc4df3e515468e933","25cee509f7f6fdd65038e1aa22e5eb57","31b5dfb73edf38b64241c455f9f8d671","f4ded7ecc2029078f513adbb3e7a4943","a2d8202c3344db19385cdfc8c536c599","65bcfca15cda67b933b20396e824c8ae","7ce1454f29c4519114f2cfc32dd76c1a","b6509eb9d3348b26b6c524f9e536536c","9ec1f3804d0b35b836fa59ec9d1086df","d91c93a70d55e1476895c346d0fe189f"]
)}
`
md`
# "Iso Maps"
Sometimes we like to show locations of a specific category often expressed by color...
${generateList(["b04bb6b59a3fb669c985c0af1093f018",
"022a672b3f9fa2b1be4ea3c48a4094f7",
"d75576c05b01a994e21f0c39dc63bef2",
"f869def0ee949f87d98e17f181e4b699",
"022a672b3f9fa2b1be4ea3c48adde6a4",
"e11d3b296fd80633f3637e0e521d9d13",
"31b5dfb73edf38b64241c455f9266860",
"e11d3b296fd80633f3637e0e52e4e099",
"bf79471e97c3cee8b107a6fc20729ca7",
"6c2a7358bde40bd0d4745aca609e4879",
"bf79471e97c3cee8b107a6fc20727fcb",
"6c2a7358bde40bd0d4745aca609e693f",
"c7f059df3890fb0b5296c65f4e889f00"
])}
`
md`
# Other Map Visualizations
${generateList(["62f1ae9424cbf585a50b50bc0c5d49ae",
"9056d9cec6ec3400b0471f0bb2281cfd",
"b4481960da64bf2a913c523a8019f0b7",
"b4481960da64bf2a913c523a802a2628",
"7b90b85e14dcc873e9914a28debaaf20",
"310ba496e99f15b2c6aead667dee05c2",
"cbe849e76e73dc15cf8a7322b11ab11b",
"31b5dfb73edf38b64241c455f994ffd9",
"e11d3b296fd80633f3637e0e528d721e",
"e11d3b296fd80633f3637e0e528d2ddd",
"e01aa2de5e7d3c06c1ab9acfb972f7ab",
"811329a83f3476f4c01e7167066175b9",
"cc9b85503bc1df96e684f4086896d798",
"36a12ee9ad66ce661d728bd6b15d08ce",
"b9b21fe1466aff3e11ef0c8f14f724fa",
"6c2a7358bde40bd0d4745aca60c0518d",
"e658eddad77a8d4d7ba4bd43e13b2d61"]
)}
`
generateList = (listOfIds) => {
const width = 240;
const getScreenshotURL = (id, dpr=2) => `https://q-server.st-cdn.nzz.ch/screenshot/${id}.png?target=nzz_ch&dpr=${dpr}&padding=10px&wait=300&background=white&width=${width}`;
const div = html`<div data-selected="[]" style="column-count: 3; column-gap: 12px;" />`;
div.appendChild(html`<pre>${listOfIds.length} Graphics</pre>`)
listOfIds.forEach(id => {
const img = html`<img style="border-style: inset; border-width:0px" width="100%" data-id="${id}" />`;
img.addEventListener("click", (e) => {
const targetId = e.target.dataset.id;
let selected = JSON.parse(e.target.parentNode.dataset.selected);
const isSelected = selected.indexOf(targetId) !== -1;
if(isSelected) {
// unselect
selected = selected.filter(s => s.indexOf(targetId) !== -1)
e.target.style.borderWidth = 0;
} else {
// select
selected.push(targetId)
e.target.style.borderWidth = "3px";
}
const notSelected = listOfIds.filter(i => selected.indexOf(i) === -1);
const jsonSelected = JSON.stringify(selected);
const jsonNotSelected = JSON.stringify(notSelected);
e.target.parentNode.dataset.selected = jsonSelected;
e.target.parentNode.querySelector('.selected').innerText = jsonSelected;
e.target.parentNode.querySelector('.notselected').innerText = jsonNotSelected;
})
img.setAttribute('src', getScreenshotURL(id))
div.appendChild (img)
div.appendChild (html`<pre>${id}</pre>`)
});
div.appendChild(html`<pre class="selected"></pre>`)
div.appendChild(html`<pre class="notselected"></pre>`)
return div;
}
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.
