Stories with data, visuals & code at CNN.
DOM.download(() => rasterize(chart), undefined, "Save as PNG")
DOM.download(() => serialize(chart), undefined, "Save as SVG")
nudata = FileAttachment("lebron_career_game_by_game_points.csv").csv()
// data.forEach(function(d) {
// d["value"] = +d["value"];
// var date_t = new Date(d["date"]);
// date_t.setDate(date_t.getDate() + 1)
// d["date"] = date_t
// });
import {rasterize} from "@mbostock/saving-svg"
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, null, false);
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"});
};
}
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.
