Published
Edited
May 19, 2020
Fork of Rt Chart
1 fork
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 => 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)
.attr("width", d => -x(d.lower_bound)+x(d.upper_bound))
.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 => x(d.ml))
.attr("cy", (d, i) => y(i)+y.bandwidth()*bandajdust/2)
.attr("fill", "white")
.attr("stroke", "#ccc")
//.attr("fill-opacity", 0.6)
.attr("r", y.bandwidth()*bandajdust/2)
const states = svg.append("g")
.selectAll("text")
.data(data)
.join("text")
.text(d => d.state)
.attr("transform", (d,i) => `translate(${x(d.ml)-10} ${y(i)+15})`)
.attr("text-anchor", "start")
.style("font", "12px sans-serif")
// .attr("dx", ".5em")
// .attr("dy", ".5em")
//.attr("stroke-width", 4.0)
.attr("fill", d => (d.ml > 1) ? negativeColor: positiveColor)
// circles.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
y = d3.scaleBand()
.domain(d3.range(data.length))
.range([height - margin.bottom, margin.top])
//.range([margin.left, width - margin.right])
.padding(0.1)
Insert cell
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
//.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisLeft(y).tickFormat(i => data[i].state).tickSizeOuter(0))
Insert cell
x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.upper_bound)]).nice()
//.range([height - margin.bottom, margin.top])
.range([margin.left, width - margin.right])
Insert cell
xAxis = g => g
//.attr("transform", `translate(${margin.left},0)`)
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.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", 2)
.attr("stroke", d => d === 1 ? negativeColor : "black")
.attr("y2", - height + margin.top + margin.bottom))
.call(g => g.select(".domain").remove())
Insert cell
color = "#ccc"
Insert cell
height = 900
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.descending(x.ml, y.ml))
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