Computer Science student at AUTh
viewof data_table = Inputs.table(search_table,{
columns: ["Title",
"Link",
"Organization",
"Topics",
"Datasources",
"Dataset",
"Tools",
"Description"],
format: {
Link: o => htl.html`<a href=${o} target=_blank>Link</a>`,
Topics: o => o.replace(/[\[\]']+/g,''),
Datasources : o => o.replace(/[\[\]']+/g,'')
},
})
plot_organizations = Plot.plot({
x:{round: true,
label: "Percentage of articles per Organization",
labelAnchor: "center",
tickFormat: "%",
domain:[0,0.3]},
grid:true,
marginLeft: 150,
margin:50,
y:{label:"Organizations"},
marks: [
Plot.barX(get_percentages("Organization",0,659), {y:"data_key",x:"value",fill:"data_key",title:"percentage",sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
],
color: {//legend: true,
scheme: "Spectral"}
})
DOM.download(() => rasterize(plot_organizations), 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;
}
downloadButton(plot_organizations)
downloadButton = (chart) => DOM.download(serialize(chart), null, "Download as 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);
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.
