Published unlisted
Edited
Aug 24, 2022
Plot.plot({
grid: true,
x: {
domain: [0, 7000]
},
marks: [
Plot.rectY(
data,
Plot.binX(
{ y2: "count" },
{
x: { value: "ISO", thresholds: 50 },
fill: "Date",
mixBlendMode: "multiply"
}
)
),
Plot.ruleY([0])
]
})
test = Plot.plot({
y: {
grid: true
},
color: {
scheme: "spectral",
domain: ["Winner", "Loser"],
legend: true
},
marks: [
Plot.ruleY([0]),
Plot.dot(data2, {
x: "Aperture",
y: "ShutterSpeed",
fill: "WINNER"
})
]
})
DOM.download(() => rasterize(test), undefined, "Save as PNG")
function rasterize(svg) {
let resolve, reject;
const promise = new Promise((y, n) => ((resolve = y), (reject = n)));
const image = new Image();
image.onerror = reject;
image.onload = () => {
const rect = svg.getBoundingClientRect();
const context = DOM.context2d(rect.width, rect.height);
context.drawImage(image, 0, 0, rect.width, rect.height);
context.canvas.toBlob(resolve);
};
image.src = URL.createObjectURL(serialize(svg));
return promise;
}
serialize = {
const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";
return function serialize(svg) {
svg = svg.cloneNode(true);
const fragment = window.location.href + "#";
const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);
while (walker.nextNode()) {
for (const attr of walker.currentNode.attributes) {
if (attr.value.includes(fragment)) {
attr.value = attr.value.replace(fragment, "#");
}
}
}
svg.setAttributeNS(xmlns, "xmlns", svgns);
svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
const serializer = new window.XMLSerializer();
const string = serializer.serializeToString(svg);
return new Blob([string], { type: "image/svg+xml" });
};
}
data2 = data.map((d) => ({
...d,
WINNER: d.Commendation.includes("Winner") ? "Loser" : "Winner"
}))
data = file.map(d => {
return {
Date: new Date(d.Date).getFullYear(),
Category: d.Category,
Commendation: d.Commendation,
Brand: d.Camera.replace(/ .*/, ""),
Camera: d.Camera,
Lens: d.Lens,
FocalLength: +d.FocalLength.replace("mm", ""),
ShutterSpeed: d.ShutterSpeed.replace("sec", "")
.split("/")
.reduce((d, i) => d / i),
Aperture: +d.Aperture.replace("f", ""),
ISO: +d.ISO.replace("ISO", "")
};
})
file = d3.csvParse(await FileAttachment("data.txt").text())
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.
