Interaction Designer, Creative Technologist, Professor and Researcher
/*
this getdata function works in observable, but throws an error in the definition here.
it's prefereable to use D3 fetch instead.
*/
/*
getdata = function (url) {
let dados = fetch(url).then((response) => {
return response.json();
});
return dados;
}
*/
getdata = d3.json
/*
Using D3 csv fetch because it's already loaded in Observable
*/
getcsvdata = d3.csv
gsdata = function (url) {
return getcsvdata(GoogleSheetCsvURL(url));
}
GoogleSheetCsvURL = function (url) {
url = new URL(url);
const id = url.pathname.split("/")[3];
const gid = new URLSearchParams(url.hash.slice(1)).get("gid") || 0;
return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`;
}
empty = function (myvar) {
if (typeof myvar == "undefined" || myvar == "" || myvar == null) {
return true;
} else {
return false;
}
}
notempty = function (myvar) {
if (typeof myvar != "undefined" && myvar != "" && myvar != null) {
return true;
} else {
return false;
}
}
imagefromallsources = function (kurl) {
// FUNÇÃO IMAGE FROM ALL SOURCES
let saida = kurl;
let murl = kurl;
if (kurl.match(/(\&$)/gm)) {
murl = kurl.replace(/(\&$)/gm, "");
}
if (murl.match(/https:\/\/drive\.google\.com\/open\?(.*)/i)) {
let complementa = murl.match(
/https:\/\/drive\.google\.com\/open\?id=(.*)/i
)[1];
/* OLD saida =
"https://drive.google.com/uc?export=view&" +
complementa +
"&usp=drive_fs";
*/
saida = "https://lh3.googleusercontent.com/d/" + complementa;
}
if (murl.match(/https:\/\/drive\.google\.com\/file\/d/i)) {
let complementa = murl.match(
/https:\/\/drive\.google\.com\/file\/d\/(.*)\/view/i
)[1];
/* OLD saida =
"https://drive.google.com/uc?export=view&id=" +
complementa +
"&usp=drive_fs";
*/
saida = "https://lh3.googleusercontent.com/d/" + complementa;
}
if (murl.match(/https:\/\/drive\.google\.com\/uc\?export=view/i)) {
let complementa = murl.match(/id=(.*)/i)[1];
saida = "https://lh3.googleusercontent.com/d/" + complementa;
}
let nurl = murl.replace(/\&/gi, "&");
let video = nurl.match(
/(http:|https:|)\/\/(player.|www.|m.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/
);
if (typeof video != "undefined" && video != null) {
saida = "https://img.youtube.com/vi/" + video[6] + "/0.jpg";
}
if (nurl.match(/\.png|\.svg|\.jpg|\.gif|.webp/i)) {
saida = nurl;
}
return saida;
}
imagetable = function (data, column, options) {
let code = "";
let colnum = 4;
let imgsize = "cover";
let aspect = "1/1";
let start = 0;
let stop = data.length;
if (typeof options != "undefined" && options != null && options != "") {
if (
typeof options.columns != "undefined" &&
options.columns != null &&
options.columns != ""
) {
colnum = options.columns;
}
if (
typeof options.type != "undefined" &&
options.type != null &&
options.type != ""
) {
imgsize = options.type;
}
if (
typeof options.proportion != "undefined" &&
options.proportion != null &&
options.proportion != ""
) {
aspect = options.proportion;
}
if (
typeof options.index != "undefined" &&
options.index != null &&
options.index != ""
) {
start = options.index;
}
if (start > data.length) {
start = data.length;
}
if (
typeof options.size != "undefined" &&
options.size != null &&
options.size != ""
) {
stop = start + options.size;
}
if (stop >= data.length) {
stop = data.length;
}
}
let grd = "";
for (let k = 0; k < colnum; k++) {
grd += " 1fr";
}
code += `
<style>
.datat_elemtyp05 {
display: grid;
gap: 16px 16px;
width: 100%;
}
.datat_elemtyp05 div {
background-position: top center;
}
.datat_elemtyp05 div:hover {
cursor: pointer;
}
@media screen and (max-width: 720px) {
.datat_elemtyp05 {
grid-template-columns: 1fr !important;
}
}
</style>
<div class="datat_elemtyp05 datat_imagetable" style='grid-template-columns:${grd};'>`;
for (let i = start; i < stop; i++) {
code += `<div class="datat_imagetable_images" onclick='window.open("${imagefromallsources(
data[i][column]
)}")' style='background-repeat: no-repeat; background-size: ${imgsize}; aspect-ratio: ${aspect}; background-image: url("${imagefromallsources(
data[i][column]
)}");'></div>`;
}
code += `</div>`;
return html`${code}`;
}
dayadd = function (data, dias) {
let dataAjustada = data
.replace(/(\d+)\/(\d+)\/(\d\d\d\d)/g, "$3-$2-$1")
.toString();
let result = new Date(dataAjustada);
result.setDate(result.getDate() + (dias + 1));
let ajustaresult =
result.getDate() +
"/" +
(result.getMonth() + 1) +
"/" +
result.getFullYear();
return ajustaresult;
}
howmanydaysincluding = function (dataB, dataA) {
let dataAjustada = dataA
.replace(/(\d+)\/(\d+)\/(\d\d\d\d)/g, "$3-$2-$1")
.toString();
let dataBjustada = dataB
.replace(/(\d+)\/(\d+)\/(\d\d\d\d)/g, "$3-$2-$1")
.toString();
let resultA = new Date(dataAjustada);
let resultB = new Date(dataBjustada);
let resultC = Math.abs(resultA - resultB);
return resultC / (1000 * 3600 * 24) + 1;
}
rescale = function ([a, b], [c, d]) {
return function (e) {
return ((e - a) / (b - a)) * (d - c) + c;
};
}
bfilter = function (arr, crit) {
let newarr = [];
let c = 0;
for (let k = 0; k < arr.length; k++) {
if (arr[k][crit] != "" && arr[k][crit] != undefined) {
newarr[c] = {};
newarr[c] = arr[k];
c++;
}
}
return newarr;
}
cfilter = function (arr, crit, regex) {
let newarr = [];
let patt = new RegExp(regex, "i");
let c = 0;
for (let k = 0; k < arr.length; k++) {
if (
arr[k][crit] != "" &&
arr[k][crit] != undefined &&
patt.test(arr[k][crit])
) {
newarr[c] = {};
newarr[c] = arr[k];
c++;
}
}
return newarr;
}
sumarray = function (arr1, arr2) {
let arr3 = [];
let c = 0;
for (let i = 0; i < arr1.length; i++) {
arr3[c] = arr1[i];
c++;
}
for (let k = 0; k < arr2.length; k++) {
arr3[c] = arr2[k];
c++;
}
return arr3;
}
sumarrayc = function (arr1, arr2) {
let arr3 = [];
let c = 0;
for (let i = 0; i < arr1.length; i++) {
arr3[c] = arr1[i];
c++;
}
for (let k = 0; k < arr2.length; k++) {
arr3[c] = arr2[k];
c++;
}
let kes = [];
for (let i = 0; i < arr3.length; i++) {
for (let k in arr3[i]) {
kes[k] = true;
}
}
let ks = [];
let ck = 0;
for (let n in kes) {
ks[ck] = n;
ck++;
}
let arr4 = [];
for (let n = 0; n < arr3.length; n++) {
arr4[n] = {};
for (let s = 0; s < ks.length; s++) {
if (
typeof arr3[n][ks[s]] == `undefined` ||
arr3[n][ks[s]] == null ||
arr3[n][ks[s]] == ""
) {
arr4[n][ks[s]] = "";
} else {
arr4[n][ks[s]] = arr3[n][ks[s]];
}
}
}
return arr4;
}
unique = function (arr, crit) {
let newarr = [];
for (let i = 0; i < arr.length; i++) {
newarr[arr[i][crit]] = 0;
}
let list = [];
for (let key in newarr) {
list.push(key);
}
return list;
}
sortbylist = function (arr, list, crit) {
let newarr = [];
for (let l = 0; l < list.length; l++) {
for (let a = 0; a < arr.length; a++) {
if (arr[a][crit] == list[l]) {
newarr.push(arr[a]);
}
}
}
return newarr;
}
alphabetic = function (arr, crit) {
let listuniques = unique(arr, crit);
listuniques.sort();
let newarr = sortbylist(arr, listuniques, crit);
return newarr;
}
tags = function (arr, crit, separator) {
let narr = [];
let expl = [];
for (let p = 0; p < arr.length; p++) {
expl = [];
expl = arr[p][crit].split(separator);
for (let z = 0; z < expl.length; z++) {
narr.push(expl[z]);
}
}
let newarr = [];
for (let i = 0; i < narr.length; i++) {
newarr[narr[i]] = 0;
}
let list = [];
for (let key in newarr) {
list.push(key);
}
return list;
}
shuffle = function (maxvalue, listsize) {
let lista = [];
let c = 0;
let r = false;
let n = 0;
while (c < listsize) {
n = parseInt(Math.random() * maxvalue);
r = false;
for (let i = 0; i < lista.length; i++) {
if (n == lista[i]) {
r = true;
}
}
if (!r) {
lista[lista.length] = n;
c++;
}
}
return lista;
}
select = function (arr, fun, arr2) {
let newarr = [];
for (let i = 0; i < arr.length; i++) {
fun(newarr, arr[i], arr2);
}
return newarr;
}
patterncheck = function (n, arr, patt) {
let mark = false;
for (let k = 0; k < Object.keys(arr).length; k++) {
if (patt.test(arr[Object.keys(arr)[k]])) {
mark = true;
}
}
if (mark) {
n.push(arr);
}
}
selectp = function (oldarray, patt) {
return select(oldarray, patterncheck, patt);
}
multipatterncheck_add = function (n, arr, patt) {
if (patt != "" || typeof patt != "undefined") {
let mark = false;
let multipatt = patt.split(" ");
let regextrans = "";
for (let m = 0; m < multipatt.length; m++) {
for (let k = 0; k < Object.keys(arr).length; k++) {
regextrans = new RegExp(multipatt[m], "i");
if (regextrans.test(arr[Object.keys(arr)[k]])) {
mark = true;
}
}
}
if (mark) {
n.push(arr);
}
} else {
n.push(arr);
}
}
selecta = function (oldarray, str) {
return select(oldarray, multipatterncheck_add, str);
}
multipatterncheck_exclude = function (n, arr, patt) {
if (patt != "" || typeof patt != "undefined") {
let multipatt = patt.split(" ");
let regextrans = "";
let allcheck = [];
let mark = true;
for (let i = 0; i < multipatt.length; i++) {
allcheck[multipatt[i]] = false;
}
for (let k = 0; k < Object.keys(arr).length; k++) {
for (let m = 0; m < multipatt.length; m++) {
regextrans = new RegExp(multipatt[m], "i");
if (regextrans.test(arr[Object.keys(arr)[k]])) {
allcheck[multipatt[m]] = true;
}
}
}
for (let i = 0; i < multipatt.length; i++) {
if (allcheck[multipatt[i]] == false) {
mark = false;
}
}
if (mark) {
n.push(arr);
}
} else {
n.push(arr);
}
}
selecte = function (oldarray, str) {
return select(oldarray, multipatterncheck_exclude, str);
}
setinput = function (input, value) {
input.value = value;
input.dispatchEvent(new Event("input", { bubbles: true }));
}
createbuttons = function (input, labels, values) {
if (typeof values == "undefined" || values == null || values == "") {
values = labels;
}
let buttons = [];
let c = 0;
for (let i = 0; i < values.length; i++) {
if (labels[i] != "" && labels[i] != null) {
buttons[c] = html`
<style>
.custombutton {
display: inline-block;
padding: 8px 15px 5px 15px;
margin: 0 10px 10px 0;
background-color: #f1f6fb;
cursor: pointer;
line-height: 16px;
font-size: 14px;
font-family: Courier New;
}
.custombutton:hover {
background-color: #adc5df;
}
</style>
<div class='custombutton'>${labels[i]}</div>`;
buttons[c].onclick = function () {
setinput(input, values[i]);
};
c++;
}
}
return html`${buttons}`;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.