chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("class", "color-black");
svg.append("g")
.style("font-size", "1rem")
.call(xAxis)
.append("text")
.attr("x", width / 2)
.attr("y", 40)
.attr("class", "xsmall-copy font-bold font-sans-serif")
.attr("fill", "currentColor")
.attr("text-anchor", "middle")
.text(xLabel);
// svg.append("g")
// .style("font-size", "1rem")
// .call(yAxis);
svg.append("g")
.style("font-size", "1rem")
.call(yAxis0);
svg.append("g")
.style("font-size", "1rem")
.call(yAxis1);
svg.append("g")
.selectAll("g")
.data(data)
.join("g")
.attr("transform", d => `translate(${x0(d[groupKey])},0)`)
.attr("data-index", (d, i) => i)
.selectAll("rect")
.data(d => keys.map(key => ({key, value: d[key]})))
.join("g")
.call(bars);
svg.select("g[data-index='0']")
.call(units);
return svg.node();
}
height = {
if (width > 800) {
return 400 + margin.top + margin.bottom
} else {
return width * 1/2 + margin.top + margin.bottom
}
}
margin = ({top: 40, right: yTickSize1 + 30, bottom: 50, left: yTickSize0 + 30})
yTickSize0 = 30
yTickSize1 = 30
yLabelOffset0 = -yTickSize0 + 40
yLabelOffset1 = -yTickSize1 + 25
xLabel = "Fruit"
yLabel = "People"
color = d3.scaleOrdinal()
.range(["#5C94D0", "#E2AB43"])
darkColor = d3.scaleOrdinal()
.range(["#3775B8", "#C78D21"])
x0 = d3.scaleBand()
.domain(data.map(d => d[groupKey]))
.rangeRound([margin.left, width - margin.right])
.paddingInner(0.25) // spacing between groups
x1 = d3.scaleBand()
.domain(keys)
.rangeRound([0, x0.bandwidth()])
// .padding(0.05) // spacing within a group
y0 = d3.scaleLinear()
.domain([0, d3.max(data, d => d[keys[0]])])//.nice()
.rangeRound([height - margin.bottom, margin.top])
y1 = d3.scaleLinear()
.domain([0, d3.max(data, d => d[keys[1]])])//.nice()
.rangeRound([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x0).tickSizeOuter(0))
.call(g => g.selectAll(".tick text") // tick labels
.attr("class", "xsmall-copy"))
// .call(g => g.select(".domain").remove())
yAxis0 = g => g
.attr("transform", `translate(${yTickSize0},0)`)
.attr("stroke-opacity", 0.1)
.call(d3.axisLeft(y0)
.ticks(height / 100)
.tickSize(yTickSize0) // left axis
.tickFormat(n => (n == 0) ? 0 : d3.format(".2s")(n)))
.call(g => g.select(".tick:first-of-type line") // first tick opacity
.attr("stroke-opacity", 1)
.attr("x1", margin.left - yTickSize0))
.call(g => g.selectAll(".tick text") // tick labels
.style("text-anchor", "start")
.attr("x", -yTickSize0)
.attr("y", -9)
.attr("class", "xsmall-copy"))
.call(g => g.select(".domain").remove()) // remove domain line
.call(g => g.select(".tick:last-of-type text").clone() // unit label
.attr("x", yLabelOffset0)
.attr("text-anchor", "start")
.attr("class", "xsmall-copy font-bold font-sans-serif")
.text(keys[0]))
yAxis1 = g => g
.attr("transform", `translate(${width - yTickSize1},0)`)
.attr("stroke-opacity", 0.1)
.call(d3.axisRight(y1)
.ticks(height / 100)
.tickSize(yTickSize1)) // left axis
.call(g => g.select(".tick:first-of-type line") // first tick opacity
.attr("stroke-opacity", 1)
.attr("x1", `${yTickSize1 - margin.right}`))
.call(g => g.selectAll(".tick text") // tick labels
.style("text-anchor", "end")
.attr("x", yTickSize1)
.attr("y", -9)
.attr("class", "xsmall-copy"))
.call(g => g.select(".domain").remove()) // remove domain line
.call(g => g.select(".tick:last-of-type text").clone() // unit label
.attr("x", -yLabelOffset1)
.attr("text-anchor", "end")
.attr("class", "xsmall-copy font-bold font-sans-serif")
.text(keys[1]))
bars = g => {
g.append("rect")
.attr("x", d => x1(d.key))
.attr("y", d => (d.key == keys[0]) ? y0(d.value) : y1(d.value))
.attr("width", x1.bandwidth())
.attr("height", d => (d.key == keys[0]) ? y0(0) - y0(d.value) : y1(0) - y1(d.value)) // conditional scale
.attr("fill", d => color(d.key));
g.append("text")
.attr("x", d => x1(d.key) + x1.bandwidth() / 2)
.attr("y", d => (d.key == keys[0]) ? y0(d.value) - 8 : y1(d.value) - 8)
.attr("text-anchor", "middle")
.attr("fill", d => darkColor(d.key))
.attr("class", "xsmall-copy label")
.text(d => (d.key == keys[0]) ? d3.format(".2s")(d.value) : d.value);
}
units = g => g
.call(g => g.selectAll("text") // text
.attr("dy", "-16")
.clone() // unit labels
.attr("dy", "0")
.attr("class", "xsmall-copy font-bold font-sans-serif")
.text(d => d.key))
data = Object.assign(await d3.csv("https://gist.githubusercontent.com/justinjaywang/7545fd0ae0d28981cd741417d8d008ec/raw/552ecc87fe56ce4cc1e4dd33468904445e839475/batch-size.csv", d3.autoType))
groupKey = data.columns[0]
keys = data.columns.slice(1)
d3 = require("d3@5")
openaicss = {
return html`<link rel="stylesheet" type="text/css" href="https://cdn.openai.com/miscellaneous/observable-1.3.5/styles/openai-css.css">`
}
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.
