Interactive data visualization
Public
Edited
Jan 10, 2023
Importers
function docPreview(html) {
const resPreview = document.createElement('div');
resPreview.style.border = '1px solid lightgray';
resPreview.style.borderRadius = '10px';
resPreview.style.padding = '10px 15px';
resPreview.innerHTML = html;
return resPreview;
}
function tag(title, description) {
let html = '';
html += `<span style="font-weight: bold; margin-right: 20px">${title}</span>`
html += `<span style="color: gray">${description ?? ''}</span>`
const res = docPreview(html);
res.value = {
type: 'tag',
title,
description,
};
return res;
}
viewof testTag = tag('Документирование', 'что-то интересное')
function doc(obj, title, signatures, spec) {
let html = '';
html += `<div style="font-weight: bold">${title}</div>`
return docPreview(html);
}
doc(doc, 'Функция документирования', '', ['', '', ''])
function basicType(title, checker) {
let html = '';
html += `<span style="font-weight: bold; margin-right: 20px">${title}</span>`
html += `<span style="color: gray">${String(checker)}</span>`
const res = docPreview(html);
res.value = {
type: 'tag',
title,
checker,
};
return res;
}
function taggedType(title, type) {
let html = '';
html += `<span style="font-weight: bold; margin-right: 20px">${title}</span>`
html += `<span style="color: gray">${type.value.title}</span>`
const res = docPreview(html);
res.value = {
type: 'tag',
title,
type,
};
return res;
}
function tupleType(...args) {
return {value: {
type: 'tuple',
args,
}}
}
function funResType(fun, ...args) {
return {value: {
type: 'funRes',
fun,
args,
}}
}
function constructorType(fun, ...args) {
return {value: {
type: 'tuple',
fun,
args,
}}
}
function funType(fun, ...args) {
return {value: {
type: 'fun',
fun,
args,
}}
}
number = basicType('number', v => typeof v === 'number')
boolean = basicType('boolean', v => typeof v === 'boolean')
context = basicType('context', v => true)
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.
