destaca = function(e, d){
let me = d3.select(this); // O elemento SVG onde o evento aconteceu
// apaga todos
d3.selectAll("#cg circle")
.attr("opacity", .25);
// enfatiza o selecionado
me
.attr("opacity", "1")
.attr("stroke-width", 2);
// escreve um tooltip
d3.select("g#annotation")
.insert("text")
.attr("id", "label")
.attr("x", me.attr("cx"))
.attr("y", me.attr("cy"))
.attr("dy", radius(d.chuva) + 14)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12")
.text(formatDate(d.semana) + ", " + formatNum(d.tmedia) + "C e " + formatNum(d.chuva) + "mm");
let div = d3.select("body").append("div")
.attr("id", "details")
.attr("class", "tooltip");
}
voltaDestaque = function(e, d){
d3.select(this)
.attr("fill", fill(d.cidade))
.attr("opacity", .6)
.attr("stroke-width", 1);
d3.selectAll("#cg circle")
.attr("opacity", .6);
d3.select("g#annotation")
.select("text")
.remove();
}
formatDate = d3.utcFormat("%b %-d %Y")
formatNum = d3.format(".1f")
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.
