Public
Edited
Mar 17, 2021
{
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
svg
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => x(xAccessor(d)))
.attr("y", d => y(yAccessor(d)))
.attr("width", x.bandwidth())
.attr("height", d => height - y(yAccessor(d)) - margin.bottom)
.attr("fill", "steelblue");
svg.append("g").call(yAxis);
svg.append("g").call(xAxis);
text(svg, "Positive Over Time").attr(
"transform",
`translate(${width / 2}, ${15}) rotate(0)`
);
text(svg, "Positive Over Time")
.attr("transform", `translate(0, ${height / 2}) rotate(-90)`)
.attr("dy", "1em")
.style("font-size", "12px");
text(svg, "Week")
.attr(
"transform",
`translate(${width / 2}, ${height - margin.bottom / 2}) rotate(0)`
)
.attr("dy", "1em")
.style("font-size", "12px");
svg.call(addRect, 0, 0, width, height, colors.navy, 0.1);
svg
.append("g")
.attr("transform", `translate(${x.bandwidth() / 2}, 0)`)
.call(addLineChart);
text(svg, "Total Tests Performed")
.attr("transform", `translate(${width}, ${height / 2} ) rotate(90)`)
.attr("dy", "1em")
.style("font-size", "12px");
return svg.node();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
data[0]
function addLineChart(sel) {
const lcY = d3
.scaleLinear()
.domain([0, d3.max(data, d => d["TOTAL_ORDERS"])])
.nice()
.range([height - margin.bottom, margin.top]);
const lcYAxis = g =>
g
.attr('transform', `translate(${width - 55},0)`)
.call(d3.axisRight(lcY).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove());
const line = d3
.line()
.x(d => x(xAccessor(d)))
.y(d => lcY(d["TOTAL_ORDERS"]));
sel.append('g').call(lcYAxis);
sel
.append('path')
.datum(data)
.attr('d', line)
.attr("class", "line");
}
html`
<link rel=stylesheet href="https://s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css">
</link>
<style>
path.line {
fill: none;
stroke: tomato;
stroke-width: 1.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.tick {
font-size: 9px;
}
</style>`
function text(sel, label) {
return sel
.append("g")
.append("text")
.style("text-anchor", "middle")
.text(label);
}
xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call(g => g.selectAll(".domain").remove())
yAxis = g =>
g
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y).ticks(null))
.call(g => g.selectAll(".domain").remove())
y = d3
.scaleLinear()
.domain([0, d3.max(data.map(yAccessor))])
.range([height - margin.bottom, margin.top])
yAccessor = d => d["POSITIVE_PERCENT"]
xAccessor = (d)=> d["WEEK"]
x = d3.scaleBand()
.domain(data.map(xAccessor))
.range([margin.left, width - margin.right])
.padding(0.1)
margin = ({ top: 10, right: 40, bottom: 35, left: 40 })
data = d3
.csvParse(
await FileAttachment("positivity_by_week.csv").text(),
(d, i, columns) => (
d3.autoType(d), (d.total = d3.sum(columns, c => d[c])), d
)
)
.sort((a, b) => b.WEEK > a.WEEK)
colors = ({
navy: "#001f3f"
})
height = 300
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.
