Published
Edited
Jun 29, 2020
1 fork
Importers
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("class", "color-cool-gray-3 font-tnum");
svg.append("g")
.call(chartBackground);
svg.append("g")
.call(xAxis);
// svg.append("g")
// .call(xAxisLabel);
svg.append("g")
.call(yAxis);
svg.append("g")
.call(verticalLines);
svg.append("g")
.call(verticalLineLabel);
svg.append("g")
.call(lines);
svg.append("g")
.call(lineLabels);
return svg.node();
}
height = width * 9/16 + margin.top + margin.bottom
margin = ({top: 0, right: 0, bottom: 30, left: 0})
xAxisOffset = ({left: 50, right: 15})
yAxisOffset = ({top: 10, bottom: 0})
yTickX = 0
chartBackgroundColor = "#F8FBFB"
gridlineOpacity = 0.1
gridlineColor = "currentColor"
lineThickness = 1.5
xLabel = "nth Flip"
chartBackground = g => g
.append("rect")
// .attr("class", "fill-fg-3")
.attr("fill", chartBackgroundColor)
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", width - margin.left - margin.right)
.attr("height", height - margin.top - margin.bottom)
lines = g => g.selectAll("path")
.data(dataSeries)
.join("path")
.attr("d", d => line(d.mean))
.attr("data-name", d => d.name)
.attr("fill", "none")
.attr("stroke", d => d.color)
.attr("stroke-width", lineThickness)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
// .style("mix-blend-mode", "multiply")
line = d3.line()
.x((d, i) => x(dataX[i]))
.y(d => y(d))
lineLabels = g => g.selectAll("text")
.data(dataSeries)
.join("text")
.text(d => d.name)
.attr("paint-order", "stroke")
.attr("stroke", "white")
.attr("stroke-width", 1.5)
.attr("fill", d => d.label.color)
.attr("x", d => x(dataX[d.label.i]))
.attr("y", d => y(d.mean[d.label.i]))
.attr("alignment-baseline", "middle")
.attr("class", "xsmall-copy font-bold")
.each(function (d) {
const t = d3.select(this);
switch (d.label.orient) {
case "t": t.attr("text-anchor", "middle").attr("dy", "-0.8em"); break;
case "tr": t.attr("text-anchor", "start").attr("dx", "0.6em").attr("dy", "-0.8em"); break;
case "tl": t.attr("text-anchor", "end").attr("dx", "-0.6em").attr("dy", "-0.8em"); break;
case "b": t.attr("text-anchor", "middle").attr("dy", "0.8em"); break;
case "br": t.attr("text-anchor", "start").attr("dx", "0.6em").attr("dy", "0.8em"); break;
case "bl": t.attr("text-anchor", "end").attr("dx", "-0.6em").attr("dy", "0.8em"); break;
case "r": t.attr("text-anchor", "start").attr("dx", "0.6em"); break;
case "l": t.attr("text-anchor", "end").attr("dx", "-0.6em"); break;
}
})
verticalLines = g => {
g
.attr("opacity", 0.8)
.attr("stroke", "currentColor")
.attr("fill", "none")
.attr("stroke-width", lineThickness)
.attr("stroke-dasharray", "3,3")
.attr("transform", `translate(${lineThickness/2},0)`)
g.selectAll("line")
.data([10, 30])
.join("line")
.attr("x1", d => x(d))
.attr("x2", d => x(d))
.attr("y1", margin.top)
.attr("y2", height - margin.bottom);
return g;
}
verticalLineLabel = g => g
.append("text")
.data([[10, 6.25]])
.attr("class", "xsmall-copy")
.attr("dx", 6)
.attr("dy", -4)
.attr("transform", d => `translate(${x(d[0])},${y(d[1])})`)
.text("Perturbation")
xAxisLabel = g => g
.style("font-size", "1rem")
.call(xAxis)
.append("text")
.attr("x", width / 2)
.attr("y", 40)
.attr("class", "xsmall-copy")
.attr("fill", "currentColor")
.attr("text-anchor", "middle")
.text(`${xLabel}`);
xAxis = g => g
.style("font-size", "1rem")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.ticks(width / 100)
.tickSizeOuter(0)
.tickFormat(formatTickX))
.call(g => g.selectAll(".tick text")
.attr("class", "xsmall-copy"))
.call(g => g.select(".domain")
.remove())
yAxis = g => g
.style("font-size", "1rem")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisRight(y)
.ticks(height / 75)
.tickSize(width - margin.left - margin.right)
.tickFormat(formatTickY))
.call(g => g.select(".domain")
.remove())
.call(g => g.selectAll(".tick line")
.attr("stroke", gridlineColor)
.attr("stroke-opacity", gridlineOpacity))
.call(g => g.selectAll(".tick text")
.attr("x", yTickX)
.attr("dy", -4)
.attr("class", "xsmall-copy"))
x = d3.scaleLinear()
.domain(d3.extent(data, d => d.flip))
.range([margin.left + xAxisOffset.left, width - margin.right - xAxisOffset.right])
yRange = [height - margin.bottom - yAxisOffset.bottom, margin.top + yAxisOffset.top]
y = d3.scaleLinear()
.domain(yExtent).nice()
.range(yRange)
yExtent = [3.75, 6.5]
// yExtent = d3.extent(
// [].concat(
// data.map(item => item.meanBaseline),
// data.map(item => item.meanBaselineBroken),
// data.map(item => item.meanBroken),
// )
// );
// yExtent = [
// d3.extent(
// [].concat(
// data.map(item => item.meanBaseline),
// data.map(item => item.meanBaselineBroken),
// data.map(item => item.meanBroken),
// )
// )[0], 7];
file = "https://d4mucfpksywv.cloudfront.net/solving-rubiks-cube/data/20191001a/meta-broken-transposed.csv"
data = Object.assign(await d3.csv(file,
(d) => ({
flip: +(d["Data"]),
meanBaseline: +d["baseline - time mean"],
sdBaseline: +d["baseline - time stderr"],
meanBaselineBroken: +d["baseline-broken - time mean"],
sdBaselineBroken: +d["baseline-broken - time stderr"],
meanBroken: +d["broken - time mean"],
sdBroken: +d["broken - time stderr"],
})
));
dataX = data.map(o => o.flip)
dataSeries = [
{
name: "Baseline",
color: "#B9B9C8",
label: {
color: "#8D8D9E",
i: 20,
orient: "t",
},
mean: data.map(o => o.meanBaseline),
sd: data.map(o => o.sdBaseline),
},
{
name: "Broken joint baseline",
color: "#50DE66", // green
label: {
color: "#1DC054",
i: 19,
orient: "b",
},
mean: data.map(o => o.meanBaselineBroken),
sd: data.map(o => o.sdBaselineBroken),
},
{
name: "Perturbed policy",
color: "#F9AA16", // orange
label: {
color: "#DF9200",
i: 12,
orient: "tr",
},
mean: data.map(o => o.meanBroken),
sd: data.map(o => o.sdBroken),
},
]
function formatTickX(d) {
// const isLast = !this.parentNode.nextSibling;
const isFirst = this.parentNode.previousSibling.tagName != "g";
return isFirst ? `${d}th flip` : `${d}th`;
// return d;
}
function formatTickY(d) {
const dFormatted = d3.format(".2s")(d);
return this.parentNode.nextSibling ? `${dFormatted}` : `${dFormatted} sec`;
}
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.
