Public
Edited
Nov 20, 2024
Importers
3 stars
toc({ selector: "h2,h3,h4,h5,h6", heading: "Inhaltsverzeichnis" })
datenset=[{"test":11,"coll2":12,"columntotestbroadcolumntitles":13},
{"test":21,"coll2":22,"columntotestbroadcolumntitles":23}]
createCSV = function (config) {
/**
* createCSV function generates and returns a csv to the browser calling the function.
*
* @param {Object} config A config object
* @param {string} [config.filename="daten.csv"] A string with the filename.
* @param {Object[]} config.data The data to be included in the csv as an array of objects
*
*/
//define default for filename if it is not defined.
var filename = config.filename == undefined ? "daten.csv" : config.filename;
//append .csv if needed
filename = filename.endsWith(".csv") ? filename : filename + ".csv";
//if we want to feed d3 objects:
//var data = data.top(Infinity);
var blob = new Blob([d3.csvFormat(config.data)], {
type: "text/csv;charset=utf-8"
});
//console.log(d3.csvFormat(data, ["Bezirk", "2012"]));
saveAs(blob, filename);
}
csvConfig=({filename:"test.csv",
data: datenset})
//uncomment to see the number of clicks
//buttonCsv
//buttonXlsx
pngConfig=({containerId: "testcontainer",
filename: "test.png"})
svgConfig=({containerId: "testcontainer",
filename:"test.svg"})
createEmbedCode = function (uid, type = "javascript") {
/**
* createEmbedCode creates a string of code that can be used to embed a chart in a website. This function works only if called from a an embeded chart, since it scrapes the embed code from there.
*
* @param {string} uid The uid of the element that needs to be embeded.
* @param {string('javascript', 'iframe')} [type="javascript"] The type of embed code to be generated. The options are 'javascript' (default) or 'iframe'.
*/
let parent = d3
.select("#dropdowncontainer" + uid)
.select(function () {
return this.parentNode;
})
.select(function () {
return this.parentNode;
})
.select(function () {
return this.parentNode;
})
.select(function () {
return this.parentNode;
});
//Catch if the script element does not exist
let script = parent.select("script[type=module]");
if (script.empty()) {
return "embed code generation works only if the chart is embeded somewhere using the javascript runtime";
}
script = parent.select("script[type=module]").text();
let regex = /api\.observablehq\.com\/(.+)\.js/gm;
let m;
let urlslug;
while ((m = regex.exec(script)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
urlslug = m[1];
// The result can be accessed through the `m`-variable.
/*m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});*/
}
let regexcells = /name === "(.+)"\) return new/gm;
let cells = [];
while ((m = regexcells.exec(script)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
cells.push(m[1]);
// The result can be accessed through the `m`-variable.
/*m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});*/
}
let regexhiddencells = /name === "(.+)"\) return true/gm;
let hiddencells = [];
while ((m = regexhiddencells.exec(script)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
hiddencells.push(m[1]);
// The result can be accessed through the `m`-variable.
/*m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});*/
}
let hex = randomHex(4);
let code = ``;
if (type == "javascript") {
for (let cell of cells) {
code =
code +
`<div id="observablehq-` +
cell.replace(" ", "-") +
`-` +
hex +
`"></div>
`;
}
code =
code +
`<p>Quelle: <a href="https://observablehq.com/` +
urlslug +
`">Kanton Zürich</a></p>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "https://api.observablehq.com/` +
urlslug +
`.js?v=3";
new Runtime().module(define, name => {
`;
for (let cell of cells) {
code =
code +
` if (name === "` +
cell +
`") return new Inspector(document.querySelector("#observablehq-` +
cell.replace(" ", "-") +
`-` +
hex +
`"));
`;
}
for (let hiddencell of hiddencells) {
code =
code +
` if (name === "` +
hiddencell +
`") return true;
`;
}
code =
code +
`});
</script>`;
}
if (type == "iframe") {
/*code =
code +
`<iframe width="100%" height="` +
parent.node().getBoundingClientRect().height +
`" frameborder="0"
src="https://observablehq.com/embed/` +
urlslug +
`?cells=` +
cells.join("%2C") +
`"></iframe>`;*/
code =
`<iframe width="100%" height="` +
parent.node().getBoundingClientRect().height +
`" frameborder="0" src="https://www.web.statistik.zh.ch/bista/obsembed/?slug=` +
urlslug +
`&elements[]=` +
cells.join("&elements[]=").replace(" ", "-") +
`&hiddenelements[]=` +
hiddencells.join("&hiddenelements[]=").replace(" ", "-") +
`"></iframe>`;
}
return code;
}
blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
//uncomment to generate txt-File
//{saveAs(blob, "hello world.txt");}
//jquery is not needed here
//$ = require('jquery')
import { toc } from "@harrystevens/toc"
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
