25:["$","title",null,{"children":"PNGs won't download | Benjamin Notkin | Observable"}] 49:Tf58,function heatmap(data, country) { // Set the svg size; this can be made responsive later (if even wanted) const width = 600; const height = 600; // Row height (legend has a half height for now) let rowHeight = height/6 let rowGap = 6; let margin = {"top": rowHeight/3, "bottom": rowHeight/3} // Initiate svg const svg = d3.select(DOM.svg(width, height)); svg.append("text") .text(country) .attr("class", "chartTitle") .attr("y", margin.top - rowGap/2) // Color Ramp const colorRamp = d3.scaleLinear() .domain([0, 1, 2, 4]) .range(["#D22027", "#FDB52A", "#589643", "#027546"]) data.forEach( function (comp, i) { svg.append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", margin.top + i * rowHeight) .attr("y2", margin.top + i * rowHeight) .attr("stroke-width", 0.75) .attr("stroke", "#999999") svg.append("foreignObject") .attr("width", width/3 - rowHeight/5) .attr("height", rowHeight) .attr("x", rowHeight/5) .attr("y", margin.top + rowHeight * (i)) .append("xhtml:body") .html("

" + comp.component + "

") svg.append("rect") .attr("y", margin.top + rowHeight * i + rowGap/2) .attr("height", rowHeight - rowGap) .attr("width", rowHeight/5) .attr("fill", colorRamp(Math.floor(comp.maturity))) let littleRow = (rowHeight - rowGap)/comp.dimensions.length comp.dimensions.forEach( (dim, j) => { svg.append("foreignObject") .attr("width", width/3) .attr("height", littleRow) .attr("y", margin.top + (rowHeight * i) + rowGap/2 + littleRow * j) .attr("x", width / 3) .append("xhtml:body") .html("

" + dim.dimension + "

") svg.append("rect") .attr("y", margin.top + (rowHeight * i) + rowGap/2 + littleRow * j) .attr("x", 2 * width / 3) .attr("width", width / 3) .attr("height", littleRow) .attr("fill", colorRamp(Math.floor(dim.maturity))) svg.append("text") .attr("y", margin.top + (rowHeight * i) + rowGap/2 + littleRow * (j + 0.5)) .attr("x", 2 * width / 3 + width/6) .attr("width", width / 3) .attr("height", littleRow) .text(Math.round(10 * dim.maturity) / 10) .attr("text-anchor", "middle") .attr("alignment-baseline", "central") .attr("fill", "white") .attr("font-weight", "bold") }) }) svg.append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", margin.top + 5 * rowHeight) .attr("y2", margin.top + 5 * rowHeight) .attr("stroke-width", 0.75) .attr("stroke", "#999999") svg.append("foreignObject") .attr("width", width/3 - rowHeight/5) .attr("height", rowHeight) .attr("y", margin.top + rowHeight * (data.length + 1/3)) .attr("x", rowHeight/5) .append("xhtml:body") .html("

Maturity Level

") for (let i = 0; i < 5; ++i) { svg.append("rect") .attr("x", width / 3 + (width / 3 * 2 / 5) * i) .attr("y", margin.top + rowHeight * 16/3) .attr("width", (width / 3 * 2 / 5)) .attr("height", rowHeight / 3) .attr("fill", colorRamp(i)) svg.append("text") .text(["0 Unmet", "1 Nascent", "2 Basic", "3 Good", "4 Advanced"][i]) .attr("text-anchor", "middle") .attr("alignment-baseline", "central") .attr("x", width / 3 + (width / 3 * 2 / 5) * (i + .5)) .attr("y", margin.top + rowHeight * (16/3) + rowHeight / 6) .attr("height", rowHeight / 3) .attr("fill", "white") .attr("font-weight", "bold") } svg.append("style") .text(css) return svg.node() } 4a:T4fe,{ // Set the svg size; this can be made responsive later (if even wanted) const width = 600; const height = 600; // Row height (legend has a half height for now) let rowHeight = height/6 let rowGap = 6; let margin = {"top": rowHeight/3, "bottom": rowHeight/3} // Initiate svg const svg = d3.select(DOM.svg(width, height)); // Color Ramp const colorRamp = d3.scaleLinear() .domain([0, 1, 2, 4]) .range(["#D22027", "#FDB52A", "#589643", "#027546"]) data.forEach( function (comp, i) { svg.append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", margin.top + i * rowHeight) .attr("y2", margin.top + i * rowHeight) .attr("stroke-width", 0.75) .attr("stroke", "#999999") svg.append("rect") .attr("y", margin.top + rowHeight * i + rowGap/2) .attr("height", rowHeight - rowGap) .attr("width", rowHeight/5) .attr("fill", colorRamp(Math.floor(comp.maturity))) let littleRow = (rowHeight - rowGap)/comp.dimensions.length }) svg.append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", margin.top + 5 * rowHeight) .attr("y2", margin.top + 5 * rowHeight) .attr("stroke-width", 0.75) .attr("stroke", "#999999") return svg.node() } 4b:T593,function csv2nested (csv) { csv.map(function (x) { x.maturity = +x.maturity return(x) }) let compsDup = csv.map( x => x.component); let comps = [...new Set(compsDup)]; let output = []; comps.forEach( comp => { let obj = {}; obj.component = comp; let dims = csv.filter ( item => item.component == comp) .map( item => item.dimension ); dims = [...new Set(dims)] let dimsArr = []; let maturityComp = 0; dims.map( dim => { let objDim = {}; objDim.dimension = dim; // I probably should be saving the component filter above but for now lets just do it again let inds = csv.filter ( item => item.component == comp && item.dimension == dim) //.map( item => item.indicator); let indsArr = []; let maturityDim = 0; inds.map( ind => { let objInd = { indicator: ind.indicator, maturity: ind.maturity}; indsArr.push(objInd); maturityDim += ind.maturity/inds.length }) maturityComp += maturityDim / dims.length; objDim.indicators = indsArr; objDim.maturity = maturityDim; // objDim.indicators = laosFlat.filter ( item => item.component == comp && item.dimension == dim) // .map( item => item.indicator); dimsArr.push(objDim) }) obj.dimensions = dimsArr; obj.maturity = maturityComp; output.push(obj) }) return output }4c:[] 29:{"id":"b95789062bc4793c","slug":null,"title":"PNGs won't download","thumbnail":"b655702d3fa5e37a803d3327f8145abe9c841f413827e18930af0cbbe6905eb4","access_level":"unlisted","create_time":"$D2021-06-16T17:19:39.523Z","update_time":"$D2021-06-18T00:01:36.937Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f5deef0c9e190741","login":"unrelated","name":"Benjamin Notkin","avatar_url":"https://avatars-next.observableusercontent.com/461cf9679d6be6de10c5b4fd152e15e88203148b47956cdc3e1dfbbb2f6ea871","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":114,"publish_version":114,"role":null,"authored":false,"authors":[{"type":"individual","id":"21d9b423d0aeb4b4","login":"unrelated","name":"Benjamin Notkin","avatar_url":"https://avatars-next.observableusercontent.com/461cf9679d6be6de10c5b4fd152e15e88203148b47956cdc3e1dfbbb2f6ea871","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"21d9b423d0aeb4b4","login":"unrelated","name":"Benjamin Notkin","avatar_url":"https://avatars-next.observableusercontent.com/461cf9679d6be6de10c5b4fd152e15e88203148b47956cdc3e1dfbbb2f6ea871","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"PNGs won't download","cells":[{"id":0,"value":"# PNGs won't download","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"First, the SVG that won't download as a PNG. It _will_ download as an SVG.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"chart = heatmap(data, \"title\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`In the console, I'm told the action is insecure:\n\n\\`\\`\\`\n Unhandled Promise Rejection: SecurityError: The operation is insecure.\n (anonymous function) — worker-7ff35fe9.js:2754\n asyncFunctionResume\n (anonymous function)\n promiseReactionJobWithoutPromise\n promiseReactionJob\n\\`\\`\\`\n\nWhen I got to line 2754 of \\`worker-7ff35fe9.js\\`, I'm told \n\n\\`\\`\\`\n Unhandled Promise Rejection: SecurityError: The operation is insecure.\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`\n## The function\n\nHere is the function I've been using to produce my SVGs. First in full:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"Then reduced to something more minimal. _(EDIT: In reducing this example, I found the problem was with including `foreignObjects`in the SVG. The question then becomes, how to have multi-line text if foreignObjects break the PNG download?)_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`## Annex`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`Where I load in my CSV and turn it into a nested object.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"csv = d3.csvParse(`component,dimension,indicator,maturity\n1. Component,1.1 ,1.1.1,5\n1. Component,1.2 ,1.2.1,2\n1. Component,1.3 ,1.3.1,4\n1. Component,1.3 ,1.3.2,1\n2 Component,2.1 ,2.1.1,4\n2 Component,2.1 ,2.1.2,2\n2 Component,2.2 ,2.2.1,4\n2 Component,2.2 ,2.2.2,2\n2 Component,2.3 ,2.3.1,0\n2 Component,2.3 ,2.3.2,2\n2 Component,2.3 ,2.3.4,1\n3 Component,3.1 ,3.1.1,2\n3 Component,3.1 ,3.1.2,1\n3 Component,3.1 ,3.1.3,1\n3 Component,3.2 ,3.2.1,1\n3 Component,3.2 ,3.2.2,2\n3 Component,3.2 ,3.2.3,2\n4 Component,4.1 ,4.1.1,3\n4 Component,4.1 ,4.1.2,3\n4 Component,4.1 ,4.1.3,1\n4 Component,4.2 ,4.2.1,4\n4 Component,4.2 ,4.2.2,5\n4 Component,4.3 ,4.3.1,4\n4 Component,4.3 ,4.3.2,4\n5 Component,5.1 ,5.1.1,5\n5 Component,5.1 ,5.1.2,3\n5 Component,5.1 ,5.1.3,2\n5 Component,5.2 ,5.2.1,4\n5 Component,5.2 ,5.2.2,2\n5 Component,5.2 ,5.2.3,1\n5 Component,5.2 ,5.2.4,4`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"data = csv2nested(csv)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"css = `\n text {\n font-family: \"Arial Narrow\", \"Open Sans\", sans-serif;\n font-size: 14px;\n }\n\n div.components, div.dimensions {\n display: table;\n vertical-align: middle\n }\n div.components text, div.dimensions text {\n display: table-cell;\n vertical-align: middle;\n }\n div.components text {\n font-weight: bold;\n padding-left: 14px;\n }\n div.dimensions text {\n line-height: 14px\n }\n\n text.chartTitle {\n font-size: 16px;\n }\n\n foreignObject body {margin: 0}\n // svg:hover {\n // cursor: default;\n // }\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null