data_conv_times.json
X*
—
Y*
—
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
data_sine = FileAttachment("data_conv_times@1.json").json()
// names = ["Linear_1_64", "ReLU_1", "Linear_64_256", "ReLU_2", "Linear_256_64", "ReLU_3", "Lienar_64_1"]
names = ["einsum*100", "legacy"]
data = getRunningTimes();
stackFn = d3.stack()
.keys(['forward', 'backward'])
.value(([, d], k) => d.get(k).value)
stack = stackFn(d3.index(data, d => d.layer, d => d.type))
function getMaxY() {
let result = 0;
for (const array of stack) {
for (const item of array) {
result = item[0] > result ? item[0] : result;
result = item[1] > result ? item[1] : result;
}
}
return result;
}
yMax = getMaxY()
d3.schemeBlues
import {legend, swatches} from "@d3/color-legend";
lgd = swatches({color: chart.scales.color, title: "Type"})
chart = {
const height = 500;
const width = 928;
const marginTop = 10;
const marginRight = 10;
const marginBottom = 20;
const marginLeft = 40;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
// the x axis, which has the names of the layers
const x = d3
.scaleBand()
.domain(names)
.range([marginLeft, width - marginRight])
.padding(0.2);
// the y axis, which has the time
const y = d3.scaleLinear().domain([0, yMax * 1]).range([height - marginBottom, marginTop]);
const color = d3.scaleOrdinal()
.domain(stack.map(d => d.key))
.range(d3.schemeBlues[3].slice(0, 2))
.unknown("#ccc");
svg.append("g")
.selectAll()
.data(stack)
.join("g")
.attr("fill", (d, i) => color(d.key))
.selectAll("rect")
.data(D => D.map(d => (d.key = D.key, d)))
.join("rect")
.attr("x", d => x(d.data[0]))
.attr("y", d => y(d[1]))
.attr("height", d => y(d[0]) - y(d[1]))
.attr("width", x.bandwidth())
.append("title")
.text(d => `${d.data[0]} ${d.key}`);
// Append the horizontal axis.
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call(g => g.selectAll(".domain").remove());
// Append the vertical axis.
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove());
// Return the chart with the color scale as a property (for the legend).
return Object.assign(svg.node(), {scales: {color}});
}
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.
