Crafting Visual Stories with Data.
Public
Edited
Jul 26, 2024
<style>
.card {
width: 300px;
border: 1px solid black;
padding:1rem;
}
.card-topic {
text-transform: uppercase;
}
.card-title {
color: red;
}
.links {
display:flex;
gap:1rem
}
</style>
<article class="card">
<img class="card-img-top" src="https://picsum.photos/id/3/400/" alt="Card image cap" width="300" height="300">
<div class="card-body">
<h5 class="card-topic">Phones</h5>
<h2 class="card-title">Phone Explorer</h2>
<p class="card-text">An interactive buying guide and explorer to get the best phone for you.</p>
<div class="links" >
<a href="#" class="btn">Project</a>
<a href="#" class="btn">Process</a>
</div>
</div>
</article>
single = ({
id: 0,
title: "Phones Explorer",
topic: "Phones",
description:
"An interactive buying guide and explorer to get the best phone for you.",
imageLink: "https://picsum.photos/id/3/400/",
processLink: "https://amitkaps.com/phonevis/process",
projectLink: "https://amitkaps.com/phonevis"
})
template = html`<article class="card" style="width: 300px; border: 1px solid black; padding:1rem;">
<img class="card-img-top" src="${single.imageLink}" alt="Card image cap" width="300" height="300">
<div class="card-body">
<h5 class="card-topic" style="text-transform: uppercase">${single.topic}</h5>
<h2 class="card-title">${single.title}</h2>
<p class="card-text">${single.description}</p>
<div class="links" style="display:flex; gap:1rem">
<a href="${single.projectLink}" class="btn">Project</a>
<a href="${single.processLink}" class="btn">Process</a>
</div>
</div>
</article>`
// Full function for Square
function square(x) {
return x * x;
}
// Small online function function (Arrow) for square
square2 = (x) => x * x
//Anonymous function
(x) => x * x
numbers = [1, 2, 3, 4]
numbers.map((x) => square(x))
// Full function
function sentence(word) {
return `hello ${word} \n`;
}
sentence("world")
words = ["world", "universe", "planets"]
words.map((x) => sentence(x))
// Full function
function sentencehtml(word) {
return html`<li>hello ${word} </li>`;
}
html`
<div>
<h4>Three sentence should come below this line</h4>
<ul>
${words.map((x) => sentence(x))}
</ul>
</div>
`
html`
<div>
<h4>Three sentence should come below this line</h4>
<ul>
${words.map((x) => sentencehtml(x))}
</ul>
</div>
`
function card(data) {
return html`<article class="card" style="width: 200px; height: 200px; border: 1px solid black; padding:1rem;">
<img class="card-img-top" src="${data.imageLink}" alt="Card image cap" width="300" height="300">
<div class="card-body">
<h5 class="card-topic" style="text-transform: uppercase">${data.topic}</h5>
<h2 class="card-title">${data.title}</h2>
<p class="card-text">${data.description}</p>
<div class="links" style="display:flex; gap:1rem">
<a href="${data.projectLink}" class="btn">Project</a>
<a href="${data.processLink}" class="btn">Process</a>
</div>
</div>
</article>`;
}
INXD2023 - Interactive - Project.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
html`
<section style="display: flex; flex-wrap: wrap; gap: 10px;">
${projects.map((x) => card(x))}
</section>
`
function circleCard(data) {
return svg`
<circle cx=${data.id * 60 + 30} cy=30 r=30></circle>
<text x=${data.id * 60 + 25} y=35 fill="white">${data.id}</text>
`;
}
svg`
<svg width=1000 height=60>
${circleCard(single)}
</svg>
`
svg`
<svg width=1000 height=60>
${projects.map((x) => circleCard(x))}
</svg>
`
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.
