25:["$","title",null,{"children":"Tunis, Tunisia: Plotted | Caroline Cullinan | Observable"}] 49:T514,legend_elevation = { const svg = d3.create("svg") .attr("width", 200) .attr("height", 180); const legendGroup = svg.append("g") .attr("transform", "translate(20, 20)"); // title legendGroup.append("text") .attr("x", 0) .attr("y", 0) .attr("font-weight", "bold") .attr("font-size", "14px") .text("Elevation"); legendGroup.append("text") .attr("x", 0) .attr("y", 20) .attr("font-style", "italic") .attr("font-size", "12px") .text("Meters above sea level (MASL)"); const data = [ { range: "-5-40", color: "#f5c4c0" }, { range: "40-90", color: "#fa9fb5" }, { range: "90-135", color: "#f768a1" }, { range: "135+", color: "#c51b8a" } //{ range: "135-235", color: "#980043" } ]; const legendEntries = legendGroup.selectAll(".legend-entry") .data(data) .join("g") .attr("class", "legend-entry") .attr("transform", (d, i) => `translate(0, ${i * 25 + 40})`); // colored rectangles legendEntries.append("rect") .attr("width", 15) .attr("height", 15) .attr("fill", d => d.color); // text labels legendEntries.append("text") .attr("x", 25) .attr("y", 12) .text(d => d.range) .style("font-size", "12px") .style("font-family", "Arial"); return svg.node(); }4a:T501,legend_slope = { const svg = d3.create("svg") .attr("width", 200) .attr("height", 180); const legendGroup = svg.append("g") .attr("transform", "translate(20, 20)"); // title legendGroup.append("text") .attr("x", 0) .attr("y", 0) .attr("font-weight", "bold") .attr("font-size", "14px") .text("Slope"); legendGroup.append("text") .attr("x", 0) .attr("y", 20) .attr("font-style", "italic") .attr("font-size", "12px") .text("Angle of hillside in degrees"); const data = [ { range: "0-2", color: "#ffffd4" }, { range: "2-5", color: "#fed98e" }, { range: "5-10", color: "#fe9929" }, { range: "10-20", color: "#d95f0e" }, { range: "20+", color: "#993404" } ]; const legendEntries = legendGroup.selectAll(".legend-entry") .data(data) .join("g") .attr("class", "legend-entry") .attr("transform", (d, i) => `translate(0, ${i * 25 + 40})`); // colored rectangles legendEntries.append("rect") .attr("width", 15) .attr("height", 15) .attr("fill", d => d.color); // text labels legendEntries.append("text") .attr("x", 25) .attr("y", 12) .text(d => d.range) .style("font-size", "12px") .style("font-family", "Arial"); return svg.node(); }4b:T1955,// function that plots pga (i.e., absolute population growth) (population growth, xxxx - xxxx) to create pga chart function plot_pga(pg, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Population", xLabel = "Year", color = "black" } = {}) { return Plot.plot({ title: `Population Growth, ${d3.min(pg, d => d.yearName)}-${d3.max(pg, d => d.yearName)}`, subtitle: cityName, width: plotWidth, // make width 95% of container/viewport height: plotWidth * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio) marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) // marginLeft: 50, // marginRight: 30, // marginTop: 30, // marginBottom: 40, y: { label: yLabel, domain: [0, Math.max(...pg.map(d => d.population)) * 1.1], //dynamic with padding //1.5 invece di 1.1 (1.1, come plot_ubaa for consistency) // tickformat as function to avoid syntax issues - eventually make this more dyanmic instead of hard coding everything tickFormat: d => { if (d === 0) return "0"; if (d === 100000) return "100K"; if (d === 200000) return "200K"; if (d === 300000) return "300K"; if (d === 400000) return "400K"; if (d === 500000) return "500K"; if (d === 600000) return "600K"; if (d === 700000) return "700K"; if (d === 800000) return "800K"; if (d === 900000) return "900K"; if (d === 1000000) return "1M"; if (d === 1100000) return "1.1M"; if (d === 1200000) return "1.2M"; if (d === 1300000) return "1.3M"; if (d === 1400000) return "1.4M"; if (d === 1500000) return "1.5M"; if (d === 1600000) return "1.6M"; if (d === 1700000) return "1.7M"; if (d === 1800000) return "1.8M"; if (d === 1900000) return "1.9M"; if (d === 2000000) return "2M"; if (d === 2100000) return "2.1M"; if (d === 2200000) return "2.2M"; if (d === 2300000) return "2.3M"; if (d === 2400000) return "2.4M"; if (d === 2500000) return "2.5M"; if (d === 2600000) return "2.6M"; if (d === 2700000) return "2.7M"; if (d === 2800000) return "2.8M"; if (d === 2900000) return "2.9M"; if (d === 3000000) return "3M"; if (d === 3100000) return "3.1M"; if (d === 3200000) return "3.2M"; if (d === 3300000) return "3.3M"; if (d === 3400000) return "3.4M"; if (d === 3500000) return "3.5M"; if (d === 3600000) return "3.6M"; if (d === 3700000) return "3.7M"; if (d === 3800000) return "3.8M"; if (d === 3900000) return "3.9M"; if (d === 4000000) return "4M"; if (d === 4100000) return "4.1M"; if (d === 4200000) return "4.2M"; if (d === 4300000) return "4.3M"; if (d === 4400000) return "4.4M"; if (d === 4500000) return "4.5M"; if (d === 4600000) return "4.6M"; if (d === 4700000) return "4.7M"; if (d === 4800000) return "4.8M"; if (d === 4900000) return "4.9M"; if (d === 5000000) return "5M"; if (d === 5100000) return "5.1M"; if (d === 5200000) return "5.2M"; if (d === 5300000) return "5.3M"; if (d === 5400000) return "5.4M"; if (d === 5500000) return "5.5M"; if (d === 5600000) return "5.6M"; if (d === 5700000) return "5.7M"; if (d === 5800000) return "5.8M"; if (d === 5900000) return "5.9M"; if (d === 6000000) return "6M"; if (d === 6100000) return "6.1M"; if (d === 6200000) return "6.2M"; if (d === 6300000) return "6.3M"; if (d === 6400000) return "6.4M"; if (d === 6500000) return "6.5M"; if (d === 6600000) return "6.6M"; if (d === 6700000) return "6.7M"; if (d === 6800000) return "6.8M"; if (d === 6900000) return "6.9M"; if (d === 7000000) return "7M"; if (d === 7100000) return "7.1M"; if (d === 7200000) return "7.2M"; if (d === 7300000) return "7.3M"; if (d === 7400000) return "7.4M"; if (d === 7500000) return "7.5M"; if (d === 7600000) return "7.6M"; if (d === 7700000) return "7.7M"; if (d === 7800000) return "7.8M"; if (d === 7900000) return "7.9M"; if (d === 8000000) return "8M"; if (d === 8100000) return "8.1M"; if (d === 8200000) return "8.2M"; if (d === 8300000) return "8.3M"; if (d === 8400000) return "8.4M"; if (d === 8500000) return "8.5M"; if (d === 8600000) return "8.6M"; if (d === 8700000) return "8.7M"; if (d === 8800000) return "8.8M"; if (d === 8900000) return "8.9M"; if (d === 9000000) return "9M"; if (d === 9100000) return "9.1M"; if (d === 9200000) return "9.2M"; if (d === 9300000) return "9.3M"; if (d === 9400000) return "9.4M"; if (d === 9500000) return "9.5M"; if (d === 9600000) return "9.6M"; if (d === 9700000) return "9.7M"; if (d === 9800000) return "9.8M"; if (d === 9900000) return "9.9M"; if (d === 10000000) return "10M"; if (d === 11000000) return "10.1M"; if (d === 12000000) return "10.2M"; if (d === 13000000) return "10.3M"; if (d === 14000000) return "10.4M"; if (d === 15000000) return "10.5M"; if (d === 16000000) return "10.6M"; if (d === 17000000) return "10.7M"; if (d === 18000000) return "10.8M"; if (d === 19000000) return "10.9M"; return d; }, grid: true, }, x: { label: xLabel, tickFormat: "d", ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) }, marks: [ Plot.line(pg, { x: "yearName", y: "population", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pg, { x: "yearName", y: "population", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nPopulation: ${d.population.toLocaleString()}`, tip: true }) ] }); }4c:T81e,// function that plots pgp (population growth percentage, xxxx - xxxx) to create pgp chart function plot_pgp(pg, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Population Growth Percentage", xLabel = "Year", color = "black" } = {}) { return Plot.plot({ title: `Population Growth Percentage, ${d3.min(pg, d => d.yearName)}-${d3.max(pg, d => d.yearName)}`, subtitle: cityName, width: plotWidth, // make width 95% of container/viewport height: plotWidth * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio) marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) // marginLeft: 50, // marginRight: 30, // marginTop: 30, // marginBottom: 40, y: { label: yLabel, domain: [0, Math.max(...pg.map(d => d.populationGrowthPercentage)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true, }, x: { label: xLabel, tickFormat: "d", ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) grid: true }, marks: [ Plot.line(pg, { x: "yearName", y: "populationGrowthPercentage", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pg, { x: "yearName", y: "populationGrowthPercentage", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nGrowth Percentage: ${d.populationGrowthPercentage !== null ? d.populationGrowthPercentage.toFixed(2) + '%' : 'N/A'}`, tip: true }) ] }); }4d:Td24,// function that plots pas (population age, sex) to create pas chart (i.e., Population Distribution by Age & Sex, xxxx) function plot_pas(pas, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Percentage of Age Distribution", color = "black" } = {}) { return Plot.plot({ title: `Population distribution by age and sex, ${d3.max(pg, d => d.yearName)}`, subtitle: cityName, width: width, height: width * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio), marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) x: { label: null, tickRotate: -45, paddingOuter: 1.3, paddingInner: .6, domain: [ "0-4", "5-9", "10-14", "15-19", "20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75-79", "80+" ] }, y: { label: "Percentage of Age Distribution", domain: [0, Math.max(...pas.map(d => d.percentage)) * 1.5], // dynamic domain based on data grid: true, ticks: Math.max(4, Math.min(8, Math.floor(width / 100))) // dynamic tick count }, color: { domain: ["female", "male"], range: ["#f05f5c", "#00b4b7"], legend: true }, marks: [ // female bars left with tooltips Plot.barY( pas.filter(d => d.sex === "female"), { x: "ageBracket", y: "percentage", fill: "#f05f5c", dx: -barOffset, // responsive bar offset width: barOffset * 1.5 // consistent bar width }), // male bars right with tooltips Plot.barY( pas.filter(d => d.sex === "male"), { x: "ageBracket", y: "percentage", fill: "#00b4b7", dx: barOffset, // responsive bar offset width: barOffset // consistent width }), Plot.ruleY([0]), // invisible vertical rule for unified tooltip Plot.ruleX( // get unique age brackets for tooltip positioning [...new Set(pas.map(d => d.ageBracket))].map(bracket => ({ ageBracket: bracket })), { x: "ageBracket", y1: 0, y2: Math.max(...pas.map(d => d.percentage)) * 1.5, stroke: "transparent", strokeWidth: 50, // wide invisible area for easy hovering title: d => { // find female and male values for this age bracket const femaleData = pas.find(row => row.ageBracket === d.ageBracket && row.sex === "female"); const maleData = pas.find(row => row.ageBracket === d.ageBracket && row.sex === "male"); return `Age Bracket: ${d.ageBracket} ━━━━━━━━━━━━━━━━━━━ Female: ${femaleData?.percentage.toFixed(2)}% (${femaleData?.count.toFixed(0)} females) Male: ${maleData?.percentage.toFixed(2)}% (${maleData?.count.toFixed(0)} males)`; }, tip: true } ) ] }) }4e:T79a,// function that plots ubaa (i.e., absolute urban extent and change) to create ubaa chart (i.e., Urban Extent and Change chart, xxxx - xxxx) function plot_ubaa(uba, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Urban built-up area (sq km)", xLabel = "Year", color = "black" } = {}) { return Plot.plot({ title: `Urban Built-up Area, ${d3.min(uba, d => d.yearName)}-${d3.max(uba, d => d.yearName)}`, subtitle: cityName, width: width, height: width * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio) marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) x: { label: xLabel, domain: [1, uba.length], // dynamic based on data length tickFormat: d => d3.format("d")(uba[d-1].yearName), // format as integer with no commas ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) }, y: { label: yLabel, domain: [0, Math.max(...uba.map(d => d.uba)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true }, marks: [ Plot.line(uba, { x: "year", y: "uba", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(uba, { x: "year", y: "uba", fill: "black", r: Math.max(2, Math.min(3, width / 200)), title: d => `Year: ${d.yearName}\n${yLabel}: ${d.uba.toLocaleString()}`, tip: true }), ] }); }4f:T7c9,// function that plots ubap (urban extent and change growth percentage, xxxx - xxxx) to create ubap chart function plot_ubap(uba, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Urban Built-up area Growth Percentage", xLabel = "Year", color = "black" } = {}) { return Plot.plot({ title: `Urban Built-up Area Growth Percentage, ${d3.min(uba, d => d.yearName)}-${d3.max(uba, d => d.yearName)}`, subtitle: cityName, width: plotWidth, // make width 95% of container/viewport height: plotWidth * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio) marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) y: { label: yLabel, domain: [0, Math.max(...uba.map(d => d.ubaGrowthPercentage)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true, }, x: { label: xLabel, tickFormat: "d", ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) grid: true }, marks: [ Plot.line(uba, { x: "yearName", y: "ubaGrowthPercentage", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(uba, { x: "yearName", y: "ubaGrowthPercentage", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nGrowth Percentage: ${d.ubaGrowthPercentage !== null ? d.ubaGrowthPercentage.toFixed(2) + '%' : 'N/A'}`, tip: true }) ] }); }50:T2361,// function that plots lc to create lc tree map (i.e., land cover types) plot_lc = function(lc, { width = plotWidth, height = plotWidth * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio) cityName = "City", //subtitle = "Land Cover Classification" } = {}) { // filter and prepare data const filtered = lc .filter(d => d.percentage > 0) .sort((a, b) => b.percentage - a.percentage); const hierarchyData = { name: `Land Cover in ${cityName}`, children: filtered.map(d => ({ name: d.lcType, value: d.percentage, pixelCount: d.pixelCount })) }; //color scale - dynamic mapping based on actual data const landCoverColors = { "Cropland": "#eaa86f", "Built up": "#d3605f", "Grassland": "#9bbb7f", "Tree cover": "#629777", "Permanent water bodies": "#61acdc", "Shrubland": "#e2c985", "Bare sparse vegetation": "#b4ada4", "Herbaceous wetland": "#979ec9", "Snow and ice": "#e2e3e3", "Mangroves": "#48d394", "Moss and lichens": "#f6eba0" }; // create color scale based on actual data present const actualLandCoverTypes = hierarchyData.children.map(d => d.name); const colorScale = d3.scaleOrdinal() .domain(actualLandCoverTypes) .range(actualLandCoverTypes.map(type => landCoverColors[type] || "#cccccc")); // create hierarchy and layout const root = d3.hierarchy(hierarchyData) .sum(d => d.value) .sort((a, b) => b.value - a.value); d3.treemap() .size([width, height]) .padding(2) .round(true)(root); // create svg with plot class const svg = d3.create("svg") .attr("class", "plot") .attr("width", "100%") // changed to "100%" instead of fixed, width .attr("height", "auto") // changed to "auto" instead of fixed, height + 40 .attr("viewBox", `0 0 ${width} ${height + 60}`) .attr("preserveAspectRatio", "xMidYMid meet") // added for proper scaling .style("max-width", "100%") // added to prevent overflow // add chart title - wrapped in g element to match other plots // const titleGroup = svg.append("g").attr("aria-label", "title"); // titleGroup.append("text") // .attr("x", 0) // .attr("y", -10) // .attr("text-anchor", "left") // .style("font-family", "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif") // .style("font-weight", "300") // .style("fill", "#333") // .text(`Land Cover Types in ${cityName}`); // create tooltip div matching other plot.plot plots const tooltip = d3.select("body").append("div") .attr("class", "treemap-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "0px") .style("padding", "6px 8px") .style("font-family", "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif") .style("font-size", "clamp(11px, 0.8vw, 13px)") .style("color", "#333") .style("pointer-events", "none") .style("z-index", "1000") .style("line-height", "1.2"); // create cells const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0 + 40})`); // add land cover rectangles with custom tooltips leaf.append("rect") .attr("fill", d => colorScale(d.data.name)) .attr("fill-opacity", 0.8) .attr("stroke", "white") .attr("stroke-width", 1) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .on("mouseover", function(event, d) { d3.select(this).attr("fill-opacity", 1); tooltip.style("visibility", "visible") .text(`${d.data.name}: ${d.data.value.toFixed(1)}%`); }) .on("mousemove", function(event) { const tooltipWidth = 200; // approximate tooltip width const windowWidth = window.innerWidth; const mouseX = event.pageX; // check if tooltip bleeds off right edge let leftPos = mouseX + 10; if (leftPos + tooltipWidth > windowWidth) { leftPos = mouseX - tooltipWidth - 10; // position tooltip the left instead in case of bleeding } tooltip.style("top", (event.pageY - 35) + "px") .style("left", leftPos + "px"); }) .on("mouseout", function(event, d) { d3.select(this).attr("fill-opacity", 0.8); tooltip.style("visibility", "hidden"); }); // add labels with dynamic text sizing (improved scale, 03june2025) leaf.filter(d => (d.x1 - d.x0) > 60 && (d.y1 - d.y0) > 35) .each(function(d) { const g = d3.select(this); const rectWidth = d.x1 - d.x0; // calculate dynamic font size based on rectangle size AND viewport const baseFontSize = Math.max(10, Math.min(18, rectWidth / 12)); // increased min and max // Math.max(8, Math.min(16, rectWidth / 16)); //12 const viewportScale = Math.max(0.8, Math.min(1.4, width / 600)); // new scaling range // Math.max(0.6, Math.min(1.2, width / 800)); // scale based on chart width const dynamicFontSize = baseFontSize * viewportScale; // split long text into multiple lines const words = d.data.name.split(/\s+/); const maxCharsPerLine = Math.floor(rectWidth / (dynamicFontSize * 0.6)); let lines = []; let currentLine = ""; words.forEach(word => { if ((currentLine + word).length <= maxCharsPerLine) { currentLine += (currentLine ? " " : "") + word; } else { if (currentLine) lines.push(currentLine); currentLine = word; } }); if (currentLine) lines.push(currentLine); // add text lines with dynamic sizing lines.forEach((line, i) => { if (i < 2) { g.append("text") .attr("x", 4) .attr("y", 16 + (i * (dynamicFontSize + 2))) .style("font-family", "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif") .style("font-weight", "600") .style("font-size", `${dynamicFontSize}px`) .style("fill", "#333") .style("pointer-events", "none") .text(line); } }); }); // add percentage labels with dynamic sizing leaf.filter(d => (d.x1 - d.x0) > 50 && (d.y1 - d.y0) > 50) .append("text") .attr("x", 4) .attr("y", d => { const rectWidth = d.x1 - d.x0; const baseFontSize = Math.max(8, Math.min(14, rectWidth / 10)); // increased min and max // Math.max(6, Math.min(12, rectWidth / 12)); const viewportScale = Math.max(0.8, Math.min(1.4, width / 600)); // new scaling range // Math.max(0.6, Math.min(1.2, width / 800)); return 40 + (baseFontSize * viewportScale); }) .style("font-family", "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif") .style("font-size", d => { const rectWidth = d.x1 - d.x0; const baseFontSize = Math.max(7, Math.min(12, rectWidth / 12)); // increased min and max // Math.max(5, Math.min(10, rectWidth / 15)); const viewportScale = Math.max(0.8, Math.min(1.4, width / 600)); // new scaling range // Math.max(0.6, Math.min(1.2, width / 800)); return `${baseFontSize * viewportScale}px`; }) .style("fill", "#141414") .style("pointer-events", "none") .text(d => `${d.data.value.toFixed(1)}%`); // // add legend (horizontal layout and ordered by prevalence) // const legendData = hierarchyData.children // .sort((a, b) => b.value - a.value) // sort by land cover prevalence percentage, descending order // .slice(0, 8); // show top 8 most prevalent land cover types // const legend = svg.append("g") // .attr("class", "legend") // .attr("transform", `translate(0, 10})`); // // calculate spacing // const legendItemWidth = width / legendData.length; // legendData.forEach((item, i) => { // const legendItem = legend.append("g") // .attr("transform", `translate(${i * legendItemWidth}, 10)`); // // legend color square // legendItem.append("rect") // .attr("width", 12) // .attr("height", 12) // .attr("fill", colorScale(item.name)); // // legend text // legendItem.append("text") // .attr("x", 0) // .attr("y", 22) // Below the square // .attr("text-anchor", "middle") // Center the text // .style("font-family", "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif") // .style("font-size", "clamp(10px, 0.8vw, 12px)") // .style("fill", "#333") // .text(item.name); // return svg.node(); // wrap in container for better display const container = d3.create("div").attr("class", "plot-container"); // add h2 title container.append("h2") .text(`Land Cover Types`); // add h3 subtitle container.append("h3") .text(`${cityName}`); container.node().appendChild(svg.node()); return container.node(); }51:T966,// function that plots pv to create pv chart (i.e., Seasonal availability of solar energy, January - December) function plot_pv(pv, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Daily PV energy yield (kWh/kWp)", color = "black" } = {}) { return Plot.plot({ title: "Seasonal availability of solar energy, January - December", subtitle: cityName, width: width, height: width * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio), marginLeft: Math.max(30, width * 0.03), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) x: { label: null, domain: [0.5, 12.5], // extend domain slightly beyond 1-12 for better mapping of January ticks: d3.range(1, 13), // force all 12 ticks tickFormat: d => pv[d-1]?.monthName || "", grid: true }, y: { label: yLabel, domain: [0, Math.max(...pv.map(d => d.maxPv)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true }, marks: [ Plot.line(pv, { x: "month", y: "maxPv", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pv, { x: "month", y: "maxPv", fill: "black", r: 4, title: d => `Month: ${d.monthName} Daily PV energy yield: ${d.maxPv} kWh/kWp`, tip: true }), // horizontal dashed lines Plot.ruleY([4.5], { stroke: "gray", strokeWidth: 1.5, strokeDasharray: "5,5" }), Plot.ruleY([3.5], { stroke: "gray", strokeWidth: 1.5, strokeDasharray: "5,5" }), // annotations Plot.text( ["Excellent Conditions"], { x: 6, y: 4.7, dy: -5, textAnchor: "middle", fontWeight: "bold", fontSize: 14, fill: "gray" } ), Plot.text( ["Favorable Conditions"], { x: 6, y: 3.7, dy: -5, textAnchor: "middle", fontWeight: "bold", fontSize: 14, fill: "gray" } ) ] }); }52:T81c,// function that plots flood events to create (scatter) flood event chart (i.e., Large flood events in xxxx) function plot_fe(fe, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Year", color = "black" } = {}) { return Plot.plot({ title: "Large flood events, 1985-2025", subtitle: cityName, width: width, height: width * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio), marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.06) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.06) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(60, width * 0.05) x: { label: null, domain: [0.5, 12.5], // extend domain slightly beyond 1-12 for better mapping of January ticks: d3.range(1, 13), // force all 12 ticks tickFormat: d => pv[d-1]?.monthName || "", grid: true }, y: { label: yLabel, tickFormat: d => d3.format("d")(d), // format as integer with no commas domain: [1980, 2026], ticks: d3.range(1985, 2026, Math.max(5, Math.min(10, Math.floor((width * 0.6) / 40)))), // start at 1985, end at 2025, dynamic interval grid: true }, r: { range: [Math.max(3, Math.min(8, width / 150)), Math.max(15, Math.min(40, width / 25))], // dynamic size range based on width }, color: { domain: ["Large event", "Very large event"], range: ["#87CEEB", "#000080"], legend: true }, marks: [ Plot.dot(fe, { x: "begin_month", y: "begin_year", r: "DISPLACED", fill: "severity", fillOpacity: 0.7, stroke: "black", strokeWidth: Math.max(0.5, Math.min(2, width / 400)), // dynamic stroke width title: d => `${d.line1}: ${d.line2}, ${d.line3}`, tip: true }), ] }); } 53:T711,// function that plots fu to create fu chart (i.e., built-up area exposed to river (fluvial) flooding chart, xxxx - xxxx) function plot_fu(fu, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Exposed urban built-up area (sq km)", color = "black" } = {}) { return Plot.plot({ title: `Built-up Area exposed to fluvial flooding, ${d3.min(fu, d => d.yearName)}-${d3.max(fu, d => d.yearName)}`, subtitle: cityName, width: width, height: width * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio), marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) x: { label: null, tickFormat: d => d3.format("d")(fu[d-1].yearName), // format as integer with no commas domain: [1, fu.length], // dynamic based on data length ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) grid: true }, y: { label: yLabel, domain: [0, Math.max(...fu.map(d => d.fu)) * 1.2], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true }, marks: [ Plot.line(fu, { x: "year", y: "fu", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)), title: d => `Year: ${d.yearName}\n${yLabel}: ${d.fu.toLocaleString()}`, tip: true }), ] }); }54:T718,// function that plots pu to create pu chart (i.e., built-up area exposed to rainwater (pluvial) flooding chart, xxxx - xxxx) function plot_pu(pu, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Exposed urban built-up area (sq km)", color = "black" } = {}) { return Plot.plot({ title: `Built-up Area exposed to pluvial flooding, ${d3.min(pu, d => d.yearName)}-${d3.max(pu, d => d.yearName)}`, subtitle: cityName, width: width, height: width * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio), marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) x: { label: null, tickFormat: d => d3.format("d")(pu[d-1].yearName), // format as integer with no commas domain: [1, pu.length], // dynamic based on data length ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) grid: true }, y: { label: yLabel, domain: [0, Math.max(...pu.map(d => d.pu)) * 1.2], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true }, marks: [ Plot.line(pu, { x: "year", y: "pu", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)), title: d => `Year: ${d.yearName}\n${yLabel}: ${d.pu.toLocaleString()}`, tip: true }), ] }); }55:T70a,// function that plots cu to create cu chart (i.e., built-up area exposed to coastal flooding chart, xxxx - xxxx) function plot_cu(cu, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Exposed urban built-up area (sq km)", color = "black" } = {}) { return Plot.plot({ title: `Built-up Area exposed to coastal flooding, ${d3.min(cu, d => d.yearName)}-${d3.max(cu, d => d.yearName)}`, subtitle: cityName, width: width, height: width * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio), marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) x: { label: null, tickFormat: d => d3.format("d")(cu[d-1].yearName), // format as integer with no commas domain: [1, cu.length], // dynamic based on data length ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) grid: true }, y: { label: yLabel, domain: [0, Math.max(...cu.map(d => d.cu)) * 1.2], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true }, marks: [ Plot.line(cu, { x: "year", y: "cu", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)), title: d => `Year: ${d.yearName}\n${yLabel}: ${d.cu.toLocaleString()}`, tip: true }), ] }); }56:Td5c,// function that plots comb to create comb chart (i.e., built-up area exposed to combined flooding chart, xxxx - xxxx) function plot_comb(comb, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Exposed urban built-up area (sq km)", color = "black" } = {}) { return Plot.plot({ title: `Built-up Area exposed to combined flooding, ${d3.min(comb, d => d.yearName)}-${d3.max(comb, d => d.yearName)}`, subtitle: cityName, width: width, height: width * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio), marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) // marginLeft: 60, // marginBottom: 40, x: { label: null, tickFormat: d => d3.format("d")(comb[d-1].yearName), // format as integer with no commas domain: [1, comb.length], // dynamic based on data length ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) grid: true }, y: { label: yLabel, domain: [0, Math.max(...comb.map(d => d.comb)) * 1.2], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true }, marks: [ Plot.line(comb, { x: "year", y: "comb", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.line(pu, { x: "year", y: "pu", stroke: "#619cfe", strokeWidth: Math.max(1.5, Math.min(3, width / 400)), strokeDasharray: `${Math.max(2, Math.min(6, width / 200))},${Math.max(2, Math.min(6, width / 200))}` }), Plot.line(fu, { x: "year", y: "fu", stroke: "#f8766d", strokeWidth: Math.max(1.5, Math.min(3, width / 400)), strokeDasharray: `${Math.max(2, Math.min(6, width / 200))},${Math.max(2, Math.min(6, width / 200))}` }), Plot.line(cu, { x: "year", y: "cu", stroke: "#02b939", strokeWidth: Math.max(1.5, Math.min(3, width / 400)), strokeDasharray: `${Math.max(2, Math.min(6, width / 200))},${Math.max(2, Math.min(6, width / 200))}` }), // invisible vertical rule for unified tooltip Plot.ruleX(comb, { x: "year", y1: "comb", y2: d => d.comb + 5, stroke: "transparent", strokeWidth: 10, title: d => { // find corresponding values for this year in all datasets const puValue = pu.find(p => p.year === d.year)?.pu || 0; const fuValue = fu.find(f => f.year === d.year)?.fu || 0; const cuValue = cu.find(c => c.year === d.year)?.cu || 0; return `Year: ${d.yearName} ━━━━━━━━━━━━ Combined: ${d.comb} sq km Pluvial: ${puValue.toFixed(1)} sq km Fluvial: ${fuValue.toFixed(1)} sq km Coastal: ${cuValue.toFixed(1)} sq km`; }, tip: true }) ], // legend color: { legend: true, domain: ["Combined", "River", "Rainwater", "Coastal"], range: ["black", "#f8766d", "#619cfe", "#02b939"] } }); }57:T81d,// function that plots earthquake events to create (scatter) earthquake event chart (i.e., Significant Earthquakes within 500 km of xxxx since 1900) function plot_ee(ee, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Year", xLabel = `Distance from ${cityName}` } = {}) { // get magnitude range from actual data const magnitudes = ee.map(d => d.eqMagnitude).filter(d => d != null); const minMag = Math.min(...magnitudes); const maxMag = Math.max(...magnitudes); return Plot.plot({ title: "Significant Earthquakes within 500 km since 1900", subtitle: cityName, width: width, height: width * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio), marginLeft: Math.max(40, width * 0.04), // dynamic left margin marginRight: Math.max(20, width * 0.02), // dynamic right margin // Math.max(10, width * 0.01) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) x: { label: xLabel, domain: [0, 500], ticks: Math.max(4, Math.min(10, Math.floor(width / 80))), grid: true }, y: { label: yLabel, tickFormat: d => d3.format("d")(d), // format as integer with no commas domain: [1900, 2026], ticks: d3.range(1900, 2026, Math.max(5, Math.min(10, Math.floor((width * 0.6) / 40)))), // start at 1900, end at 2025, dynamic interval (note: data ends after 2021) }, r: { domain: [minMag, maxMag], // use actual data range range: [Math.max(2, Math.min(5, width / 200)), Math.max(12, Math.min(25, width / 40))] // dynamic size range }, marks: [ Plot.dot(ee, { x: "distance", y: "begin_year", r: "eqMagnitude", fill: "grey", opacity: 0.5, stroke: "black", strokeWidth: Math.max(0.5, Math.min(1.5, width / 500)), // dynamic stroke width title: d => `${d.text}`, tip: true }), ] }); }58:T7aa,// function that plots fwi to create fwi chart (i.e., fire weather index chart, January - December) function plot_fwi(fwi, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "95th Percentile FWI", color = "black" } = {}) { return Plot.plot({ title: "Fire Weather Index (FWI), January - December", subtitle: cityName, width: width, height: width * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio), marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) x: { label: null, // show ticks only for first occurrence of each month tickFormat: (d, i) => { const currentMonth = fwi[d-1].monthName; const prevMonth = d > 1 ? fwi[d-2].monthName : null; return currentMonth !== prevMonth ? currentMonth : ""; }, domain: [1, fwi.length], // dynamic based on data length // only include first week of each month ticks: d3.range(1, 53).filter(week => { const currentMonth = fwi[week-1].monthName; const prevMonth = week > 1 ? fwi[week-2].monthName : null; return currentMonth !== prevMonth; }), grid: true }, y: { label: yLabel, domain: [0, Math.max(...fwi.map(d => d.fwi)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true }, marks: [ Plot.line(fwi, { x: d => d.week, y: "fwi", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)), title: d => `Month: ${d.monthName}\nFWI: ${d.fwi.toFixed(2)}`, tip: true }) ] }); }59:T790,// function that plots d (i.e., density) (Density, xxxx - xxxx) to create d chart function plot_d(pug, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Density (people / sq km)", xLabel = "Year", color = "black" } = {}) { return Plot.plot({ title: `Density, ${d3.min(pug, d => d.yearName)}-${d3.max(pug, d => d.yearName)}`, subtitle: cityName, width: plotWidth, // make width 95% of container/viewport height: plotWidth * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio) marginLeft: Math.max(40, width * 0.04), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) x: { label: xLabel, domain: d3.extent(pug, d => d.yearName), // use actual year range tickFormat: d => d3.format("d")(d), // format as integer with no commas ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) }, y: { label: yLabel, domain: [0, Math.max(...pug.map(d => d.density)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true }, marks: [ Plot.line(pug, { x: "yearName", y: "density", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pug, { x: "yearName", y: "density", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\n${yLabel}: ${d.density.toFixed(0)}`, tip: true }), ] }); }5a:Tbcf,// function that plots pug (i.e., population urban growth) ratio to create pug ratio chart (i.e., Population-Urban Growth Ratio, xxxx - xxxx) function plot_pug(pug, { cityName = "City", width = plotWidth, // make width 95% of container/viewport yLabel = "Year", color = "black" } = {}) { return Plot.plot({ title: `Population-Urban Growth Ratio, ${d3.min(pug, d => d.yearName)}-${d3.max(pug, d => d.yearName)}`, subtitle: cityName, width: width, height: width * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio), marginLeft: Math.max(30, width * 0.03), // dynamic left margin // Math.max(60, width * 0.1) marginRight: Math.max(10, width * 0.01), // dynamic right margin // Math.max(60, width * 0.1) marginBottom: Math.max(60, width * 0.05), // dynamic bottom margin (increased for labels) // Math.max(80, width * 0.12) x: { label: null, domain: [0, 2], ticks: 2, grid: true }, y: { label: yLabel, domain: d3.extent(pug, d => d.yearName), // use actual year range tickFormat: d => d3.format("d")(d), // format as integer with no commas ticks: Math.max(4, Math.min(10, Math.floor(width / 60))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) grid: true }, marks: [ Plot.line(pug, { x: "populationUrbanGrowthRatio", y: "yearName", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pug, { x: "populationUrbanGrowthRatio", y: "yearName", fill: "black", r: Math.max(2, Math.min(3, width / 200)), title: d => `Year: ${d.yearName}\nUrban-Growth Ratio: ${d.populationUrbanGrowthRatio !== null ? d.populationUrbanGrowthRatio.toFixed(2) : 'N/A'}`, tip: true }), // vertical dashed lines Plot.ruleX([1], { stroke: "gray", strokeWidth: 1.5, strokeDasharray: "5,5" }), Plot.ruleX([0.5], { stroke: null, }), Plot.ruleX([1.5], { stroke: null, }), // annotations Plot.text( ["Balanced"], { x: 1, y: d3.min(pug, d => d.yearName) - 1, // dynamically positions below data dy: -5, textAnchor: "middle", fontWeight: "bold", fontSize: 14, fill: "gray" } ), Plot.text( ["Potential Sprawl\n(Housing Surplus)"], { x: 0.5, y: d3.min(pug, d => d.yearName) - 1, // dynamically positions below data dy: -5, textAnchor: "middle", fontWeight: "bold", fontSize: 14, fill: "gray" } ), Plot.text( ["Potential Densification\n(Housing Shortage)"], { x: 1.5, y: d3.min(pug, d => d.yearName) - 1, // dynamically positions below data dy: -5, textAnchor: "middle", fontWeight: "bold", fontSize: 14, fill: "gray" } ) ] }); }5b:T2fbd,// function that plots the Urban Development Dynamics Matrix (i.e., uddm): // pga (absolute population growth), // pgp (population growth percentage), // ubaa (absolute urban extent and change), // ubap (urban extent and change growth percentage) // d (density), // pug (population urban growth ratio) // , i.e. all 6 charts as small multiples in a 3x2 grid function plot_uddm(pg, uba, pug, { cityName = "City", width = plotWidth, // total width of the entire grid color = "black" } = {}) { // calculate individual chart dimensions const chartWidth = (width - 60) / 2; // subtract padding, divide by 2 columns const chartHeight = chartWidth * 0.6; // maintain aspect ratio const marginLeft = Math.max(30, chartWidth * 0.06); const marginRight = Math.max(10, chartWidth * 0.02); const marginBottom = Math.max(40, chartWidth * 0.08); const marginTop = Math.max(40, chartWidth * 0.08); // row 1: "challenge" charts [i.e., pga (absolute population growth) + pgp (population growth percentage)] const chart1_pga = Plot.plot({ title: `Population Growth, ${d3.min(pg, d => d.yearName)}-${d3.max(pg, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, y: { label: "Population", domain: [0, Math.max(...pg.map(d => d.population)) * 1.1], //dynamic with padding //1.5 invece di 1.1 (1.1, come plot_ubaa for consistency) tickFormat: d => { if (d === 0) return "0"; if (d >= 1000000) return `${(d/1000000).toFixed(d % 1000000 === 0 ? 0 : 1)}M`; if (d >= 1000) return `${(d/1000).toFixed(0)}K`; return d; }, grid: true, }, x: { label: "Year", tickFormat: "d", ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) }, marks: [ Plot.line(pg, { x: "yearName", y: "population", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pg, { x: "yearName", y: "population", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nPopulation: ${d.population.toLocaleString()}`, tip: true }) ] }); const chart2_pgp = Plot.plot({ title: `Population Growth Percentage, ${d3.min(pg, d => d.yearName)}-${d3.max(pg, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, y: { label: "Population Growth Percentage", domain: [0, Math.max(...pg.map(d => d.populationGrowthPercentage)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true, }, x: { label: "Year", tickFormat: "d", //ticks: 6 ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) }, marks: [ Plot.line(pg, { x: "yearName", y: "populationGrowthPercentage", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pg, { x: "yearName", y: "populationGrowthPercentage", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nGrowth Percentage: ${d.populationGrowthPercentage !== null ? d.populationGrowthPercentage.toFixed(2) + '%' : 'N/A'}`, tip: true }) ] }); // row 2: "response" charts [i.e., ubaa (absolute urban extent and change) + ubap (urban extent and change growth percentage)] const chart3_ubaa = Plot.plot({ title: `Urban Built-up Area, ${d3.min(uba, d => d.yearName)}-${d3.max(uba, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, y: { label: "Urban built-up area (sq km)", domain: [0, Math.max(...uba.map(d => d.uba)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true, }, x: { label: "Year", domain: [1, uba.length], // dynamic based on data length tickFormat: d => d3.format("d")(uba[d-1].yearName), // format as integer with no commas ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) }, marks: [ Plot.line(uba, { x: "year", y: "uba", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(uba, { x: "year", y: "uba", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nUrban built-up area (sq km): ${d.uba.toLocaleString()}`, tip: true }) ] }); const chart4_ubap = Plot.plot({ title: `Urban Built-up area Growth Percentage, ${d3.min(uba, d => d.yearName)}-${d3.max(uba, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, y: { label: "Urban Built-up area Growth Percentage", domain: [0, Math.max(...uba.map(d => d.ubaGrowthPercentage)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true, }, x: { label: "Year", tickFormat: "d", ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) grid: true }, marks: [ Plot.line(uba, { x: "yearName", y: "ubaGrowthPercentage", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(uba, { x: "yearName", y: "ubaGrowthPercentage", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nGrowth Percentage: ${d.ubaGrowthPercentage !== null ? d.ubaGrowthPercentage.toFixed(2) + '%' : 'N/A'}`, tip: true }) ] }); // row 3: "outcome" charts [i.e., d (density) + pug (population-urban growth ratio)] const chart5_d = Plot.plot({ title: `Density, ${d3.min(pug, d => d.yearName)}-${d3.max(pug, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, y: { label: "Density (people / sq km)", domain: [0, Math.max(...pug.map(d => d.density)) * 1.1], // dynamic with padding ticks: Math.max(4, Math.min(10, Math.floor((width * 0.6) / 60))), // dynamic y-ticks based on data grid: true }, x: { label: "Year", domain: d3.extent(pug, d => d.yearName), // use actual year range tickFormat: d => d3.format("d")(d), // format as integer with no commas ticks: Math.max(5, Math.min(15, Math.floor(width / 80))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) }, marks: [ Plot.line(pug, { x: "yearName", y: "density", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pug, { x: "yearName", y: "density", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nDensity: ${d.density.toFixed(0)}`, tip: true }) ] }); const chart6_pug = Plot.plot({ title: `Pop-Urban Growth Ratio, ${d3.min(pug, d => d.yearName)}-${d3.max(pug, d => d.yearName)}`, width: chartWidth, height: chartHeight, marginLeft: marginLeft, marginRight: marginRight, marginBottom: marginBottom, marginTop: marginTop, x: { label: null, domain: [0, 2], // dynamic based on data length ticks: 2, grid: true }, y: { label: "Year", domain: d3.extent(pug, d => d.yearName), // use actual year range tickFormat: d => d3.format("d")(d), // format as integer with no commas ticks: Math.max(4, Math.min(10, Math.floor(width / 60))), // dynamic ticks based on width - gives 5-15 ticks based on available Plotwidth (roughly 1 tick per 80 pixels) grid: true }, marks: [ Plot.line(pug, { x: "populationUrbanGrowthRatio", y: "yearName", stroke: "black", strokeWidth: Math.max(1.5, Math.min(3, width / 400)) }), Plot.dot(pug, { x: "populationUrbanGrowthRatio", y: "yearName", fill: "black", r: Math.max(2, Math.min(3, width / 200)), // dot size title: d => `Year: ${d.yearName}\nUrban-Growth Ratio: ${d.populationUrbanGrowthRatio !== null ? d.populationUrbanGrowthRatio.toFixed(2) : 'N/A'}`, tip: true }), // vertical dashed lines Plot.ruleX([1], { stroke: "gray", strokeWidth: 1, strokeDasharray: "5,5" }), Plot.ruleX([0.5], { stroke: null, }), Plot.ruleX([1.5], { stroke: null, }), // annotations Plot.text(["Balanced"], { x: 1, y: d3.min(pug, d => d.yearName) - 2, // dynamically positions below data dy: -5, textAnchor: "middle", fontWeight: "bold", fontSize: 14, //10 fill: "gray" }), Plot.text(["Potential Sprawl\n(Housing Surplus)"], { x: 0.5, y: d3.min(pug, d => d.yearName) - 2, // dynamically positions below data dy: -5, textAnchor: "middle", fontWeight: "bold", fontSize: 14, //10 fill: "gray" }), Plot.text(["Potential Densification\n(Housing Shortage)"], { x: 1.5, y: d3.min(pug, d => d.yearName) - 2, // dynamically positions below data dy: -5, textAnchor: "middle", fontWeight: "bold", fontSize: 14, //10 fill: "gray" }) ] }); // create container div with alternative, small multiple CSS grid layout const container = html`

Urban Development Dynamics

${cityName}

${chart1_pga}

${chart2_pgp}

${chart3_ubaa}

${chart4_ubap}

${chart5_d}

${chart6_pug}

`; return container; } // existing Notebook CSS // const container = html`

Urban Development Dynamics

${cityName}

${chart1_pga}

${chart2_pgp}

${chart3_ubaa}

${chart4_ubap}

${chart5_d}

${chart6_pug}

// `; // return container; // }5c:T4ce,html``5d:[{"id":"4cbb90d50639fe33b7175d6af080a994c574bb4744f2970982865dfc4cc46af35bf9c3291dfe904a3d4af32bb218979a8547f35b3673175b2f887609ec1dd088","href":"https://static.observableusercontent.com/files/4cbb90d50639fe33b7175d6af080a994c574bb4744f2970982865dfc4cc46af35bf9c3291dfe904a3d4af32bb218979a8547f35b3673175b2f887609ec1dd088","name":"pas.csv","type":"text/csv","lastModified":1749813312697.381,"size":1349},{"id":"858cb5f84a4498a68a5a61883e105c6a8fafc21cafa5bd6bdc9c0b868165438dc28fc0710f0483e544b22856580818536144e06e54a0dd5452332425883b2b03","href":"https://static.observableusercontent.com/files/858cb5f84a4498a68a5a61883e105c6a8fafc21cafa5bd6bdc9c0b868165438dc28fc0710f0483e544b22856580818536144e06e54a0dd5452332425883b2b03","name":"pv.csv","type":"text/csv","lastModified":1749813312697.381,"size":157},{"id":"b641d4ba6556492b82e53aa148341b5bbfb33c6fb3856171e653fcc7e46efdf943e5a76824183e07fbf57dc0a639d2468a85b620834922a7c976a1ff4f417a4e","href":"https://static.observableusercontent.com/files/b641d4ba6556492b82e53aa148341b5bbfb33c6fb3856171e653fcc7e46efdf943e5a76824183e07fbf57dc0a639d2468a85b620834922a7c976a1ff4f417a4e","name":"flood-events@1.csv","type":"text/csv","lastModified":1749813312697.381,"size":994},{"id":"587852f5998955525d36f6ad7306abbdde449648419180acd7c776d90c312822902bdc1d7137fc6d1991e93f41ac83417c107570972d6737578ae9d531087cbd","href":"https://static.observableusercontent.com/files/587852f5998955525d36f6ad7306abbdde449648419180acd7c776d90c312822902bdc1d7137fc6d1991e93f41ac83417c107570972d6737578ae9d531087cbd","name":"ee@1.csv","type":"text/csv","lastModified":1749813312697.381,"size":3621},{"id":"b294a7a270b2edfb9f4b568571a0acc5a28056bf97eef6067d9279899c1261fc73a343fd510f823de0969caa2aac0e16460340207e45a6f2640fdf162bbdb09d","href":"https://static.observableusercontent.com/files/b294a7a270b2edfb9f4b568571a0acc5a28056bf97eef6067d9279899c1261fc73a343fd510f823de0969caa2aac0e16460340207e45a6f2640fdf162bbdb09d","name":"pg@3.csv","type":"text/csv","lastModified":1749813312697.381,"size":460},{"id":"64bff48c7a129373a73753e2716f9261f9a145fc1a6a422db9647435259d7fdc28f52f31f03ddae94f0bec4e264f9c0d2e6451936e07e8d0c03c6bb63e9b4bdb","href":"https://static.observableusercontent.com/files/64bff48c7a129373a73753e2716f9261f9a145fc1a6a422db9647435259d7fdc28f52f31f03ddae94f0bec4e264f9c0d2e6451936e07e8d0c03c6bb63e9b4bdb","name":"uba@5.csv","type":"text/csv","lastModified":1749813312697.381,"size":673},{"id":"0d35815fa1ac5eafa0339830b984d96d546adee89fda857168e8de38196d7e64c63f594a8434f351789823bdadb00d44e2429b478fded1ad7bd05701e445ef3a","href":"https://static.observableusercontent.com/files/0d35815fa1ac5eafa0339830b984d96d546adee89fda857168e8de38196d7e64c63f594a8434f351789823bdadb00d44e2429b478fded1ad7bd05701e445ef3a","name":"pug.csv","type":"text/csv","lastModified":1749813312697.381,"size":747},{"id":"52d3ee51a5b8d526082b754fe763237a12ad7856a89cdba78bf4666609fe52ebf06218b618011b2f30dd4a80005ca804fa7e004771dbf82f280e81e54aaf4414","href":"https://static.observableusercontent.com/files/52d3ee51a5b8d526082b754fe763237a12ad7856a89cdba78bf4666609fe52ebf06218b618011b2f30dd4a80005ca804fa7e004771dbf82f280e81e54aaf4414","name":"lc@3.csv","type":"text/csv","lastModified":1749813312697.381,"size":549},{"id":"f7faee4f963decc2656895ec7fe823a450945e21fe20abffff492265480e72c1ed0a8f89568ffacdf22278bcfb7ccb90f2bbd30d48b3b1481572da5060f49129","href":"https://static.observableusercontent.com/files/f7faee4f963decc2656895ec7fe823a450945e21fe20abffff492265480e72c1ed0a8f89568ffacdf22278bcfb7ccb90f2bbd30d48b3b1481572da5060f49129","name":"fwi.csv","type":"text/csv","lastModified":1749813312697.381,"size":692},{"id":"82c8667af8275c2dc8787ca3abede1ae7a6f466a9649178a5e11c347eb0910cd2725913631407b7c700dca6daf5e17b27c9724e9548a7bc08afbf4879bab43eb","href":"https://static.observableusercontent.com/files/82c8667af8275c2dc8787ca3abede1ae7a6f466a9649178a5e11c347eb0910cd2725913631407b7c700dca6daf5e17b27c9724e9548a7bc08afbf4879bab43eb","name":"elevation.csv","type":"text/csv","lastModified":1749813312697.381,"size":156},{"id":"8c2b51dea14d79ab2f7c10496bd01060c4b6f3ba0fe7c28e3ba636595bb0902675ea133c902f67f9ac0c0868ff39b506b6713f35ca2f1e0d2f49aefe965830bf","href":"https://static.observableusercontent.com/files/8c2b51dea14d79ab2f7c10496bd01060c4b6f3ba0fe7c28e3ba636595bb0902675ea133c902f67f9ac0c0868ff39b506b6713f35ca2f1e0d2f49aefe965830bf","name":"slope@1.csv","type":"text/csv","lastModified":1749813312697.381,"size":142},{"id":"e4e05eebc4987931f8c869520a46a67a35bf0b0bf33e49b75e2e927ddd491ca005d74498beece2b272341b1c813174ac9f0ca0f4298ef8af48df99ac7943941d","href":"https://static.observableusercontent.com/files/e4e05eebc4987931f8c869520a46a67a35bf0b0bf33e49b75e2e927ddd491ca005d74498beece2b272341b1c813174ac9f0ca0f4298ef8af48df99ac7943941d","name":"fu.csv","type":"text/csv","lastModified":1749813312697.381,"size":409},{"id":"894f8ab66837d9b70c9e595b4ba8beca142cc5291ea20d13f59336b5e5f05a077167cc7929cede3ab97cb3125b44f7bdd7d528c3df67d438609528a05b43f8b6","href":"https://static.observableusercontent.com/files/894f8ab66837d9b70c9e595b4ba8beca142cc5291ea20d13f59336b5e5f05a077167cc7929cede3ab97cb3125b44f7bdd7d528c3df67d438609528a05b43f8b6","name":"pu.csv","type":"text/csv","lastModified":1749813312697.381,"size":442},{"id":"e4a58f5aad006c734f19cf8e445de6da39d36bbfda3c4e1e28a13b03d814a2ca8edab3f85bc7ab60584381087c374859f033c11012bb60ef926eacdfdcf6a108","href":"https://static.observableusercontent.com/files/e4a58f5aad006c734f19cf8e445de6da39d36bbfda3c4e1e28a13b03d814a2ca8edab3f85bc7ab60584381087c374859f033c11012bb60ef926eacdfdcf6a108","name":"cu.csv","type":"text/csv","lastModified":1749813312697.381,"size":410},{"id":"77bd99fd93e2c8c9756ade59ac1f39d920a5275a7ae13e3aa0766a7d2786ae7bb49ac273ab1184f716c17f86a625dc777cc2e9fb7f20731ef41f0533098a5b00","href":"https://static.observableusercontent.com/files/77bd99fd93e2c8c9756ade59ac1f39d920a5275a7ae13e3aa0766a7d2786ae7bb49ac273ab1184f716c17f86a625dc777cc2e9fb7f20731ef41f0533098a5b00","name":"comb.csv","type":"text/csv","lastModified":1749813312697.381,"size":441},{"id":"13d7f4616ac8cf0f0f544c39cd0444ba40905cc42faf500937f174f3d11c6306607a309e2136ab47c2086ac541da52a48c457f09046eaf649a6e3b97df17ee11","href":"https://static.observableusercontent.com/files/13d7f4616ac8cf0f0f544c39cd0444ba40905cc42faf500937f174f3d11c6306607a309e2136ab47c2086ac541da52a48c457f09046eaf649a6e3b97df17ee11","name":"pug@1.csv","type":"text/csv","lastModified":1750339428997.483,"size":898}] 29:{"id":"04b24ee0a7c8061e","slug":null,"title":"Tunis, Tunisia: Plotted","thumbnail":"770d5e5ad7a26715307e7e4c427743aed8edc46e90b7939ea91833884541ea63","access_level":"public","create_time":"$D2025-06-13T11:15:12.697Z","update_time":"$D2025-06-24T08:21:09.983Z","view_time":null,"first_public_time":"$D2025-06-13T11:15:12.697Z","has_unpublished_edits":null,"fork":{"id":"b7770c0816ea8a9c","slug":"tunis-tunisia","title":"Tunis, Tunisia: Plotted","owner":{"id":"b783a0f584d21589","login":"carolinecullinan","name":"Caroline Cullinan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b783a0f584d21589","login":"carolinecullinan","name":"Caroline Cullinan","avatar_url":"https://avatars-next.observableusercontent.com/8b89c23b31cfac4c9e38782347b8515d60849281a99fcc3ec016646c0f466bae","tier":"starter_2024","bio":"Participatory Systems | Community-Driven Development","followed_by_you":false,"follows_you":false},"version":1561,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3252c0480a163254","login":"carolinecullinan","name":"Caroline Cullinan","avatar_url":"https://avatars-next.observableusercontent.com/36537301c4253b6e5b85cebe4262781beb533d83fa0dfc319d1d1463d6166cf9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3252c0480a163254","login":"carolinecullinan","name":"Caroline Cullinan","avatar_url":"https://avatars-next.observableusercontent.com/36537301c4253b6e5b85cebe4262781beb533d83fa0dfc319d1d1463d6166cf9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tunis, Tunisia: Plotted","cells":[{"id":0,"value":"# Tunis, Tunisia: Plotted","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"md`### Prototype Visualizations for Tunis, Tunisia Plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"#

1 EXECUTIVE SUMMARY","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"(0/0 plots)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"#

2 SETTING THE CONTEXT","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"(0/0 plots)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"#

3 POPULATION AND DEMOGRAPHIC TRENDS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## POPULATION GROWTH & DENSITY","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":973,"value":"// use plot_pga function to create the pga chart\nchart_pga = plot_pga(pg, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"// use plot_pgp function to create the pgp chart\nchart_pgp = plot_pgp(pg, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"## POPULATION DISTRIBUTION BY AGE & SEX","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":939,"value":"chart_pas = plot_pas(pas, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"#

4 ECONOMIC ACTIVITY","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":" (0/0 plots that are not Oxford)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"#

5 BUILT FORM","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"## URBAN EXTENT AND CHANGE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"// use plot_ubaa function to create the ubaa chart\nchart_ubaa = plot_ubaa(uba, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"// use plot_ubap function to create the ubap chart\nchart_ubap = plot_ubap(uba, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"## LAND COVER","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":503,"value":"chart_lc = plot_lc(lc, {cityName: \"Tunis, Tunisia\"})\n\n// with custom dimensions:\n// landCoverTreemap(lc, {width: 600, height: 400, cityName: \"City Name\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"#

6 CLIMATE CONDITIONS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"(1/1 plot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"## PHOTOVOLTAIC POWER POTENTIAL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1127,"value":"// use plot_pv function to create the pv chart\nchart_pv = plot_pv(pv, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"#

7 RISK IDENTIFICATION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"(8/8 plots)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1240,"value":"## SIGNIFICANT FLOOD EVENTS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1237,"value":"// use plot_fe function to create the fe chart\nchart_fe = plot_fe(fe, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"## URBAN BUILT-UP AREA EXPOSED TO RIVER FLOODING","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":747,"value":"// use plot_fu function to create the fu chart\nchart_fu = plot_fu(fu, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"## URBAN BUILT-UP AREA EXPOSED TO RAINWATER FLOODING","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":281,"value":"// use plot_pu function to create the pu chart\nchart_pu = plot_pu(pu, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"## URBAN BUILT-UP AREA EXPOSED TO COASTAL FLOODING","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":783,"value":"// use plot_cu function to create the cu chart\nchart_cu = plot_cu(cu, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"## URBAN BUILT-UP AREA EXPOSED TO COMBINED RIVER, RAINWATER, AND COASTAL FLOODING","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"// use plot_comb function to create the comb chart\nchart_comb = plot_comb(comb, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"## ELEVATION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"chart_elevation = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", dimensions.width)\n .attr(\"height\", dimensions.height)\n .attr(\"viewBox\", [-dimensions.width / 2, -dimensions.height / 2, dimensions.width, dimensions.height]);\n\n const arcs = svg.append(\"g\")\n .selectAll(\"path\")\n .data(pieGenerator(elevation))\n .join(\"path\")\n .attr(\"fill\", d => colorScale_elevation(d.data.bin))\n .attr(\"stroke\", \"white\") // add white stroke\n .attr(\"stroke-width\", \"2px\") // set stroke width\n .attr(\"d\", arcGenerator);\n\n const labels = svg.append(\"g\")\n .selectAll(\"text\")\n .data(pieGenerator(elevation))\n .join(\"text\")\n .attr(\"transform\", d => `translate(${arcGenerator.centroid(d)})`)\n .attr(\"dy\", \"0.35em\")\n .attr(\"text-anchor\", \"middle\")\n .style(\"font-size\", \"16px\")\n .style(\"fill\", \"black\")\n .text(d => d.data.percentage > 1.5 ? `${d.data.percentage}%` : \"\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"## SLOPE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":383,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"chart_slope = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", dimensions.width)\n .attr(\"height\", dimensions.height)\n .attr(\"viewBox\", [-dimensions.width / 2, -dimensions.height / 2, dimensions.width, dimensions.height]);\n\n const arcs = svg.append(\"g\")\n .selectAll(\"path\")\n .data(pieGenerator(slope))\n .join(\"path\")\n .attr(\"fill\", d => colorScale_slope(d.data.bin))\n .attr(\"stroke\", \"white\") // add white stroke\n .attr(\"stroke-width\", \"2px\") // set stroke width\n .attr(\"d\", arcGenerator);\n\n const labels = svg.append(\"g\")\n .selectAll(\"text\")\n .data(pieGenerator(slope))\n .join(\"text\")\n .attr(\"transform\", d => `translate(${arcGenerator.centroid(d)})`)\n .attr(\"dy\", \"0.35em\")\n .attr(\"text-anchor\", \"middle\")\n .style(\"font-size\", \"16px\")\n .style(\"fill\", \"black\")\n .text(d => d.data.percentage > 2 ? `${d.data.percentage}%` : \"\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"## SIGNIFICANT EARTHQUAKE EVENTS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1245,"value":"// use plot_Ee function to create the ee chart\nchart_ee = plot_ee(ee, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"## HSTORICAL BURNT AREA & FIRE WEATHER INDEX","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":824,"value":"// use plot_fwi function to create the fwi chart\nchart_fwi = plot_fwi(fwi, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"#

8 LOCAL INSTITUTIONS & PLANNING","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"( 0 plots)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"#

9 KEY CONSIDERATIONS FOR INVESTMENT PLANNING & PRIORITIZATION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"(0 plots)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"#

ADDITIONAL...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1446,"value":"// use plot_d function to create the d chart\nchart_d = plot_d(pug, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"// use plot_pug function to create the pug chart\nchart_pug = plot_pug(pug, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"##

URBAN DEVELOPMENT DYNAMICS MATRIX","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1555,"value":"See the following Observable Notebook on the Urban Development Dynamics Matrix Analysis and Interpretation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1475,"value":"// use plot_uddm function to create the uddm small multiples charts\nchart_uddm = plot_uddm(pg, uba, pug, {cityName: \"Tunis, Tunisia\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"#

Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"### Import Modules","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"import {Plot} from \"@observablehq/plot\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"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":122,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":957,"value":"// load population growth, pg CSV file\npg = FileAttachment(\"pg@3.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"// load population, age sex (pas) CSV file\npas = FileAttachment(\"pas.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"// load uba CSV file\nuba = FileAttachment(\"uba@5.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"// load lc CSV file\nlc = FileAttachment(\"lc@3.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"// load pv CSV file\npv = FileAttachment(\"pv.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"// load fe, flood events CSV file\nfe = FileAttachment(\"flood-events@1.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"// load fu CSV file\nfu = FileAttachment(\"fu.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"// load pu CSV file\npu = FileAttachment(\"pu.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"// load cu CSV file\ncu = FileAttachment(\"cu.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"// load comb CSV file\ncomb = FileAttachment(\"comb.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"// load elevation CSV file\nelevation = FileAttachment(\"elevation.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"// load slope CSV file\nslope = FileAttachment(\"slope@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"// load ee, earthquake events CSV file\nee = FileAttachment(\"ee@1.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"// load fwi CSV file\nfwi = FileAttachment(\"fwi.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1348,"value":"// load population urban growth, pug CSV file\npug = FileAttachment(\"pug@1.csv\").csv({typed: true})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":944,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"$58","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"$59","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"$5a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1545,"value":"$5b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"### Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"#### Import Fonts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"SansSerifFontParse = \"Oswald:wght@200;300;400;500;600;700\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"SansSerifFont = \"Oswald\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"SerifFont = \"Roboto Slab\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"parseFont = SansSerifFont.split(\" \").join(\"+\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"// load google fonts\nfontLoader = html`` \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"style = html`\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"#### CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"$5c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"### Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"// plotWidth variable to calculate responsive offset\nplotWidth = width * 0.95 // make width 95% of container/viewport","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"// barOffset variable to calculate responsive bar offests based on plotWidth for Population Distribution by Age & Sex\nbarOffset = Math.max(2, plotWidth / 160) // scales with width, minimum of 2 px","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"// donut chart dimensions\ndimensions = ({\n width: width * 0.95, // make width 95% of container/viewport\n height: (width * 0.95) * 0.6, // maintains a 1.67:1 aspect ratio (width: height), note: 0.5 = wider chart (2:1 ratio); 0.75 = more square (1.33:1 ratio),\n margin: 140,\n radius: Math.min(600, 600) / 2 - 140\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"pieGenerator = d3.pie()\n .value(d => d.percentage)\n .sort(null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"arcGenerator = d3.arc()\n .innerRadius(dimensions.radius * 0.50)\n .outerRadius(dimensions.radius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"colorScale_elevation = d3.scaleOrdinal()\n .domain(elevation.map(d => d.category))\n .range([\n \"#f5c4c0\", // -5-40m (75.24%)\n \"#fa9fb5\", // 40-90m (17.17%)\n \"#f768a1\", // 90-135m (5.96%)\n \"#c51b8a\" // remaining higher elevations (1.62%)\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"colorScale_slope = d3.scaleOrdinal()\n .domain(slope.map(d => d.category))\n .range([\n \"#ffffd4\", // for 0-2° slopes (77.92%)\n \"#fed98e\", // for 2-5° slopes (14.38%)\n \"#fe9929\", // for 5-10° slopes (5.66%)\n \"#d95f0e\", // for 10-20° slopes (1.85%)\n \"#993404\" // for 20°+ slopes (0.19, the unlabeled remainder)\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"lastYear_age_structure = age_structure_algiers[age_structure_algiers.length - 1];\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"annotations_age_structure = [\n { \n group: \"Young\", \n value: lastYear_age_structure.young, \n y: lastYear_age_structure.young / 2,\n label: `Young\\n${lastYear_age_structure.young}%` \n },\n { \n group: \"Working\", \n value: lastYear_age_structure.working, \n y: lastYear_age_structure.young + (lastYear_age_structure.working / 2),\n label: `Working\\n${lastYear_age_structure.working}%` \n },\n { \n group: \"65+\", \n value: lastYear_age_structure.elderly, \n y: lastYear_age_structure.young + lastYear_age_structure.working + (lastYear_age_structure.elderly / 2),\n label: `65+\\n${lastYear_age_structure.elderly}%` \n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W5d","stdlib":"1"}} 24:null