Notebooks 2.0 is here.
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const bandajdust = 0.7
var font = y.bandwidth()*0.34
svg.append("g")
.call(xAxis)
.selectAll("text")
.attr("class", "axis-label");
const tooltip = d3.select("body").append("div")
.attr("class", "svg-tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
.style("font-family", "sans-serif")
.style("background", "rgba(235, 235, 235,0.9)")
.style("border-radius", ".4rem")
.style("color", "#000000")
.style("display", "block")
.style("font-size", "12px")
.style("max-width", "320px")
.style("padding", ".2rem .4rem")
.style("position", "absol")
const bars = svg.append("g")
.attr("fill-opacity", 0.1)
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.lower_bound))
.attr("y", (d, i) => y(i))
.attr("ry",y.bandwidth()*bandajdust/2)
.attr("xy",y.bandwidth()*bandajdust/2)
.attr("height", y.bandwidth()*bandajdust*0.5)
.attr("width", d => -x(d.lower_bound)+x(d.upper_bound))
.attr("fill", d => (d.ml > 1) ? negativeColor : positiveColor)
const nodes = svg.append("g")
.selectAll("circle")
.data(data)
.enter()
.append("g")
.attr("class", "nodes")
.attr("transform", function(d, i) {
return "translate(" + x(d.ml) + "," + (y(i) + (y.bandwidth()*bandajdust*0.57)/2) + ")";
})
.on("mouseover", function(d){
tooltip
.style("visibility", "visible")
.html(`${siglas[d.state]} <br> Rt: ${d.ml}`)
// .text(`${siglas[d.state]} \n Rt: ${d.ml}`)
// .text("RT: " + d.ml)
})
.on("mousemove", function(){
tooltip.style("top", (d3.event.pageY-(y.bandwidth()*0.93))+"px").style("left",(d3.event.pageX+(y.bandwidth()*1.07))+"px");
})
.on("mouseout", function(){
tooltip.style("visibility", "hidden");
});
nodes.append("circle")
.attr("class", "node")
.attr("fill", "white") // color
.attr("stroke", d => (d.ml > 1) ? negativeColor : positiveColor)
.attr("r", y.bandwidth()*bandajdust/2.25)
.on("mousemove click touchmove", function() {
d3.select(this).attr("r", y.bandwidth()*bandajdust/1.9)
})
.on("mouseout", function() {
d3.select(this).attr("r", y.bandwidth()*bandajdust/2.25)
})
nodes.append("text")
.attr("text-anchor", "start")
.style("font", font+"px sans-serif")
.attr("transform", `translate(${y.bandwidth()*-0.27}, ${y.bandwidth()*0.13})`)
.attr("fill", d => (d.ml > 1) ? negativeColor: positiveColor)
.attr("class", "node-text") // for rotation
.text(d => d.state)
// svg.append("g")
// .call(xAxis)
// .selectAll("text")
// .attr("class", "axis-label");
return svg.node();
}
positiveColor = "green"
// negativeColor = "darkred"
negativeColor = "#910000"
y = d3.scaleBand()
.domain(d3.range(data.length))
.range([height - margin.bottom, margin.top])
.padding(0.1)
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickFormat(i => data[i].state).tickSizeOuter(0))
x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.upper_bound)]).nice()
.range([margin.left, width - margin.right])
xAxis = g => g
// .attr("transform", `translate(0,${height - margin.bottom})`)
.attr("transform", `translate(0,${margin.top})`)
// .attr("transform", `rotate(60)`)
.call(d3.axisTop(x) // axisBottom(x)
.tickValues(d3.scaleLinear().domain(x.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", y.bandwidth()*0.06)
.attr("stroke", 'darkgray')
// .attr("y2", - height + margin.top + margin.bottom))
.attr("y2", height - margin.top - margin.bottom))
.call(g => g.select(".domain").remove())
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(235, 235, 235,0.9);
// border-radius: .1rem;
// color: #000000;
// display: block;
// font-size: 12px;
// max-width: 320px;
// padding: .2rem .4rem;
// position: absolute;
// text-overflow: ellipsis;
// white-space: pre;
// z-index: 200;
// visibility: hidden;
// }
// </style>`
color = "#ccc"
height = 900
margin = ({top: 30, right: 20, bottom: 30, left: 40})
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.descending(x.ml, y.ml))
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.
