index.qmd

---
toc: false
css: custom.scss
---

```{ojs}
//| echo: false

d3 = require("d3")
topojson = require("topojson")
```

```{ojs}
//| echo: false

geoswe = fetch("https://raw.githubusercontent.com/jnordgren/swedish_data_map_geojson/refs/heads/master/GeoJSON/swedish_provinces.geojson").then((response) => response.json())
```

::: {.grid}

::: {.g-col-1}
```{ojs}
//| echo: false

chart = {
  const width = 100;
  const height = 700;

  const data = pre_format_timeline(raw_points)

  const keys = d3.union(data.map(d => d.label))
  const years = Array.from(d3.union(data.map(d => d.year)))

  const series = d3.stack().order(d3.stackOrderReverse)
    .offset(d3.stackOffsetSilhouette)
    .keys(keys)
    .value(([, D], key) => D.get(key).cnt)
      (d3.index(data, d=> d.year, d => d.label))

  const yearScale = d3.scaleLinear()
    .domain([2001, 2024])
    .rangeRound([height, 0]);

  const countScale = d3.scaleLinear()
        .domain([-40, 40])
          .range([0, width])

  const area = d3.area().y((d,i) => yearScale(years[i]))
      .x1(d => countScale(d[0]))
      .x0(d => countScale(d[1]))

    const colorScale = d3.scaleOrdinal(d3.schemeSpectral[11])
        .domain([0, keys.length])

// Create the SVG container.
  const svg = d3.create("svg")
      .attr('title', 'Timeline')
      .attr("width", width)
      .attr("height", height)
      .attr("viewBox", [0, 0, width, height])

  // Append a group for each series, and a rect for each element in the series.
  svg.append("g")
    .selectAll()
    .data(series)
    .enter()
    .append('path')
        .attr('d', area)
        .style('fill', (d,i) => colorScale(i))
        .style('stroke', 'black')
        .append('title').text(d => d.key)

  const brush = d3.brushY()
  svg.append('g')
    .attr('class', 'brush')
    .call(brush.on('brush', brushed))

  function brushed(e){
    let [high, low] = e.selection
    low = yearScale.invert(low)
    high = yearScale.invert(high)
    draw_circles(new Number(low), new Number(high))
  }
  return svg.node();
}

```

:::

::: {.g-col-1 .map .Map}

```{ojs}
//| echo: false

map = {
  const landColor = "#09A573";
  const landStroke = "#FCF5E9";

  const svg = d3.create('svg')
    .attr("title", "Map")
    .attr('width', chartWidth)
    .attr('height', chartHeight)
    .on('dblclick', reset);

  const path = svg.append('g').
      selectAll('path')
        .data(geoswe.features)
        .join('path')
        .attr('d', pathGenerator)
        .attr('fill', landColor)
        .attr('stroke', landStroke)
        .attr('stroke-width', 1);

  path.style('cursor', 'pointer').on('click', clicked);

  path.append('title').text((d) => d.properties.name);

  function clicked (event, p){

    const t = svg.transition().duration(750)
    path.transition().style('fill', d3.color('gray'));

    d3.select(this).transition().style('fill', 'red');
    car(p.properties.name)
  }

  function reset() {
    car()

    path.transition().style("fill", null);
    svg.transition().duration(750).call(
      d3.zoomIdentity,
      d3.zoomTransform(svg.node()).invert([chartWidth / 2, chartHeight / 2]));
  }

  const circles = svg.append('g').selectAll('circle');

  const years = svg.append('text').attr('class', 'years')

  years.text(`XXXX-XXXX`).attr('x', box[0][0]).attr('y', box[0][1] + 40)

  car()
  return svg.node();
}

```

:::

::: {.g-col-3 .listcol}

:::

:::

```{ojs}
//| echo: false

function car (a) {

  const table = d3.selectAll('.g-col-3');

  table.selectAll('div').remove();

  table.style('width', '500 px')

  const table1 = table.append('div')
  const table2 = table.append('div')

  const cardata = a == undefined ? gathered_points : gathered_points.filter((d) => (d.region == a));

  table1
    .selectAll('div')
    .data(cardata.filter( (d) => (d.type == "conference")))
    .join('div').html(d => `<h4>${d.name}</h4><h5>${d.town}<span style="float:right;">${d.days} ${d.year}</span></h5>`)

  table2
    .selectAll('div')
    .data(cardata.filter( (d) => (d.type != "conference")))
    .join('div').html(d => `<h4>${d.name} <span style="float:right;"><a href="${d.url}">visit</a></span></h4><h5> ${d.town}<span style="float:right;">${d.year}-${d.end}</span></h5>`)

}
```

```{ojs}
//| echo: false

yaml = require('js-yaml')
projaml = FileAttachment('./projects.yaml').text()
confyaml = FileAttachment('./conference.yaml').text()

towns = FileAttachment('towns.json').json()

conf_data = yaml.load(confyaml).map((d) => ({
  name : d.title,
  town: d.town,
  coordinates : towns.find((t) => (t.name == d.town)).coordinates,
  region : towns.find((t) => (t.name == d.town)).region,
  type: 'conference',
  year: d.year,
  end: d.end,
  days: d.days
}))
sorted_c = conf_data.sort(d => d.end)

raw_points = [].concat(
conf_data,
yaml.load(projaml).map((d) => ({
  name : d.name,
  town: d.town,
  coordinates : towns.find((t) => (t.name == d.town)).coordinates,
  region : towns.find((t) => (t.name == d.town)).region,
  type: 'project',
  year: d.year,
  end: d.end,
  url: d.url

}))
)

gathered_points = raw_points.sort((d) => (d.end, d.name))

```

