data_raw = d3.csv(
"https://docs.google.com/spreadsheets/d/e/2PACX-1vQX-75hhFoh6OvRSMHejsRLKkdRLfFfE_MI24vJr4eCKgAEbqMbgLat_HXp8dmKMj3hsh6LTstGfOLM/pub?output=csv",
)
hapiness = d3.csv(
"https://docs.google.com/spreadsheets/d/e/2PACX-1vQX-75hhFoh6OvRSMHejsRLKkdRLfFfE_MI24vJr4eCKgAEbqMbgLat_HXp8dmKMj3hsh6LTstGfOLM/pub?output=csv",
d3.autoType
)
top10 = hapiness.filter((d) => (d.Overall_rank > 0) & (d.Overall_rank <= 10))
extent = d3.extent(hapiness, d => d.Freedom_to_make_life_choices)
x = d3
.scaleLinear()
.domain(d3.extent(hapiness, (d) => d.Freedom_to_make_life_choices))
.range([0, 950])
barcode = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 200])
.style("overflow", "visible");
svg
.selectAll("rect")
.data(hapiness)
.join("rect")
.attr("x", d => x(d.Freedom_to_make_life_choices))
.attr("y", 0)
.attr("width", 0.5)
.attr("height", 300);
return svg.node();
}
extent_y = d3.extent(hapiness, d => d.GDP_per_capita)
c = d3
.scaleLinear()
.domain(d3.extent(hapiness, (d) => d.Score))
.range(["#06d6a0", "#f20666"])
range = d3.scaleLinear().range(["#06d6a0", "#f20666"]);
c(610)
scatter = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 600])
.style("overflow", "visible");
svg.append("g").call(x);
svg
.append("text")
.attr("class", "axis-label")
.attr("x", width / 2)
.attr("y", 580)
.attr("text-anchor", "middle")
.attr("fill", "GREEN")
.text("LIBERTAD PARA TOMAR DECISIONES");
svg
.append("text")
.attr("x", -280)
.attr("y", 0)
.attr("dy", "1em")
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.attr("fill", "GREEN")
.text("PODER ADQUISITIVO");
svg
.selectAll("circle")
.data(hapiness)
.join("circle")
.attr("cx", d => x(d.Freedom_to_make_life_choices))
.attr("cy", (d) => d.GDP_per_capita*300)
.attr("r", 5.5);
return svg.node();
}
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.
