Published
Edited
May 22, 2020
3 forks
Insert cell
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const bandajdust = 0.8

const bars = svg.append("g")
//.attr("fill", color)
.attr("fill-opacity", 0.5)
.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)
.on("mousemove click touchmove", function() {
d3.select(this).attr("fill-opacity", 1)
})
.on("mouseout", function() {
d3.select(this).attr("fill-opacity", 0.5)
})
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)
states.append("title")
.attr("class", "tootlip")
.text(d => `state: ${d.state}\nupper: ${d.upper_bound}\nmean: ${d.ml}\nlower: ${d.lower_bound}`)
// svg.append("g")
// .call(xAxis);

svg.append("g")
.call(yAxis);

return svg.node();
}
Insert cell
positiveColor = "steelblue"
Insert cell
negativeColor = "darkred"
Insert cell
x = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.right])
.padding(0.1)
Insert cell
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.upper_bound)]).nice()
.range([height - margin.bottom, margin.top])
Insert cell
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => data[i].state).tickSizeOuter(0))
Insert cell
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())
Insert cell
color = "#ccc"
Insert cell
height = 500
Insert cell
margin = ({top: 30, right: 20, bottom: 30, left: 40})
Insert cell
// data_old = Object.assign(d3.csvParse(await FileAttachment("rt_data.csv").text(), d3.autoType), {format: "%", y: "↑ Frequency"})
Insert cell
data_raw = Object.assign(d3.csv("https://hackcovid.s3-us-west-2.amazonaws.com/data/rt_data.csv", d3.autoType), {format: "%", y: "↑ Frequency"});
Insert cell
data_without_br = data_raw.filter(d => d.state !== "Brasil")
Insert cell
lastDate = d3.max(data_without_br, d => d.date)
Insert cell
data_filtered = data_without_br.filter(d => d.date.toString() === lastDate.toString())
Insert cell
data = data_filtered.sort((x,y) => d3.ascending(x.ml, y.ml))
Insert cell
//today = new Date().toString()
Insert cell
d3 = require("d3@5")
Insert cell

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.
Learn more