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
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("id", "chart")
.attr("class", "color-cool-gray-3");
svg.append("g")
.append("rect")
// .attr("class", "fill-fg-3")
.attr("fill", "#F8FBFB")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height - margin.bottom)
svg.append("g")
.style("font-size", "1rem")
.call(yAxis);
svg.append("g")
.style("font-size", "1rem")
.call(xAxis)
// .append("text")
// .attr("x", (width - yTickSize) / 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")
.selectAll("path")
.data(data.series)
.join("path")
.attr("d", d => area(d.y_bounds))
.attr("data-index", (d, i) => i)
.attr("data-name", d => d.name)
.attr("fill", d => lineLabels.filter(o => o.dataLabel == d.name)[0].color[0])
.attr("stroke", "none")
.style("opacity", 0.1)
.attr("class", "area");
svg.append("g")
.selectAll("path")
.data(data.series)
.join("path")
.attr("d", d => line(d.y))
.attr("data-index", (d, i) => i)
.attr("data-name", d => d.name)
.attr("fill", "none")
.attr("stroke", d => lineLabels.filter(o => o.dataLabel == d.name)[0].color[0])
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("class", "line");
if (showLabels) {
svg.append("g")
.selectAll("text")
.data(lineLabels)
.enter().append("text")
.text(d => d.text)
.attr("fill", d => d.color[1])
.attr("x", d => margin.left + (width * d.x))
.attr("y", d => margin.top + (height * d.y))
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle")
.attr("class", "xsmall-copy");
}
return svg.node();
}
showLabels = true
file = "https://d4mucfpksywv.cloudfront.net/emergent-tool-use/data/object_counting.json"
height = {
if (width > 480) {
return 270 + margin.bottom
} else {
return width * 9/16 + margin.bottom
}
}
margin = ({top: 20, right: 0, bottom: 20, left: yTickSize})
yTickSize = 15
yLabelOffset = -yTickSize + 22
xLabelOffset = 13
xAxisOffset = 1
lineLabels = [
{dataLabel: "Pretrained in Hide-and-Seek", text: "Multi-agent", x: 0.45, y: 0.22, color: ["#27B5EA", "#0A9FD7"]}, // x and y are percentages
{dataLabel: "Pretrained with Count-Based Intrinsic Motivation", text: "Count-based", x: 0.30, y: 0.07, color: ["#F4AC36", "#D68E18"]},
{dataLabel: "Trained From Scratch", text: "Baseline", x: 0.50, y: 0.48, color: ["#C4C4D0", "#9191A4"]},
]
xLabel = "Samples"
yLabel = "Reward"
x = d3.scaleLinear()
.domain([0, d3.max(data.x)])
.range([margin.left, width - margin.right - xAxisOffset])
y = d3.scaleLinear()
.domain([0, 1]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.tickValues([0, d3.max(data.x)])
.tickFormat(formatTick)
.tickSizeOuter(0))
.call(g => g.selectAll(".tick text") // tick labels
.attr("class", "xsmall-copy"))
.call(g => g.select(".tick:first-of-type text").clone() // unit label
.attr("x", xLabelOffset)
.attr("text-anchor", "start")
.attr("class", "xsmall-copy")
.text(xLabel))
.call(g => g.select(".tick:last-of-type text") // rightmost tick text
.attr("text-anchor", "end"))
yAxis = g => g
.attr("transform", `translate(${margin.left + 1},0)`)
.call(d3.axisLeft(y)
.ticks(3)
.tickFormat(formatTickY)
.tickSize(yTickSize)) // left axis
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("opacity", "0.1"))
// .attr("stroke", "white"))
.call(g => g.selectAll(".tick line").clone() // grid lines
// .attr("stroke", "white")
.attr("opacity", "0.1")
.attr("x2", width - margin.left - margin.right))
.call(g => g.select(".tick:first-of-type") // first tick opacity
.attr("stroke-opacity", 1))
// .call(g => g.select(".tick:first-of-type text") // first tick text
// .remove())
// .call(g => g.select(".tick:nth-of-type(2) text") // second tick text
// .remove())
.call(g => g.selectAll(".tick text") // tick labels
.style("text-anchor", "start")
.attr("x", -yTickSize)
.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", yLabelOffset)
// .attr("text-anchor", "start")
// .attr("class", "xsmall-copy")
// .text(yLabel))
area = d3.area()
.x((d, i) => x(data.x[i]))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
line = d3.line()
.x((d, i) => x(data.x[i]))
.y(d => y(d))
data = {
const data = await d3.json(file);
data.series = Object.keys(data).map(k => ({
name: k,
y: data[k].y,
y_bounds: [data[k].y_lower, data[k].y_upper],
}));
data.series.forEach(s => {
s.y_bounds = transpose(s.y_bounds)
}); // transpose y_bounds from 2 by l array into l by 2
data.x = data[Object.keys(data)[0]].x;
return data;
}
d3 = require("d3@5")
function formatTick(d) {
const s = (d / 1e9).toFixed(1);
const isFirst = this.parentNode.previousSibling.tagName != "g";
return isFirst ? "0B" : s + "B";
}
function formatTickY(d) {
const s = d.toFixed(1);
const isLast = !this.parentNode.nextSibling;
const isFirst = this.parentNode.previousSibling.tagName != "g";
if (isLast) {
return "100% Accuracy";
} else if (isFirst) {
return "0";
}
return "";
}
transpose = {
return (array) => array[0].map((col, i) => array.map(row => row[i]));
}
openaicss = {
return html`<link rel="stylesheet" type="text/css" href="https://cdn.openai.com/miscellaneous/observable-1.3.5/styles/openai-css.css">`
}
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.