Media artist, web developer & designer.
Public
Edited
Sep 23, 2024
data = FileAttachment("Cronologia-Colombia.csv").csv()
viewof yearInterval = interval([1890, 2024], {
step: 1,
value: [1940, 1990],
label: 'Seleccionar Intervalo de años',
})
viewof eventsSelection = radio({
title: 'Events',
description: 'Please select which events to show',
options: [
{ label: 'Exhibición', value: 'Exhibición' },
{ label: 'Obra', value: 'Obra' },
{ label: 'Todo', value: 'Todo' },
{ label: 'Evento histórico', value: 'Evento histórico' },
{ label: 'Periodización', value: 'Periodización' },
],
value: "Exhibición"
})
previousData = data
.map(function (d) {
const title = truncateString(d.Acontecimiento, 20);
const year = d.Fecha;
const start = d.Fecha;
const addYear = +start + 1;
const end = addYear.toString();
const collection = [];
return { ...d, title, year, start, collection, end };
})
.filter(d => d.year > yearInterval[0] && d.year < yearInterval[1])
.filter(({ year }, index) => !year.includes(year, index + 1))
.sort((a, b) => d3.ascending(a.year, b.year))
preparedData = eventsSelection && eventsSelection !== 'Todo' ? previousData.filter(({ Tipo }) => Tipo === eventsSelection ) : previousData;
yourCats = ["Tipo", "Ciudad", "Organizador"]; // available categories
yourActiveCat = "Tipo"; // category that is currently shown -> can be interactive!
truncateString = (string = '', maxLength = 50) =>
string.length > maxLength
? `${string.substring(0, maxLength)}…`
: string
viewof widthSlider = slider({ value: 1 })
viewof labelDistribution = html`<select>
<option>top-bottom</option>
<option>top</option>
<option>bottom</option>
</select>`
milestones = require('d3-milestones')
generateEventTimeline()
stylesheet = html`<link rel='stylesheet'
href='https://unpkg.com/d3-milestones@1.0.0-beta1/build/d3-milestones.css' />`
import {slider} from "@jashkenas/inputs"
import {generateEventTimeline}
with {preparedData as events, yourCats as categories, yourActiveCat as activeColorCategory}
from "@mahog/event-timeline-collections"
import {generateStyles} from "@mahog/event-timeline-collections"
import {radio} from "@jashkenas/inputs"
import {interval} from '@mootari/range-slider'
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.
