The avatar for @yaleenvironment
Yale School of the Environment
Public
Edited
May 15, 2023
2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
GAPARROWSLAST = Plot.plot({
y: { label: null,
tickFormat: (d) => (`${tableAlias[0][d]}`),
tickSize: 0},
x: {
axis: "top",
grid: true,
label: `▬ Bars show DLS → Arrow shows gap | Ticks show regional avg.`,
domain: [0, 115],
ticks: 2,
tickFormat: (d) => (d === 100 ? `${d}%` : `${d}`),
tickSize: 10
},
axis: "right",
marginLeft: 10,
marginRight: 120,
marginTop: 50,
width : 700,
style: {fontSize: "14px"},
color: {
type: "categorical",
scheme: "Set2"
},
marks: [
Plot.text(countries_map.get(selected ? selected.ISO_3 : "AFG"), {x: 100, y: "gap_cat", fill: "black", text: d => parseFloat(d.gap_val).toFixed(1), dx: 40, textAnchor: "end"}),
Plot.arrow(countries_map.get(selected ? selected.ISO_3 : "AFG"), {
//arrow-first
//x1: 10,
//x2: d => (parseFloat(d.gap_val)).toFixed(1),
//bar-first
x1: d => 100 - (parseFloat(d.gap_val)).toFixed(1),
x2: 100,
y1: "gap_cat",
y2: "gap_cat",
bend: false,
stroke: d => d,
srokeWidth: 1.5
}),
Plot.barX(countries_map.get(selected ? selected.ISO_3 : "AFG"),{
//bar-first
x1: 0,
x2: d => 100 - (parseFloat(d.gap_val)).toFixed(1),
//arrow-first
//x1: d => (parseFloat(d.gap_val)).toFixed(1),
//x2: 100,
y: "gap_cat",
fill: d => d,
fillOpacity: 0.2,
insetTop: 1.25,
insetBottom: 1.25
}),
Plot.tickX(regions_map.get(selected ? selected.DLS_REGION_A3 : "SAS"), {
//arrow-first
//x: d => d.gap_val,
//bar-first
x: d => 100 - d.gap_val,
y: "gap_cat",
stroke: "red",
strokeWidth: 1,
insetTop: 0,
insetBottom: 0
}),
],

})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot = require("@observablehq/plot@0.4.0").then(makeCarto)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
STYLES = htl.html`
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap" rel="stylesheet">
<style>

#dls-selector-chart {
font-size: smaller;
}



#dls-selectorchart-container,
#dls-dlsfulltable-container {
display:flex;
flex-wrap: wrap;
flex-direction: row;
gap: 10px 20px;
}

#dls_fulltable {
overflow: auto;
}

.dls-arrowchart-intro,
.dls-charttext > h3 {
font-family: 'Montserrat', sans-serif;
}

@media screen and (max-width: 760px) {
#dls-selectorchart-container {
flex-direction:column;
}


.dls-arrowchart {
flex: 1 100%
}
}

</style>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more