chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const bandajdust = 0.7
var font = x.bandwidth()*0.34
svg.append("g")
.call(yAxis)
.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", "10px")
.style("max-width", "320px")
.style("padding", ".2rem .4rem")
.style("position", "absol")
const bars = svg.append("g")
//.attr("fill", color)
.attr("fill-opacity", 0.1)
.selectAll("rect") // change all rectangles
.data(data)
.join("rect")
.attr("x", (d, i) => x(i)) // d, i means is an element from the dataset array and its index
.attr("y", d => y(d.upper_bound)) // upper bound for all the bar charts is the upper bound for each data element
.attr("ry",x.bandwidth()*bandajdust/2) // changes radius of tip for bar charts
.attr("rx",x.bandwidth()*bandajdust/2) // not sure
.attr("height", d => y(d.lower_bound)-y(d.upper_bound)) // height of bars
.attr("width", x.bandwidth()*bandajdust*0.5) // width of rectangles
.attr("fill", d => (d.ml > 1) ? negativeColor : positiveColor) // fill bar condition based on d.ml value
const nodes = svg.append("g")
.selectAll("circle")
.data(data)
.enter()
// Add one g element for each data node here.
.append("g")
.attr("class", "nodes")
.attr("transform", function(d, i) {
return "translate(" + (x(i) + (x.bandwidth()*bandajdust*0.57)/2) + "," + y(d.ml) + ")";
}) // nodes placement
.on("mouseover", function(d){
tooltip
.style("visibility", "visible")
.html(`${siglas[d.state]} <br> Rt: ${d.ml}`)
// .text("RT: " + d.ml)
})
.on("mousemove", function(){
tooltip.style("top", (d3.event.pageY-(x.bandwidth()*2.1))+"px").style("left",(d3.event.pageX-(x.bandwidth()*1.1))+"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) // stroke line color
.attr("r", x.bandwidth()*bandajdust/2.25) // circle radius
.on("mousemove click touchmove", function() { // add animation where opacity increases with mouse on top and goes back to normal opacity
d3.select(this).attr("r", x.bandwidth()*bandajdust/1.9)
})
.on("mouseout", function() {
d3.select(this).attr("r", x.bandwidth()*bandajdust/2.25)
})
// Add a text element to the previously added g element.
nodes.append("text")
.attr("text-anchor", "start")
.style("font", font+"px sans-serif")
.attr("transform", `translate(${x.bandwidth()*-0.27}, ${x.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(yAxis)
// .selectAll("text")
// .attr("class", "axis-label");
return svg.node();
}
positiveColor = "green"
negativeColor = "darkred"
x = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.right])
.padding(0.35) //
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-8},0)`)
.call(d3.axisLeft(y)
.tickValues(d3.scaleLinear().domain(y.domain()).ticks())
.tickSize(0)
)
.call(g => g.selectAll(".tick line") // horizontal line
.select(function() { return this.parentNode.appendChild(this.cloneNode()); })
.attr("stroke-opacity", d => d === 1 ? null : 0.1) // if value is 1 opacity is different
.attr("stroke-width", x.bandwidth()*0.06) // width of grid
.attr("stroke", 'darkgray')
.attr("x2", width - margin.left - margin.right))
.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: 10px;
// max-width: 320px;
// padding: .2rem .4rem;
// position: absolute;
// text-overflow: ellipsis;
// white-space: pre;
// z-index: 200;
// visibility: hidden;
// }
// </style>`
//69,77,93
color = "#ccc"
height = 500
margin = ({top: 30, right: 20, bottom: 30, left: 40})
// collecting data
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()
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.
