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")
// _______________
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.