Public
Edited
Oct 18, 2023
data_ch.json
Type Table, then Shift-Enter. Ctrl-space for more options.
data_ch_conv_acc.json
Type Table, then Shift-Enter. Ctrl-space for more options.
data_sine_fit = FileAttachment("data_ch_conv_acc.json").json()
labels = ['acc']
import {swatches} from "@d3/color-legend";
x = d3.scaleLinear()
.domain([0, 55])
.range([40, 928 - 20]);
y = d3.scaleLinear()
.domain([0, 1])
.range([500 - 20, 40]);
line = d3.line()
.x((d, i) => x(i))
.y(d => y(d));
line2 = d3.line()
.x((d, i) => x(i + 19))
.y(d => y(d));
function prepare_data() {
// const adam = data_sine_fit.test_acc.slice(0, 20);
// const sgd = data_sine_fit.test_acc.slice(19);
// return [line(adam), line2(sgd)];
return [line(data_sine_fit.acc)]
}
d3.interpolateBuPu()
color = d3.scaleOrdinal()
.domain(labels)
.range(d3.schemeCategory10.slice(0, labels.length))
.unknown("#ccc");
data = prepare_data();
lgd = swatches({color: color, title: "lr"})
chart = {
const height = 500;
const width = 928;
const marginTop = 10;
const marginRight = 20;
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;");
// Append the horizontal axis.
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).ticks(width / 80).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(height / 80, "s"))
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width - marginLeft - marginRight)
.attr("stroke-opacity", 0.1))
.call(g => g.selectAll(".domain").remove());
svg.append('g')
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(data)
.join("path")
.style("mix-blend-mode", "multiply")
.attr('stroke', (l, i) => color(labels[i]))
.attr("d", l => l);
return svg.node();
}
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.
