Public
Edited
Aug 11, 2022
Importers
6 stars
display([
{ id: 2, name: 'Jane Browne', emails: ['jbrown@atx.io', 'j.brown@atlassian.net'], verified: true },
{ id: 4, name: 'John Greene', emails: ['jgreene@atx.io', 'j.greene@atlassian.net'], verified: false },
{ id: 9, name: 'Jack White', emails: ['jwhite@atx.io', 'j.white@atlassian.net'], verified: true },
])
display([
{ name: 'Jane Browne', emails: ['jbrown@atx.io', 'j.brown@atlassian.net'], verified: true },
{ name: 'John Greene', verified: false },
{ name: 'Jack White', emails: ['jwhite@atx.io', 'j.white@atlassian.net'] },
false,
{ name: 'Janet Redd', emails: ['jredd@atx.io', 'j.redd@atlassian.net'], verified: true, nickname: 'jr05' },
42
])
{
class User {
constructor() {
this.id = 453,
this.email = 'user@example.com',
this.password = 't0ps3cr3T!'
this.enabled = false;
}
enable() {
this.enabled = true;
}
}
return display(new User());
}
{
class Person {
constructor(name, dateOfBirth) {
this.name = name;
this.dateOfBirth = dateOfBirth;
}
toString() {
return `${this.name} (${this.dateOfBirth})`;
}
}
class Employee extends Person {
constructor(name, dateOfBirth, position) {
super(name, dateOfBirth);
this.position = position;
}
}
return display(new Employee('Botond Balázs', '1986-01-31', 'grunt'));
}
display({
name: 'Jane Brown',
maidenName: null,
nickname: undefined,
emails: ['jbrown@atx.io', 'j.brown@atlassian.net'],
//atomsInBody: BigInt(123456787654344), // uncomment if your browser supports BigInt
verified: true,
symbol: Symbol('sym'),
friends: 5,
disable: () => {},
setName: (name) => {}
})
{
const ouroboros = {};
ouroboros.self = ouroboros;
return display(ouroboros);
}
{
const first = { value: 1, prev: null };
const second = { value: 2, prev: first };
first.next = second;
const third = { value: 3, prev: second, next: null }
second.next = third;
return display(first);
}
{
const root = { value: 1, parent: null };
const l = { value: 0, parent: root };
const r = { value: 2, parent: root, left: null, right: null };
root.left = l;
root.right = r;
const ll = { value: -1, parent: l, left: null, right: null };
const lr = { value: 0.5, parent: l, left: null, right: null };
l.left = ll;
l.right = lr;
return display(root);
}
display({ name: 'John Beckett', email: 'jbeckett@gmail.com' })
display([true, false])
display(["a", "b", "c"])
display([1, 2, 3])
display(1)
display(0)
display("hello")
maxDepth = 10
display = {
function display(v) {
return div({ class: 'reset' }, displayValue(v, new Set()));
}
function displayValue(v, refs) {
if (refs.has(v)) {
return displayCircular(v);
}
if (isPrimitive(v)) {
return displayPrimitive(v);
}
if (isFunction(v)) {
return displayFunction(v);
}
refs.add(v);
if (isArray(v)) {
return displayArray(v, refs);
}
if (isObject(v)) {
return displayObject(v, refs);
}
}
function displayCircular(v) {
return span({}, '⟳ Circular reference');
}
function displayObject(v, refs) {
const children = [
tr({}, th({ colspan: 2 }, v.constructor && v.constructor.name || 'Object')),
...Object.entries(v).map(([k, kv]) => tr({},
th({ scope: 'row', class: 'property-name' }, k),
td({}, displayValue(kv, refs))
))
];
return table({ class: 'object' }, ...children);
}
function displayArray(v, refs) {
const cols = getColumnNames(v);
const children = [
tr({}, th({ colspan: cols.length }, 'Array')),
tr({}, ...cols.map(c => th({ class: 'property-name' }, c))),
...v.map(i => displayRow(i, cols, refs))
];
return table({ class: 'array' }, ...children);
}
function displayRow(v, cols, refs) {
if (isObject(v)) {
return tr({},
...cols.map(c => td({}, c in v ? displayValue(v[c], refs) : ''))
);
}
return tr({}, td({ colspan: cols.length }, displayValue(v, refs)));
}
function displayFunction(v) {
return code({ class: 'function' }, `f(${v.length})`);
}
function getColumnNames(arr) {
const colSet = arr.reduce((cols, v) => {
if (isObject(v)) {
Object.keys(v).forEach(k => cols.add(k));
}
return cols;
}, new Set());
return [...colSet.keys()];
}
function displayPrimitive(v) {
switch (typeof v) {
case 'object':
return displayNull();
case 'undefined':
return displayUndefined();
case 'boolean':
return displayBoolean(v);
case 'number':
return displayNumber(v);
case 'string':
return displayString(v);
case 'bigint':
return displayBigInt(v);
case 'symbol':
return displaySymbol(v);
default:
return v;
}
}
function displaySymbol(v) {
return code({ class: 'symbol' }, v);
}
function displayBigInt(v) {
return em({}, 'BigInt(' + v + ')');
}
function displayString(v) {
return v;
}
function displayNumber(v) {
return em({}, v);
}
function displayUndefined() {
return code({}, 'undefined');
}
function displayNull() {
return code({}, 'null');
}
function displayBoolean(v) {
return code({}, v);
}
function isPrimitive(v) {
return typeof v === 'number'
|| typeof v === 'string'
|| typeof v === 'boolean'
|| typeof v === 'bigint'
|| typeof v === 'undefined'
|| typeof v === 'symbol'
|| v === null;
}
function isFunction(v) {
return typeof v === 'function';
}
function isArray(v) {
return Array.isArray(v);
}
function isObject(v) {
return typeof v === 'object';
}
return display;
}
makeEl = name => (attrs, ...children) => el(name, attrs, ...children);
function text(content) {
return document.createTextNode(content);
}
function el(name, attrs, ...children) {
const element = document.createElement(name);
for (const [k, v] of Object.entries(attrs)) {
element.setAttribute(k, v.toString());
}
for (const child of children) {
if (child instanceof HTMLElement) {
element.appendChild(child);
} else {
element.appendChild(document.createTextNode(child.toString()));
}
}
return element;
}
html`
<style>
.reset, .reset * {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: .9rem;
}
.reset code {
font-family: Monaco, Consolas, 'Courier New', monospace;
}
.reset table {
width: auto;
min-width: 0;
border: 2px solid royalblue;
}
.reset th,
.reset td {
padding: .1rem .2rem;
}
.reset th {
background: royalblue;
color: white;
}
.reset th.property-name {
background: #eee;
color: black;
font-weight: normal;
border: 1px solid #ccc;
}
.reset td {
border: 1px solid #ccc;
}
.reset td > table {
margin: .2rem auto;
}
.reset code.symbol {
color: #aaa;
}
.reset code.function {
color: #aaa;
font-style: italic;
}
</style>
`
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.
