Public
Edited
Nov 21, 2022
dotPltLegend1 = dotPlt.legend("color", {label: "Average rainfall changes(%)"})
tickSize = 15
import {addAnimation} from "@mkfreeman/plot-animation"
exportBan = FileAttachment("export-ban.png").image({ width: 80})
irrigation = FileAttachment("irrigation.png").image({ width: 80})
seed = FileAttachment("seed.png").image({ width: 80})
socialTransfer = FileAttachment("social-transfer.png").image({ width: 80})
warehouse = FileAttachment("warehouse.png").image({ width: 80})
//code for the bar plot - figure 3
barPlt = addTooltips(
Plot.plot({
width: 900,
marginRight: 120,
marginLeft: 70,
color: {
range: ["#b07aa1", "#ff9da7"],
legend: false
}, //using #8-9 of the Tableau10 color scheme},
x: {
axis: "", //drop axis & tick, use legend instead
//tickRotate:-30,
label: ""
},
y: {
domain: [0, 3],
label: "Percentage point changes in poverty headcount rates",
labelAnchor: "center",
},
facet: {
data: vietnamPolicyIntervention,
x: "DemographicGroup",
padding: 100,
label: "",
axis: "top"
},
marks: [
Plot.barY(vietnamPolicyIntervention.filter(d => d.InterventionMethod === policyIntervention), {x: "InterventionYesNo",
y: "Value",
fill: "InterventionYesNo",
facet: true, //very important!
title: (d) =>
`${d.Value} \nPercentage point changes \nin poverty headcount rates`
}),
Plot.ruleY([0]),
Plot.frame({stroke: "#ABB0B8"})
]
}),
//set tooltip styles
{ fill: "darkGray", opacity: 0.5}
)
<html>
<head>
</head>
<body>
<div class="container" style="display: flex; width: 1000px;">
<div style="width: 100%;">
<div class="plot-title">
<text style="padding: 0px; font-weight: bold; font-size: 1.2em">Providing social transfers are most effective in alleviating poverty increase</text>
<br>
<text style="font-size: 0.8em">Compare the poverty indicator between no policy change (left) and policy intervention scenarios (right)</text>
</div>
${viewof policyIntervention}
${barPlt}
<g style="display: inline-block;">
<svg width="240" height="20" style = "vertical-align: middle;">
<rect width="40" height="20" x="200" style="fill:#b07aa1;" />
</svg>
<tspan style="vertical-align: middle; font-family: sans-serif">No policy change</tspan>
<svg width="80" height="20" style = "vertical-align: middle;">
<rect width="40" height="20" x="40" style="fill:#ff9da7;" />
</svg>
<tspan style="vertical-align: middle; font-family: sans-serif">With policy change</tspan>
</g>
<div>
<i class="source">Figure 3</i>. Change in Poverty Headcount Rates During Strong El Niño Events and Intervention Scenarios<br>
by Location and Gender of the Household Head
</div>
</div>
</div>
</body>
</html>
import {legend as verticalLegend} from "@slowkow/vertical-color-legend"
vLegend = verticalLegend({
color: d3.scaleSequential([-1.6, 0.1],
["#832804","#fee6ce"]),
//title: "GDP Changes (%)",
tickFormat: "",
ticks: 5,
})
viewof table1 = Inputs.table(regionalData)
regionalData = FileAttachment("figure 4v4 - policy scenarios in region@1.csv").csv({typed: true})
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
addTooltips(
Plot.plot({
x: {
domain: ["Without interventions", "All combined"],
lineWidth: 5
},
facet: {
data: regionalData,
x: "Country",
label: "",
},
marks: [
Plot.frame(),
Plot.arrow(regionalData, {
x1: "Policy1",
y1: "y1",
x2: "Policy2",
y2: "y2",
bend: false,
title: (d) => `from ${d.y1} to ${d.y2} \nGDP Percentage changes \nbefore and after policy interventions`
})
]
})
)
viewof table = Inputs.table(regionalPolicy)
html`<style>
.axis-x { stroke: red }
`
//code for the heatmap plot - figure 4
heatmapPlt1 = Plot.plot({
width: 400,
height: 400,
marginLeft: 100,
// marginTop: 100,
// marginRight: 100,
x: {
axis: "top",
label: "",
reverse: false,
tickRotate: 0,
// domain: ["Without interventions",
// "All combined"],
},
y: {
label: "",
// axis:"",
},
color: {
// type: "diverging",
scheme: "Oranges",
//legend: false,
reverse: true,
//label: "GDP Changes (%)"
},
// facet: {
// data: regionalPolicy,
// x: "PolicyIntervention"
// },
marks: [
Plot.frame({stroke: "red", strokeWidth: 5}),
Plot.cell(regionalPolicy.filter(d => d.Policy === "Without interventions"), {
x: "Policy",
y: "Country",
fill: "Value",
}),
Plot.text(regionalPolicy.filter(d => d.Policy === "Without interventions"), {
x: "Policy",
y: "Country",
text: "Value",
}),
]
})
heatmapPlt2 = Plot.plot({
width: 400,
height: 380,
marginLeft: 100,
// marginTop: 100,
// marginRight: 100,
x: {
axis: "top",
label: "",
reverse: false,
tickRotate: 0,
// domain: ["Without interventions",
// "All combined"],
},
y: {
label: "",
axis:"",
},
color: {
// type: "diverging",
scheme: "Oranges",
//legend: false,
reverse: true,
//label: "GDP Changes (%)"
},
// facet: {
// data: regionalPolicy,
// x: "PolicyIntervention"
// },
marks: [
Plot.frame({stroke: "pink", strokeWidth: 5}),
Plot.cell(regionalPolicy.filter(d => d.Policy === "All combined"), {
x: "Policy",
y: "Country",
fill: "Value",
}),
Plot.text(regionalPolicy.filter(d => d.Policy === "All combined"), {
x: "Policy",
y: "Country",
text: "Value",
}),
]
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.