Plot.plot({
color: {
legend: true,
scheme: "category10",
type: "categorical"
},
x: {
line: true,
ticks: 10,
label: "Média PM2.5"
},
y: {
line: true,
label: "Baixo Peso (%)"
},
marks: [
transition(
Plot.dot(dadosMunicipio.filter((d) => d.ANO == ano && d.TOTAL > 100),{
x: (d) => +d.AVG_PM25,
y: (d) => (100 * d.BAIXO_PESO) / d.TOTAL,
title: (d) => codigoToMunicipio.get(d.CODMUNRES).municipio,
fill: (d) => ['N','NE','SE','S','CO'][Math.floor(d.CODMUNRES/100000)-1]
})
)
]
})
transition = markTransition({
key: (d) => d.CODMUNRES,
selector: "circle",
attributes: ["cx","cy"],
duration: 1500
})
function markTransition({key,selector,attributes,duration}) {
let currentStateMap = null;
function renderWrapper(target) {
return function render(...args) {
let rootElement = target.render(...args); /* Actual render function */
let lastStateMap = currentStateMap;
let data = target.data;
currentStateMap = new Map();
d3.select(rootElement)
.selectAll(selector)
.each(function(d){ /* Store new values in currentStateMap */
let attr = {};
for(let attrName of attributes) {
attr[attrName] = d3.select(this).attr(attrName)
}
currentStateMap.set(key(data[d]),attr);
})
.each(function(d){ /* Assign values from last frame */
let attrs = lastStateMap?.get(key(data[d]));
if(attrs) {
for(let attrName in attrs) {
d3.select(this).attr(attrName,attrs[attrName]);
}
}
})
.transition() /* (Re)assign new values */
.duration(duration)
.call(s => {
attributes.forEach(attrName => {
s.attr(attrName,d=>currentStateMap.get(key(data[d]))[attrName]);
})
})
;
return rootElement;
}
}
return function(mark) {
return new Proxy(mark,{get:(target, name)=>name==="render"?renderWrapper(target):target[name]});
}
}
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.
