The avatar for @ranoya
Guilherme Ranoya
Interaction Designer, Creative Technologist, Professor and Researcher
Public
Tools
Edited
May 31
Importers
Tools
c64 noiseVizTextos acadêmicos sobre tecnologias criativasSlidelines Level Component DocumentationCPPD UFPEDATAT DocumentationFigma APIProdução CACLinha do tempo de ProduçãoURL File open in playgroundGerador de Relatos - CPPD/UFPEGoogle Drive Public ImagesServiços, Ferramentas e RecursosDataviz em Javascript utilizando dados em tempo real de uma planilha no Google Docs
DataT
Fronteiras do DesignprocessingFor Humans, Please
Insert cell
Insert cell
Insert cell
Insert cell
/*

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
Insert cell
Insert cell
/*

Using D3 csv fetch because it's already loaded in Observable

*/

getcsvdata = d3.csv
Insert cell
Insert cell
gsdata = function (url) {
return getcsvdata(GoogleSheetCsvURL(url));
}
Insert cell
Insert cell
Insert cell
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}`;
}
Insert cell
Insert cell
empty = function (myvar) {
if (typeof myvar == "undefined" || myvar == "" || myvar == null) {
return true;
} else {
return false;
}
}
Insert cell
notempty = function (myvar) {
if (typeof myvar != "undefined" && myvar != "" && myvar != null) {
return true;
} else {
return false;
}
}
Insert cell
Insert cell
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;
}
Insert cell
Insert cell
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}`;
}
Insert cell
Insert cell
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;
}
Insert cell
Insert cell
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;
}
Insert cell
Insert cell
rescale = function ([a, b], [c, d]) {
return function (e) {
return ((e - a) / (b - a)) * (d - c) + c;
};
}
Insert cell
Insert cell
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;
}
Insert cell
Insert cell
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;
}
Insert cell
Insert cell
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;
}
Insert cell
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;
}
Insert cell
Insert cell
aSubtract = function (arr1, arr2) {
var array = [];
var c = 0;

for (let i1 = 0; i1 < arr1.length; i1++) {
let temp = false;

for (let i2 = 0; i2 < arr2.length; i2++) {
if (arr1[i1] == arr2[i2]) {
temp = true;
}
}

if (temp == false) {
array[c] = arr1[i1];
c++;
}
}

return array;
}
Insert cell
Insert cell
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;
}
Insert cell
Insert cell
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;
}
Insert cell
Insert cell
alphabetic = function (arr, crit) {
let listuniques = unique(arr, crit);
listuniques.sort();

let newarr = sortbylist(arr, listuniques, crit);

return newarr;
}
Insert cell
Insert cell
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;
}
Insert cell
Insert cell
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;
}
Insert cell
Insert cell
select = function (arr, fun, arr2) {
let newarr = [];

for (let i = 0; i < arr.length; i++) {
fun(newarr, arr[i], arr2);
}

return newarr;
}
Insert cell
Insert cell
Insert cell
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);
}
}
Insert cell
selectp = function (oldarray, patt) {
return select(oldarray, patterncheck, patt);
}
Insert cell
Insert cell
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);
}
}
Insert cell
selecta = function (oldarray, str) {
return select(oldarray, multipatterncheck_add, str);
}
Insert cell
Insert cell
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);
}
}
Insert cell
selecte = function (oldarray, str) {
return select(oldarray, multipatterncheck_exclude, str);
}
Insert cell
Insert cell
setinput = function (input, value) {
input.value = value;
input.dispatchEvent(new Event("input", { bubbles: true }));
}
Insert cell
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}`;
}
Insert cell

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.
Learn more