```{ojs}
//| echo: false

function pre_format_timeline(raw_points){
  let sorted = raw_points.sort(d => (d.year)).filter(d => d.type != 'conference')
  let pre_timeline = Array.from(d3.group(sorted, d=> d.year))

  let data = []
  let omega = sorted.map(d => d.year).sort(d => d)[0]
  let alpha = sorted.map(d => d.end).sort(d => -d)[0]

  for (let start_year of pre_timeline) {
    for (let x = alpha ; x <= omega; x++ ){
      let year = start_year[0]
      let row = {
        label: `Started ${year}`,
        year: x,
        cnt: start_year[1].filter(d => d.year <= x & d.end >= x).length
              }
        data.push(row)
      }
  }
  return data
}

```

```{ojs}
//| echo: false

function draw_circles(lower, upper) {

  const svg = d3.select('.map').select('svg')

  svg.selectAll('circle').remove()

  console.log(lower, upper)

  const yrs = svg.selectAll('.years')

  console.log(yrs)

  yrs.text(`${Math.round(lower)}-${Math.round(upper)}`)

  const conf_data_w_xy = raw_points.filter((d) => ((d.end >= lower & d.year <= upper) | d.type == 'conference'  ));

  function addCoords() {
    for (let point of conf_data_w_xy){
      if (point.type == 'conference'){
        point.fx = projection(point.coordinates)[0];
        point.fy = projection(point.coordinates)[1];
      } else {
        point.x = projection(point.coordinates)[0];
        point.y = projection(point.coordinates)[1];
    }
  }
  }
  const radius = 4;

  addCoords()

  console.log(conf_data_w_xy)

  // Custom force to put all nodes in a box
  function boxingForce() {

    for (let node of conf_data_w_xy) {
      // Of the positions exceed the box, set them to the boundary position.
      // You may want to include your nodes width to not overlap with the box.

      if (node.x - radius < box[0][0]) {
        node.x = box[0][0] + radius
      } else if (node.x + radius > box[1][0]) {
        node.x = box[1][0] - radius
      }

      if (node.y - radius < box[0][1]) {
        node.y = box[0][1] + radius
      } else if (node.y + radius > box[1][1]) {
        node.y = box[1][1] - radius
      }
  }
}

  const sim = d3.forceSimulation(conf_data_w_xy);
    sim.force('many', d3.forceManyBody().strength(0.25).distanceMax(10))
      .force("collide", d3.forceCollide().radius(radius).strength(0.3))
      .force("bounds", boxingForce);

  sim.stop();
  draw();

  // console.log(conf_data_w_xy)

  const interval = d3.interval(ticked, 50);

  let ticks = 0;
  const maxTicks = 1000;

  function ticked() {
    if(ticks < maxTicks) {
      sim.tick();
      d3.select("#label").text('Tick: ' + ++ticks + ' of ' + maxTicks);
      redraw();
    } else {
      interval.stop();
    }
  }

  function color(point){
    if(point.type == 'conference'){
      return 'blue'
    } else if (point.type == 'project'){
      return color_town(point.town)
    }
  }

  function color_town(name){
    var result = 'white'
    switch (name){
      case "Borås":
        result = '#4e79a7'
        break
      case "Göteborg":
        result = "#f28e2c"
        break
      case "Linköping":
        result = "#e15759"
        break
      case "Malmö":
        result = "#76b7b2"
        break
      case "Umeå":
        result = "#5900a1"
        break
      case "Växjö":
        result = "#e7298a"
        break
      case "Örebro":
        result = "#d95f02"
        break
      case 'Arjeplog':
        result = "#edc949"
        break
      case 'Lund':
        result = "#af7aa1"
        break
      case 'Stockholm':
        result = "#ff9da7"
        break
      case 'Uddevalla':
        result = "#9c755f"
        break
      case 'Uppsala':
        result = "#bab0ab"
        break
    }
    return result
  }

  function draw() {
    svg.selectAll("circle")
    .data(conf_data_w_xy)
    .join("circle")
    .attr("r", radius-0.5)
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("fill", d => color(d))
    .style('stroke', 'black')
    .append('title').text((d => `${d.name}\n${d.town}`));
    }

    function redraw() {
      svg.selectAll("circle")
        .attr("cx", d => d.x)
        .attr("cy", d => d.y)
    }

}
```

```{ojs}
//| echo: false

chartWidth = 350;
chartHeight = 700;

projection = d3.geoMercator()
      .translate([chartWidth / 3, chartHeight / 3])
      .fitSize([chartWidth, chartHeight], geoswe);

pathGenerator = d3.geoPath(projection);
box = pathGenerator.bounds(geoswe)

drawn = draw_circles(
  d3.min(raw_points.map(d => d.year)),
  d3.max(raw_points.map(d => d.end))
)
```