data = {
const csv = await FileAttachment("data.csv").csv({ typed: true });
return csv.sort((a, b) => d3.descending(a.count, b.count));
}
chart = {
const svg = d3
.create("svg")
.attr("viewBox", "0 0 600 700")
.attr("width", "100%");
// .style('border', '1px solid black');
const groups = svg
.selectAll("g")
.data(data)
.join("g")
.attr("transform", (d) => `translate(0, ${scales.y(d.technology)})`);
// append rects
appendRect(groups);
// append tech name labels
appendTechNameLabels(groups);
// append count labels
appendCountLabels(groups);
// append line for the label axis
appendAxisLine(svg);
return svg.node();
}
testData = new Map([
[198, 83],
[414, 173],
[852, 256], // backup: 852 -> 356
[1078, 450]
])
results = {
const results = Array.from(testData).map(([domain, expected]) =>
it_old(
`Pass the value ${domain} to the xScale() function, should return ${expected}.`,
() => {
const actual = scales.x(domain);
const diff = Math.abs(actual - expected);
expect(diff, "[Diff Exceeded]").to.be.lessThan(1);
}
)
);
return md`${results}`;
}
invalidResults = {
it_old("test1", () => expect(2).to.be.lessThan(1));
it_old("test2", () => expect(5).to.be.lessThan(1));
it_old("test3", () => expect(10).to.be.lessThan(1));
it_old("test4", () => expect(100).to.be.lessThan(1));
}
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.
