md`# 👍Voxels API`
chart = {
try {
return dot`${source}`;
} catch (error) {
return this;
}
}
viewof source = {
const textarea = html`<textarea rows=1 spellcheck=false>digraph {
rankdir = LR;
node [shape = oval];
// ARROWS
UrlSourceCollectibleModels [shape = rarrow];
"web/src/avatar.tsx" [shape = rarrow];
"web/account/collectibles.tsx" [shape = rarrow];
"web/src/new-collection.tsx" [shape=rarrow];
"web/src/collection.tsx" [shape = rarrow];
"web/src/components/marketplace" [shape = rarrow];
"web/src/components/marketplace/collection" [shape = rarrow];
"web/src/components/marketplace/collectibles/gift-window.tsx" [shape = rarrow];
Costumer [shape = rarrow];
// COMPONENTS
"web/src/components/collectibles.tsx" [shape = component];
"<CollectionItem>" [shape = component];
"<CollectibleCard>" [shape = component];
// NONE
getlocalStorage [shape = none];
setlocalStorage [shape = none];
"/api/assets/wallet" [shape = none];
"/collections/owned/by/" [shape = none];
"/collections/:address?chain/:id-or_address.json" [shape = none];
"/collections/:address?chain/:id-or_address/info.json" [shape = none];
"/collections/:chain/:address/collectibles.json" [shape = none];
"/collections/:chain/:address/collectibles.json?token_ids=:ids" [shape = none];
"/collectibles.json?q=wallet" [shape = none];
"https://wearables-10769.kxcdn.com/:uuid-:slug.gif" [shape = none];
"/c/v2/:chain_id/:collection_address/:token_id" [shape = none];
// START: web/src/AVATAR.TSX
edge [label="", color="blue"];
"web/src/avatar.tsx" -> fetchUsersCollectibles;
edge [label="Wallet Created"];
"web/src/avatar.tsx" -> "/collectibles.json?q=wallet";
edge [label=""];
"/collectibles.json?q=wallet" -> "<CollectibleCard>";
// START: "web/account/collectibles.tsx"
edge [label="", color="green"];
"web/account/collectibles.tsx" -> "/collections/owned/by/";
"/collections/owned/by/" -> "<CollectionItem>";
edge [label="", color="black"];
// START: UrlSourceCollectibleModels
edge [label="", color="yellow"];
UrlSourceCollectibleModels -> fetchUsersCollectiblesData;
"/collections/:chain/:address/collectibles.json?token_ids=:ids" -> setlocalStorage;
Costumer -> fetchUsersCollectiblesData
fetchUsersCollectiblesData -> fetchUsersCollectibles
fetchUsersCollectiblesData -> "/collections/:chain/:address/collectibles.json?token_ids=:ids";
// START: "web/src/new-collection.tsx"
edge [label="", color="black"];
"web/src/new-collection.tsx" -> "/collections/owned/by/";
// START: "web/src/collection.tsx"
edge [label="", color="pink"];
"web/src/collection.tsx" -> "web/src/components/collectibles.tsx";
"web/src/components/collectibles.tsx" -> CollectionHelper;
CollectionHelper -> getCollectionStats;
getCollectionStats -> "/collections/:address?chain/:id-or_address.json"
CollectionHelper -> fetchCollectionsCollectibles;
fetchCollectionsCollectibles -> "/collections/:chain/:address/collectibles.json"
// Marketplace
edge [label="", color="red"];
"web/src/components/marketplace" -> "web/src/components/collectibles.tsx";
"web/src/components/marketplace/collection" -> "web/src/components/collectibles.tsx";
"web/src/components/collectibles.tsx" -> "/collectibles.json?page=";
// START: "web/src/collection.tsx"
edge [label="", color="green"];
"web/src/collection.tsx" -> "CollectionHelper";
CollectionHelper -> getCollectionInfo;
getCollectionInfo -> "/collections/:address?chain/:id-or_address/info.json";
// Function: fetchUsersCollectibles;
edge [label="", color="black"];
fetchUsersCollectibles -> getlocalStorage;
fetchUsersCollectibles -> "/api/assets/wallet";
edge [label="", color="blue"];
"web/account/collectibles.tsx" -> fetchUsersCollectibles;
fetchUsersCollectibles -> "<CollectibleCard>";
"<CollectibleCard>" -> WearableHelper;
"web/src/components/marketplace/collectibles/gift-window.tsx" -> fetchUsersCollectibles
edge [label="", color="black"];
WearableHelper -> getMetaData;
WearableHelper -> getWearableGif;
getMetaData -> "/c/v2/:chain_id/:collection_address/:token_id";
getWearableGif -> "https://wearables-10769.kxcdn.com/:uuid-:slug.gif";
}`;
textarea.style = `
outline: none;
display: block;
box-sizing: border-box;
width: calc(100% + 28px);
font: var(--mono_fonts);
min-height: 33px;
border: none;
padding: 4px 10px;
margin: 0 -14px;
background: rgb(245,245,245);
tab-size: 2;
`;
textarea.oninput = () => {
textarea.style.height = "initial";
textarea.style.height = `${textarea.scrollHeight}px`;
};
yield textarea;
textarea.oninput();
}
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.
