The avatar for @openai
OpenAI
Published
Artificial Intelligence
Edited
Jun 29, 2020
Fork of Robotics Perturbation: Broken Joint
Importers
1 star
Artificial Intelligence
Interactively Assessing Disentanglement in GANsAnalyzing the Design Space for Visualizing Neural Attention in Text ClassificationTensorsImage tensorsVisualization in Deep LearningInteractive Convolutional Neural NetworkMachine Learning in JS with TensorFlow.js (Part I)How to visualize timeline of a Wiki article?Simulation ResultsMachine learning in the browserRecommender systemsPython in Observable through PyodideArtificial intelligence systems Timelinebackground-position ScrubberDrawings to HumansahajBERT - Bubbles chartPretrained models (image classification)Advanced pretrained models (object detection)
Robotics Perturbation: Broken Joint (Rotation)
Multi-Agent Evaluation: Object Counting
Insert cell
Insert cell
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();
}
Insert cell
Insert cell
height = width * 9/16 + margin.top + margin.bottom
Insert cell
margin = ({top: 0, right: 0, bottom: 30, left: 0})
Insert cell
xAxisOffset = ({left: 50, right: 10})
Insert cell
yAxisOffset = ({top: 20, bottom: 0})
Insert cell
yTickX = 0
Insert cell
chartBackgroundColor = "#F8FBFB"
Insert cell
gridlineOpacity = 0.1
Insert cell
gridlineColor = "currentColor"
Insert cell
lineThickness = 1.5
Insert cell
xLabel = "nth Flip"
Insert cell
Insert cell
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)
Insert cell
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")
Insert cell
line = d3.line()
.x((d, i) => x(dataX[i]))
.y(d => y(d))
Insert cell
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;
}
})
Insert cell
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;
}
Insert cell
verticalLineLabel = g => g
.append("text")
.data([[10, 9.5]])
.attr("class", "xsmall-copy")
.attr("dx", 6)
.attr("dy", -4)
.attr("transform", d => `translate(${x(d[0])},${y(d[1])})`)
.text("Perturbation")
Insert cell
Insert cell
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}`);
Insert cell
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())
Insert cell
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"))
Insert cell
x = d3.scaleLinear()
.domain(d3.extent(data, d => d.flip))
.range([margin.left + xAxisOffset.left, width - margin.right - xAxisOffset.right])
Insert cell
yRange = [height - margin.bottom - yAxisOffset.bottom, margin.top + yAxisOffset.top]
Insert cell
y = d3.scaleLinear()
.domain(yExtent).nice()
.range(yRange)
Insert cell
yExtent = [5, 10]

// 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];
Insert cell
file = "https://d4mucfpksywv.cloudfront.net/solving-rubiks-cube/data/20191010b/meta-rot-broken-time.csv"
Insert cell
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"],
})
));
Insert cell
dataX = data.map(o => o.flip)
Insert cell
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: 21,
orient: "b",
},
mean: data.map(o => o.meanBaselineBroken),
sd: data.map(o => o.sdBaselineBroken),
},
{
name: "Perturbed policy",
color: "#F9AA16", // orange
label: {
color: "#DF9200",
i: 20,
orient: "t",
},
mean: data.map(o => o.meanBroken),
sd: data.map(o => o.sdBroken),
},
]
Insert cell
Insert cell
function formatTickX(d) {
// const isLast = !this.parentNode.nextSibling;
const isFirst = this.parentNode.previousSibling.tagName != "g";
return isFirst ? `${d}th rotation` : `${d}`;
// return d;
}
Insert cell
function formatTickY(d) {
const dFormatted = d3.format(".2s")(d);
return this.parentNode.nextSibling ? `${dFormatted}` : `${dFormatted} sec`;
}
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
Insert cell
openaicss = {
return html`<link rel="stylesheet" type="text/css" href="https://cdn.openai.com/miscellaneous/observable-1.3.5/styles/openai-css.css">`
}
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more