Published
Edited
Dec 13, 2020
Importers
4 stars
setYAxisDirection = (axis, reverseDirection) => {
const textAnchor = axis.attr("text-anchor");
const reverseTextAnchor = textAnchor == "start" ? "end" : "start";
axis.selectAll(".tick").each(function (d, i) {
const tick = d3.select(this);
const tickSize = tick.select("line").attr("x2");
const tickTextX = tick.select("text").attr("x");
tick
.attr(
"text-anchor",
reverseDirection(data[i]) ? reverseTextAnchor : textAnchor
)
.select("line")
.attr("x2", reverseDirection(data[i]) ? -tickSize : tickSize);
tick
.select("text")
.attr("x", reverseDirection(data[i]) ? -tickTextX : tickTextX);
});
}
showToolTip = (text, coords) => {
d3.select(".tooltip")
.text(text)
.style("top", coords[1] + "px")
.style("left", coords[0] + "px")
.style("visibility", "visible");
}
data = d3.csvParse(await FileAttachment("country_data.csv").text(), d3.autoType)
// retrieve only country in the top 10 or bottom 10 of this dataset
.filter((d, i, e) => i < 10 || i > e.length - 1 -10)
max = d3.max(data, d => +d.net_donations)
min = d3.min(data, d => +d.net_donations)
x0 = Math.max(Math.abs(min), Math.abs(max))
x = d3.scaleLinear()
.range([margin.left, width - margin.right])
.domain([-x0, x0]);
y = d3.scaleBand()
.range([margin.top, height - margin.bottom])
.domain(data.map(d => d.country))
.padding(0.2)
yAxis = g => g.attr("transform", `translate(${x(0)}, 0)`)
.call(d3.axisLeft(y))
xAxis = g => g.attr("transform", `translate(0, ${margin.top})`)
.call(d3.axisTop(x)
.ticks(5)
.tickFormat(d => d3.format("$0.1s")(d).replace(/G/, "B")))
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.
