Public
Edited
Mar 1
titulo = html`
<div class="titulo">
${md`# Arte Geológico`}
</div>
`
csvPath = "https://docs.google.com/spreadsheets/d/e/2PACX-1vT-_sacRwxvFbVjoaQllGfTGGWRfgtZvhq1Aw6KiLdWYHnBWE2VwjA3rE4UWi8oC_tIi0AS7o7mCVfX/pub?output=csv"
csvString = fetch(csvPath).then((response) => response.text())
data = d3.csvParse(csvString, d3.autoType)
data[2].obra
tabla = Inputs.table(data)
collection = html`
<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 20px;">
${data.map(
(item) => html`
<div style="
width: 300px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
background-color: white;
transition: transform 0.2s ease-in-out;
" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
<img src="${item.img}" style="width: 100%; height: 180px; object-fit: cover;">
<div style="padding: 15px;">
<h3 style="margin: 0; font-size: 18px;">${item.obra}</h3>
<p style="color: gray; font-size: 14px; margin: 5px 0;">${item.fecha} - ${item.artista}</p>
<p style="font-size: 14px; line-height: 1.4;">${
item.descripcion.length > 120
? item.descripcion.substring(0, 120) + "..."
: item.descripcion
}</p>
<a href="${item.link}" target="_blank" style="color: #007bff; text-decoration: none; font-size: 14px;">Ver más</a>
</div>
</div>
`
)}
</div>
`;
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.
