25:["$","title",null,{"children":"CPGA Plots | Benjamin Notkin | Observable"}] 4c: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 }4d:T1ea0,function polarChart (data, countryName, date) { // Set the svg size; this can be made responsive later (if even wanted) let width = 900; let height = 900; const componentCount = data.length const componentAngle = 2*pi/componentCount const padAngle = 0.005 const insideRadius = 100; const outsideRadius = 400; const endX = Math.cos(pi/2 - componentAngle) * outsideRadius const endY = -Math.sin(pi/2 - componentAngle) * outsideRadius let rScale = d3.scaleRadial() .domain([0,5]) .range([insideRadius,outsideRadius]) const fontSize = 13 const dimTextRadius = rScale(4.5) const dimText2Radius = dimTextRadius - fontSize // const palette = d3.schemePaired const palette = ["#E3678E", "#E89F2A", "#16BAAE", "#F6B982", "#437ABE"] function crop2arc(j, radius) { let s = radius * componentAngle/j.length; let n = s / (fontSize * 0.55) return n } // Initiate svg const svg = d3.select(DOM.svg(width, height)) .attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`) .style("width", "50%") .style("height", "auto") .style("font", "10px sans-serif"); let compArcs = svg.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => {return "rotate(" + componentAngle * 180/pi * i + ")"} ) .attr("fill", (d, i, j) => palette[i]) .attr("class", "first-level") compArcs.append("line") .attr("class", "sideline") .attr("x1", 0) .attr("x2", 0) .attr("y1", -insideRadius) .attr("y2", -dimTextRadius) .attr("stroke-width", .5) .attr("stroke", "black") compArcs .append("defs") .append("path") .attr("d", "M0,-" + outsideRadius + " A" + outsideRadius + "," + outsideRadius + " 0 0 1 " + endX + "," + endY) .attr("id", (d, i) => "text-arc-" + i) .attr("stroke", "black") compArcs.append("text") .append("textPath") .attr("xlink:href", (d, i ) => "#text-arc-" + i ) //place the ID of the path here .style("text-anchor", "middle") //place the text halfway on the arc .attr("startOffset", "50%") .text( d => d.component) .style("font", 1.8 * fontSize + "px 'Arial Narrow'") .attr("fill", "black"); let dims = compArcs.selectAll(".dim") .data(data) .data(d => d.dimensions) .join("g") .attr("class", "dim") .attr("transform", (d, i, j) => "rotate(" + (i * componentAngle/j.length * 180/pi) + ")") let dimDefs = dims .append("defs") dimDefs .append("path") .attr("d", (d, i , j) => "M0,-" + dimTextRadius + " A" + dimTextRadius + "," + dimTextRadius + " 0 0 1 " + Math.sin(componentAngle/j.length) * dimTextRadius + "," + -Math.cos(componentAngle/j.length) * dimTextRadius) .attr("id", (d, i) => "d-text-arc-line1-" + slugify(d.dimension)) .attr("stroke", "black") .attr("stroke-width", 3) dimDefs .append("path") .attr("d", (d, i , j) => "M0,-" + dimText2Radius + " A" + dimText2Radius + "," + dimText2Radius + " 0 0 1 " + Math.sin(componentAngle/j.length) * dimText2Radius + "," + -Math.cos(componentAngle/j.length) * dimText2Radius) .attr("id", (d, i) => "d-text-arc-line2-" + slugify(d.dimension)) .attr("stroke", "black") .attr("stroke-width", 3) dims.append("text") .append("textPath") .attr("xlink:href", (d, i ) => "#d-text-arc-line1-" + slugify(d.dimension) ) //place the ID of the path here .style("text-anchor", "middle") //place the text halfway on the arc .attr("startOffset", "50%") .text( (d, i, j) => { let s = d.dimension; let n = crop2arc(j, dimTextRadius); if (n >= s.length) { return s; } else { let maxString = s.slice(0,n); let lastWhite = maxString.lastIndexOf(" "); return s.slice(0,(lastWhite)); } }) .style("font", fontSize + "px 'Arial Narrow'") .attr("fill", "black"); dims.append("text") .append("textPath") .attr("xlink:href", (d, i ) => "#d-text-arc-line2-" + slugify(d.dimension) ) //place the ID of the path here .style("text-anchor", "middle") //place the text halfway on the arc .attr("startOffset", "50%") .text( (d, i, j) => { let s = d.dimension; let n = crop2arc(j, dimTextRadius); if (n >= s.length) { return ""; } else { let maxString = s.slice(0,n); let lastWhite = maxString.lastIndexOf(" "); return s.slice(lastWhite); } }) .style("font", fontSize + "px 'Arial Narrow'") .attr("fill", "black"); let dimArcs = compArcs.selectAll("g.first-level") .data( d => d.dimensions) .join("path") .attr("class", "dimArc") .attr("d", d3.arc() .innerRadius(insideRadius) .outerRadius( d => rScale(d.maturity)) .startAngle( (d, i, j) => componentAngle/j.length * i) .padAngle(padAngle) .endAngle((d, i, j) => componentAngle/j.length * (i + 1))) let yAxis = (g) => g .attr("text-anchor", "middle") .call(g => g.selectAll("g") .data(rScale.ticks(5).slice(0, -1)) .join("g") .attr("fill", "none") .call(g => g.append("circle") .attr("stroke", "#000") .attr("stroke-opacity", 0.5) .attr("r", d => rScale(d)))) svg.append("g") .call(yAxis) let titleCenter = svg.append("g") .attr("text-anchor", "middle") titleCenter .append("text") .text("Crisis Preparedness") .style("font", 1.8 * fontSize + "px 'Arial Narrow'") titleCenter .append("text") .text("Maturity Levels") .attr("y", 2 * fontSize) .style("font", 1.8 * fontSize + "px 'Arial Narrow'") .attr("alignment-baseline", "central") titleCenter .append("defs") .append("path") .attr("d", "M-" + (insideRadius - (1.8 * fontSize)) + ",0 A" + (insideRadius - (1.8 * fontSize)) + "," + (insideRadius - (1.8 * fontSize)) + " 0 0 1 " + (insideRadius - (1.8 * fontSize)) + "," + 0) .attr("id", "title-arc-1") .attr("stroke", "black") titleCenter.append("text") .append("textPath") .attr("xlink:href", "#title-arc-1") //place the ID of the path here .style("text-anchor", "middle") //place the text halfway on the arc .attr("alignment-baseline", "central") .attr("startOffset", "50%") .text( countryName) .style("font", 1.8 * fontSize + "px 'Arial Narrow'") .attr("fill", "grey"); titleCenter .append("defs") .append("path") .attr("d", "M-" + (insideRadius - (1.8 * fontSize)) + ",0 A" + (insideRadius - (1.8 * fontSize)) + "," + (insideRadius - (1.8 * fontSize)) + " 0 1 0 " + (insideRadius - (1.8* fontSize)) + "," + 0) .attr("id", "title-arc-2") .attr("stroke", "black") titleCenter.append("text") .append("textPath") .attr("xlink:href", "#title-arc-2") //place the ID of the path here .attr("alignment-baseline", "central") .style("text-anchor", "middle") //place the text halfway on the arc .attr("startOffset", "50%") .text( date) .style("font", 1.8 * fontSize + "px 'Arial Narrow'") .attr("fill", "grey"); return svg.node(); }4e:T1464,function polarChartComp (data, countryName, date) { // Set the svg size; this can be made responsive later (if even wanted) let width = 900; let height = 900; const componentCount = data.length const componentAngle = 2*pi/componentCount const padAngle = 0.005 const insideRadius = 100; const outsideRadius = 400; let rScale = d3.scaleRadial() .domain([0,5]) .range([insideRadius,outsideRadius]) const endX = Math.cos(pi/2 - componentAngle) * rScale(4.5) const endY = -Math.sin(pi/2 - componentAngle) * rScale(4.5) const fontSize = 16 const dimTextRadius = rScale(4.5) const dimText2Radius = dimTextRadius - fontSize // const palette = d3.schemePaired const palette = ["#E3678E", "#E89F2A", "#16BAAE", "#F6B982", "#437ABE"] function crop2arc(j, radius) { let s = radius * componentAngle/j.length; let n = s / (fontSize * 0.55) return n } // Initiate svg const svg = d3.select(DOM.svg(width, height)) .attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`) .style("width", "50%") .style("height", "auto") .style("font", "10px sans-serif"); let compArcs = svg.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => {return "rotate(" + componentAngle * 180/pi * i + ")"} ) .attr("fill", (d, i, j) => palette[i]) .attr("class", "first-level") svg.selectAll("path") .data(data) .enter() .append("path") .attr("d", d3.arc() .innerRadius(insideRadius) .outerRadius( d => rScale(d.maturity)) .startAngle( (d, i) => 2*pi/componentCount * i) // .startAngle(0) // .endAngle(componentAngle) .endAngle((d, i) => 2*pi/componentCount * (i + 1)) ) .attr("fill", (d, i) => palette[i]); compArcs.append("line") .attr("class", "sideline") .attr("x1", 0) .attr("x2", 0) .attr("y1", -insideRadius) .attr("y2", -dimTextRadius) .attr("stroke-width", .5) .attr("stroke", "black") compArcs .append("defs") .append("path") .attr("d", "M0,-" + rScale(4.5) + " A" + rScale(4.5) + "," + rScale(4.5) + " 0 0 1 " + endX + "," + endY) .attr("id", (d, i) => "text-arc-" + i) .attr("stroke", "black") compArcs.append("text") .append("textPath") .attr("xlink:href", (d, i ) => "#text-arc-" + i ) //place the ID of the path here .style("text-anchor", "middle") //place the text halfway on the arc .attr("startOffset", "50%") .text( d => d.component) .style("font", 1.8 * fontSize + "px 'Arial Narrow'") .attr("fill", "black"); let yAxis = (g) => g .attr("text-anchor", "middle") .call(g => g.selectAll("g") .data(rScale.ticks(5).slice(0, -1)) .join("g") .attr("fill", "none") .call(g => g.append("circle") .attr("stroke", "#000") .attr("stroke-opacity", 0.5) .attr("r", d => rScale(d)))) svg.append("g") .call(yAxis) let titleCenter = svg.append("g") .attr("text-anchor", "middle") titleCenter .append("text") .text("Crisis Preparedness") .style("font", 1.8 * fontSize + "px 'Arial Narrow'") titleCenter .append("text") .text("Maturity Levels") .attr("y", 2 * fontSize) .style("font", 1.8 * fontSize + "px 'Arial Narrow'") .attr("alignment-baseline", "central") titleCenter .append("defs") .append("path") .attr("d", "M-" + (insideRadius - (1.8 * fontSize)) + ",0 A" + (insideRadius - (1.8 * fontSize)) + "," + (insideRadius - (1.8 * fontSize)) + " 0 0 1 " + (insideRadius - (1.8 * fontSize)) + "," + 0) .attr("id", "title-arc-1") .attr("stroke", "black") titleCenter.append("text") .append("textPath") .attr("xlink:href", "#title-arc-1") //place the ID of the path here .style("text-anchor", "middle") //place the text halfway on the arc .attr("alignment-baseline", "central") .attr("startOffset", "50%") .text( countryName) .style("font", 1.8 * fontSize + "px 'Arial Narrow'") .attr("fill", "grey"); titleCenter .append("defs") .append("path") .attr("d", "M-" + (insideRadius - (1.8 * fontSize)) + ",0 A" + (insideRadius - (1.8 * fontSize)) + "," + (insideRadius - (1.8 * fontSize)) + " 0 1 0 " + (insideRadius - (1.8* fontSize)) + "," + 0) .attr("id", "title-arc-2") .attr("stroke", "black") titleCenter.append("text") .append("textPath") .attr("xlink:href", "#title-arc-2") //place the ID of the path here .attr("alignment-baseline", "central") .style("text-anchor", "middle") //place the text halfway on the arc .attr("startOffset", "50%") .text( date) .style("font", 1.8 * fontSize + "px 'Arial Narrow'") .attr("fill", "grey"); return svg.node(); }4f:T1251,function heatmap(data, country) { // forEach method (non-standard d3) // Set the svg size; this can be made responsive later (if even wanted) const width = 800; 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 + ": Crisis Preparedness Assessment") .attr("class", "chartTitle") .attr("y", margin.top - rowGap/2) .style("font-size", "16px") // .style("font-weight", "bold") // Color Ramp const colorRamp = heatmapRamp; 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") let mText = multiline(comp.component, width/3 - rowHeight/3, 11) for (let row = 0; row < mText.length; ++row) { svg.append("text") // .attr("width", width/3 - rowHeight/5) // .attr("height", rowHeight) .attr("x", rowHeight/3) .attr("y", margin.top + rowHeight * (i + 1/2) + 15*row - 15 * (mText.length - 1)/2) // .append("xhtml:body") // .html("

" + comp.component + "

") .text(mText[row]) .attr("alignment-baseline", "central") .style("font-weight", "bold") } 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) => { let mTextDim = multiline(dim.dimension, width/3, 11) for (let rowDim = 0; rowDim < mTextDim.length; ++rowDim) { svg.append("text") // .attr("width", width/3) // .attr("height", littleRow) .attr("y", margin.top + (rowHeight * i) + rowGap/2 + littleRow * (j + 1/2) + 15*rowDim - 15 * (mTextDim.length - 1)/2) .attr("x", width / 3) // .append("xhtml:body") // .html("

" + dim.dimension + "

") .text(mTextDim[rowDim]) .attr("alignment-baseline", "central") } 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("text") // .attr("width", width/3 - rowHeight/5) // .attr("height", rowHeight) .attr("y", margin.top + rowHeight * 5 + margin.top/2 + rowHeight / 6) .attr("x", rowHeight/3) // .append("xhtml:body") // .html("

Maturity Level

") .text("Maturity Level") .attr("alignment-baseline", "central") .attr("font-weight", "bold") for (let i = 0; i < 5; ++i) { svg.append("rect") .attr("x", width / 3 + (width / 3 * 2 / 5) * i) .attr("y", margin.top + rowHeight * 5 + margin.top/2) .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 * 5 + margin.top/2 + rowHeight / 6) .attr("height", rowHeight / 3) .attr("fill", "white") .attr("font-weight", "bold") } svg.append("style") .text(css) return svg.node() } 50:T1d99,function heatmapIndicators(data, country) { // forEach method (non-standard d3) // Row height (legend has a half height for now) let rowHeight = 120 let rowGap = 6; // Set the svg size; this can be made responsive later (if even wanted) const width = 800; const height = rowHeight * (data.dimensions.length + 1); let margin = {"top": rowHeight/3, "bottom": rowHeight/3} // Color Ramp // const colorRamp = d3.scaleLinear() // // .domain([0, 1, 2, 3, 4]) // // .range(["#e96c2d", "#f9b090", "#e6e8e9", "#becee2", "#70a1c4"]) // .domain([0, 1, 2, 3, 4]) // // Bianca's (last is my addition) // // .range(["#D22027", "#FDB52A", "#589643", "#027546"]) // // .range(["red", "yellow", "green"]) // // .range(["#F05656", "#F0EB5F", "#60A347", "#335729"]) // .range(["#CD1700", "#F0D657", "#88B68D", "#3A7140", "#154E3D"]) const colorRamp = heatmapRamp; // Initiate svg const svg = d3.select(DOM.svg(width, height)); // svg.append("rect") // // .attr("y", margin.top - rowGap /2 - 16) // .attr("height", margin.top - rowGap/2) // .attr("width", width) // .attr("fill", colorRamp(Math.floor(data.maturity))) // svg.append("text") // .text(country + ": " + data.component + " – " + (Math.round(10 * data.maturity) / 10)) // .attr("y", (margin.top - rowGap)/2) // .attr("x", rowHeight/3) // .attr("class", "chartTitle") // .style("font-size", "16px") // .attr("font-weight", "bold") // .attr("alignment-baseline", "central") // .attr("fill", "white") svg.append("text") .text(country + ": " + data.component) .attr("y", (margin.top - rowGap/2 - 10)) .attr("x", rowHeight/3) .attr("class", "chartTitle") .style("font-size", "16px") .attr("alignment-baseline", "central") svg.append("rect") .attr("y", margin.top - rowGap /2 - 20) .attr("height", "20px") .attr("width", rowHeight/4) .attr("fill", colorRamp(Math.floor(data.maturity))) svg.append("text") .text(Math.round(10 * data.maturity) / 10) // .attr("y", margin.top - rowGap) .attr("y", (margin.top - rowGap/2 - 10)) .attr("x", rowHeight/8) .attr("class", "chartTitle") .style("font-size", "16px") .attr("text-anchor", "middle") .attr("alignment-baseline", "central") .attr("fill", "white") .attr("font-weight", "bold") data.dimensions.forEach( function (dim, 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") let mText = multiline(dim.dimension, width/3 - rowHeight/3, 11) for (let row = 0; row < mText.length; ++row) { svg.append("text") // .attr("width", width/3 - rowHeight/5) // .attr("height", rowHeight) .attr("x", rowHeight/3) .attr("y", margin.top + rowHeight * (i + 1/2) + row * 15 - 15 * (mText.length - 1)/2) // .append("xhtml:body") // .html("

" + dim.dimension + "

") .text(multiline(dim.dimension, width/3 - rowHeight/3, 11)[row]) .attr("alignment-baseline", "central") .style("font-weight", "bold") } console.log("width = "+ width/3) svg.append("rect") .attr("y", margin.top + rowHeight * i + rowGap/2) .attr("height", rowHeight - rowGap) .attr("width", rowHeight/4) .attr("fill", colorRamp(Math.floor(dim.maturity))) let littleRow = (rowHeight - rowGap)/dim.indicators.length dim.indicators.forEach( (ind, j) => { let mTextInd = multiline(ind.indicator, width/3, 11) for (let rowInd = 0; rowInd < mTextInd.length; ++rowInd) { svg.append("text") // .attr("width", width/3) // .attr("height", littleRow) // .attr("alignment-baseline", "central") // .attr("height", rowHeight / comp.dimensions.length) .attr("y", margin.top + (rowHeight * i) + rowGap/2 + littleRow * (j + 1/2) + 15*rowInd - (mTextInd.length-1)*15/2) .attr("x", width / 3) // .append("xhtml:body") // .html("

" + ind.indicator + "

") // .attr("y", 10) // .attr("x", 10) .text(multiline(ind.indicator, width/3, 11)[rowInd]) .attr("alignment-baseline", "central") } // dim.indicators.forEach( (ind, j) => { // svg.append("text") // .attr("alignment-baseline", "central") // // .attr("height", rowHeight / comp.dimensions.length) // .text(ind.indicator) // // .attr("y", 10) // // .attr("x", 10) // .attr("y", margin.top + (rowHeight * i) + (rowHeight / dim.indicators.length) * (j + 0.5)) // .attr("x", width / 3) 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(ind.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 * ind.maturity) / 10) // .text(dim.maturity) .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 + data.dimensions.length * rowHeight) .attr("y2", margin.top + data.dimensions.length * rowHeight) .attr("stroke-width", 0.75) .attr("stroke", "#999999") svg.append("text") // .attr("width", width/3 - rowHeight/5) // .attr("height", rowHeight) .attr("y", margin.top + rowHeight * data.dimensions.length + margin.top/2 + rowHeight / 6) .attr("x", rowHeight/3) // .append("xhtml:body") // .html("

Maturity Level

") .text("Maturity Level") .attr("alignment-baseline", "central") .style("font-weight", "bold") for (let i = 0; i < 5; ++i) { svg.append("rect") .attr("x", width / 3 + (width / 3 * 2 / 5) * i) .attr("y", margin.top + rowHeight * (data.dimensions.length) + margin.top/2) .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 * data.dimensions.length + margin.top/2 + rowHeight / 6) .attr("height", rowHeight / 3) .attr("fill", "white") .attr("font-weight", "bold") } svg.append("style") .text(css) return svg.node() } 51:[] 48:{"id":"25f0ceda7f6cb1b0","slug":"cpga-plots","title":"CPGA Plots","thumbnail":"667983cb76233fc8bcdb48f4b0266f3716ec5d97159f27ebd1a5e919a938b979","access_level":"public","create_time":"$D2021-06-24T20:18:44.413Z","update_time":"$D2023-10-31T18:53:11.627Z","view_time":null,"first_public_time":"$D2023-10-31T15:51:58.666Z","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":348,"publish_version":null,"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":"CPGA Plots","cells":[{"id":0,"value":"# CPGA Plots\n\nUse this page to generate the polar chart for the CPGA analysis.\n\n1. Type in the country name and the data of the CPGA. (These will appear in the center of the chart).\n2. Select the CSV of the CPGA. (This CSV currently requires pre-processing; it is different than first page of the Excel spreadsheet. The data is not stored on this page after you close the page.)\n\nTo download each chart\n1. Hover your cursor over the chart and click the three dots that appear to the left.\n2. Select \"Download SVG\" or \"Download PNG\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"viewof countryName = Inputs.text({label: \"Country\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"viewof month = Inputs.text({label: \"CPGA Date\", value: currentMonth})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"viewof dataFile = Inputs.file({label: \"CPGA CSV\", accept: \".csv\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"polar = polarChart(country, countryName, month)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"polarComp = polarChartComp(country, countryName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"heatmap_components = heatmap(country, countryName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"heatmap_legal = heatmapIndicators(country[0], countryName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"heatmap_risk = heatmapIndicators(country[1], countryName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"heatmap_financial = heatmapIndicators(country[2], countryName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"heatmap_emergency = heatmapIndicators(country[3], countryName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"heatmap_lastmile = heatmapIndicators(country[4], countryName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"heatmapRamp = d3.scaleLinear()\n .domain([0, 1, 2, 3, 4])\n .range([\"#E00201\", \"#fdb52a\", \"#78ab69\", \"#2D8645\", \"#025835\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"multiline = (string, lineLength, fontSize) => {\n let n = lineLength / (fontSize * 0.55);\n console.log(\"n = \" + n)\n let lines = [];\n while (string.length > 0) {\n // for (let index = 0; index < 5; ++index) {\n console.log(string)\n if (n >= string.length) {\n lines.push(string);\n string = \"\";\n } else {\n let maxString = string.slice(0, n);\n let lastWhite = maxString.lastIndexOf(\" \");\n if (lastWhite <= 0) {\n lines.push(string.slice(0, n))\n string = string.slice(n)\n } else { \n lines.push(string.slice(0,lastWhite));\n string = string.slice(lastWhite + 1);\n }\n }\n }\n return lines\n} \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"function slugify (str) {\n str = str.replace(/^\\s+|\\s+$/g, ''); // trim\n str = str.toLowerCase();\n \n // remove accents, swap ñ for n, etc\n var from = \"àáäâèéëêìíïîòóöôùúüûñç·/_,:;\";\n var to = \"aaaaeeeeiiiioooouuuunc------\";\n for (var i=0, l=from.length ; i