md`# Projeto Visualização @ PPGCC 2020`
d3 = require("d3@6") // Use the latest Version
chart = {
const svg = d3.select(DOM.svg(width, height));
svg.attr('style', 'background-color: #F5F5F4');
svg.attr("id", "myGraph");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.call(grid);
svg.selectAll('circle').data(data)
.enter()
.append('circle')
.attr("cx", d => x(d.testes_aplicados))
.attr("cy", d => y(d.gasto))
.attr('r', d => 3)
.attr("fill", d => color(d.gasto_p_teste))
.attr("stroke", d => color(d.gasto_p_teste))
.on('mouseover', function (e, d, i) {
tooltip
.html(
`<div id='tipDiv'></div>`)
.style('visibility', 'visible');
const teste = linhas(dados_linhas_tooltip, d.municipio.toUpperCase())
})
.on('mousemove', function (e) {
tooltip
.style('top', e.pageY + 10 + 'px')
.style('left', e.pageX + 10 + 'px');
})
.on('mouseout', function () {
tooltip.html(``).style('visibility', 'hidden');
d3.select(this).transition();
});
// text label for the x axis
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," +
(height - 12) + ")")
.attr("font-family", "sans-serif")
.attr("font-size", 14)
.style("text-anchor", "middle")
.text("Testes aplicados");
return svg.node();
}
height = 800
width = 1000
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.
