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() }