ssciwr.github.io/iwr-interactive-visualization

An interactive visualization of the IWR and its activities

Overview

Implemented in javascript and SVG using svg.js

• main branch contains the source code
  • contents can be edited in src/data/data.json
• gh-pages branch contains the generated website
• uses npm and webpack to manage the build and dependencies

Online preview

On every commit to the main branch:

• deploy.yml action builds website & deploys to the gh-pages branch
• github pages hosts these files at ssciwr.github.io/iwr-interactive-visualization

How to deploy

• download a zipfile of the files in the gh-pages branch
• contents can be edited in data.json
• to change the location of the image files
  • edit image_base_url
• to change the location of data.json
  • find "fileadmin/templates/iwr_vis/data.json" in bundle.js and replace with desired url

How to build and view locally

Initial setup:

• clone this repo
  • git clone https://github.com/ssciwr/iwr-interactive-visualization.git
  • cd iwr-interactive-visualization
• (optional) install pre-commit to auto-format code
  • pip install pre-commit
  • pre-commit install
• install pnpm
  • windows: iwr https://get.pnpm.io/install.ps1 -useb | iex
  • linux/macOS: curl -fsSL https://get.pnpm.io/install.sh | sh -
• install website dependencies
  • pnpm install

To build from source, start local http-server, open website in browser, monitor & re-build modified source files:

• pnpm start

Other commands:

• remove any existing build
  • pnpm run clean
• build website in dist folder
  • pnpm run build
• start a http-server serving files from the dist folder at http://localhost:8080/ & open in browser
  • pnpm run serve
• monitor changes to source code & automatically re-build modified files
  • pnpm run autobuild