Software Engineer
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const bandajdust = 0.8
const tooltip = d3.select("body").append("div")
.attr("class", "svg-tooltip")
.style("position", "absolute")
.style("visibility", "hidden");
const bars = svg.append("g")
//.attr("fill", color)
.attr("fill-opacity", 0.5)
.attr("class", "bars")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d.upper_bound))
.attr("ry",x.bandwidth()*bandajdust/2)
.attr("xy",x.bandwidth()*bandajdust/2)
.attr("height", d => y(d.lower_bound)-y(d.upper_bound))
.attr("width", x.bandwidth()*bandajdust)
.attr("fill", d => (d.ml > 1) ? negativeColor : positiveColor)
const circles = svg.append("g")
//.attr("stroke-opacity", 1)
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", (d, i) => x(i)+x.bandwidth()*bandajdust/2)
.attr("cy", d => y(d.ml))
.attr("fill", "white")
.attr("stroke", "#ccc")
//.attr("fill-opacity", 0.6)
.attr("r", x.bandwidth()*bandajdust/2)
const states = svg.append("g")
.selectAll("text")
.data(data)
.join("text")
.text(d => d.state)
.attr("transform", (d,i) => "translate("+x(i)+" "+y(d.ml)+")")
.attr("text-anchor", "start")
.style("font", "12px sans-serif")
.attr("dx", ".30em")
.attr("dy", ".30em")
//.attr("stroke-width", 4.0)
.attr("fill", d => (d.ml > 1) ? negativeColor: positiveColor)
.on("mouseover", function(d){
tooltip
.style("visibility", "visible")
.text(`${siglas[d.state]} ${d.ml}`)
})
.on("mousemove", function(){
tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
})
.on("mouseout", function(){
tooltip.style("visibility", "hidden");
});
// svg.append("g")
// .call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
positiveColor = "steelblue"
negativeColor = "darkred"
x = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.upper_bound)]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => data[i].state).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y)
.tickValues(d3.scaleLinear().domain(y.domain()).ticks())
)
.call(g => g.selectAll(".tick line")
.select(function() { return this.parentNode.appendChild(this.cloneNode()); })
.attr("stroke-opacity", d => d === 1 ? null : 0.1)
.attr("stroke-width", 2)
.attr("stroke", d => d === 1 ? negativeColor : "black")
.attr("x2", width - margin.left - margin.right))
.call(g => g.select(".domain").remove())
color = "#ccc"
height = 500
margin = ({top: 30, right: 20, bottom: 30, left: 40})
// data_old = Object.assign(d3.csvParse(await FileAttachment("rt_data.csv").text(), d3.autoType), {format: "%", y: "↑ Frequency"})
data_raw = Object.assign(d3.csv("https://hackcovid.s3-us-west-2.amazonaws.com/data/rt_data.csv", d3.autoType), {format: "%", y: "↑ Frequency"});
data_without_br = data_raw.filter(d => d.state !== "Brasil")
lastDate = d3.max(data_without_br, d => d.date)
data_filtered = data_without_br.filter(d => d.date.toString() === lastDate.toString())
data = data_filtered.sort((x,y) => d3.ascending(x.ml, y.ml))
//today = new Date().toString()
siglas = ({
"AC": "Acre",
"AL": "Alagoas",
"AP": "Amapá",
"AM": "Amazonas",
"BA": "Bahia",
"CE": "Ceará",
"DF": "Distrito Federal",
"ES": "Espírito Santo",
"GO": "Goiás",
"MA": "Maranhão",
"MT": "Mato Grosso",
"MS": "Mato Grosso do Sul",
"MG": "Minas Gerais",
"PA": "Pará",
"PB": "Paraíba",
"PR": "Paraná",
"PE": "Pernambuco",
"PI": "Piauí",
"RJ": "Rio de Janeiro",
"RN": "Rio Grande do Norte",
"RS": "Rio Grande do Sul",
"RO": "Rondônia",
"RR": "Roraima",
"SC": "Santa Catarina",
"SP": "São Paulo",
"SE": "Sergipe",
"TO": "Tocantins"
})
html`<style>
.svg-tooltip {
font-family: sans-serif;
background: rgba(69,77,93,.9);
border-radius: .1rem;
color: #fff;
display: block;
font-size: 11px;
max-width: 320px;
padding: .2rem .4rem;
position: absolute;
text-overflow: ellipsis;
white-space: pre;
z-index: 300;
visibility: hidden;
}
</style>`
d3 = require("d3@5")
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.
