An SVG you can work with!

31:T90f,html` TidyUpMySVG <= This tidies up the SVG you're just looking at `32:T479,html ` QMapToGeoJSON <= This downloads the GeoJSON behind the Q-Map you're looking at `33:Tbaa,(function() { document .getElementsByTagName("preview-container")[0] .shadowRoot.querySelectorAll("svg") .forEach(chart => { colorsAndDownload(chart); }); function unwrap(chart) { var groupsToUnwrap = []; if (!chart) { return chart; } chart.querySelectorAll("g").forEach(g => { // collect groups with single nodes if (g.children.length === 1) { var el = g.firstElementChild; (g.hasAttribute("[transform]") === false || el.hasAttribute("[transform]") !== g.hasAttribute("[transform]")) && groupsToUnwrap.push(g); } // Upwrapping groups that aren't transforming their children may destroy predefined structures ... //else if(g.hasAttribute("[transform]") === false || g.hasAttribute('[transform="matrix(1,0,0,1,0,0)"]')) { // groupsToUnwrap.push(g); //} }); // unwrap groups that aren't transforming and apply the group's attributes to elements groupsToUnwrap.forEach(g => { if (g.parentNode) { while (g.children.length > 0) { var el = g.lastElementChild; for (var i = 0; i < g.attributes.length; i++) { var a = g.attributes[i]; el.hasAttribute(a.name) === false && el.setAttribute(a.name, a.value); } g.parentNode.insertBefore(el, g.nextSibling || g); } } }); // // Problem: We don't neeed empty groups // Solution: remove all empty groups // chart.querySelectorAll("g").forEach(g => { g.children.length === 0 && g.parentNode && g.parentNode.removeChild(g); }); return chart; } function colorsAndDownload(chart) { if (!chart) { return chart; } // // Get Sophie colors // let colors = fetch( "https://service.sophie.nzz.ch/bundle/sophie-color%2523master,sophie-viz-color%2523master.vars.json" ) .then(res => res.json()) .then(colors => { console.log(colors); let _out = { ...colors["sophie-color"]["general"] }; for (let color in colors["sophie-viz-color"]) { _out = { ..._out, ...colors["sophie-viz-color"][color] }; } colors = _out; // Set colors from Sophie chart.querySelectorAll("*[class*=color]").forEach(d => { console.log(d.getAttribute("class"), colors[d.getAttribute("class")]); d.setAttribute("fill", colors[d.getAttribute("class")]); }); let htmlString = chart.outerHTML; htmlString = htmlString.replace(/nzz-sans-serif/g, "GT America"); let url = window.URL.createObjectURL( new Blob([htmlString], { type: "application/svg" }) ); let a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = "chart.svg"; document.body.appendChild(a); a.click(); }) .catch(err => { throw err; }); } })()34:T10002,html`

Mehr Todesfälle pro Kopf in Bayern und Sachsen

Corona-Todesfälle kumuliert pro 100 000 Einwohner nach Kreis

2,00 244,29

' ); })(); */36:T4d4,/* QMapToGeoJSON // THIS CODE NEEDS TO BE CONAINTED IN A BOOKMARK – AKA BOOKMARKLET // for deployment use this tool: http://js.do/blog/bookmarklets/ javascript: (function() { var json = { type: "FeatureCollection" }; var qid = location.href.split("https://q.st.nzz.ch/item/")[1]; if (qid === undefined) { qid = location.href.split("https://q.st.nzz.ch/editor/locator_map/")[1]; } if (qid === undefined) { alert( "Diese Seite scheint keine Q-Map zu sein – da kann ich nüscht machen." ); return false; } fetch("https://q-server.st.nzz.ch/item/" + qid) .then(res => res.json()) .then(res => { var features = []; res.geojsonList.forEach(d => { if (d.features && d.type === "FeatureCollection") { features = features.concat(d.features); } else { features.push(d); } }); json.features = features; var url = window.URL.createObjectURL( new Blob([JSON.stringify(json)], { type: "application/json" }) ); var a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = "qMap.json"; document.body.appendChild(a); a.click(); }); })(); */37:[] 2f:{"title":"NZZ Visuals Bookmarklets","cells":[{"id":0,"value":"md`# NZZ Visuals Bookmarklets\n\nBelow you see a list of bookmarklets (actually links) ready to be \"installed\". You install a bookmarklet by simply drag-and-dropping one of the links to your browser's bookmark bar.

\nWhenever you click a bookmarklet placed in your browser's bookmark bar its function is triggered and applied to the website that's currently displayed in your browser tab.\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"html`\nEdit in Living Docs <= This lets you edit the current NZZ page in Livingdocs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"html`Edit in Living Docs on Staging <= This lets you edit the current NZZ page in Livingdocs on Staging`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"html`Download SVG <= This downloads the SVG of a Q-Element`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"/* QMapToGeoJSON\n\n// THIS CODE NEEDS TO BE CONAINTED IN A BOOKMARK – AKA BOOKMARKLET\n// for deployment use this tool: http://js.do/blog/bookmarklets/\n\n\njavascript: (function() {\n \n fetch(\"https://q-server.st.nzz.ch/item/\" + qid)\n .then(res => res.json())\n .then(res => {\n var features = [];\n res.geojsonList.forEach(d => {\n if (d.features && d.type === \"FeatureCollection\") {\n features = features.concat(d.features);\n } else {\n features.push(d);\n }\n });\n json.features = features;\n var url = window.URL.createObjectURL(\n new Blob([JSON.stringify(json)], { type: \"application/json\" })\n );\n var a = document.createElement(\"a\");\n a.style.display = \"none\";\n a.href = url;\n a.download = \"qMap.json\";\n document.body.appendChild(a);\n a.click();\n });\n})();\n\n\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"{\n document.querySelectorAll(\"*[class*=color]\").forEach(d => {\n console.log(d.getAttribute(\"class\"), colors[d.getAttribute(\"class\")]);\n d.setAttribute(\"fill\", colors[d.getAttribute(\"class\")]);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"colors = {\n let colors = await fetch(\n \"https://service.sophie.nzz.ch/bundle/sophie-color%2523master,sophie-viz-color%2523master.vars.json\"\n )\n .then(res => res.json())\n .then(out => {\n return out;\n })\n .catch(err => {\n throw err;\n });\n\n let _out = { ...colors[\"sophie-color\"][\"general\"] };\n for (let color in colors[\"sophie-viz-color\"]) {\n console.log(colors[\"sophie-viz-color\"][color]);\n _out = { ..._out, ...colors[\"sophie-viz-color\"][color] };\n }\n return _out;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}