UniversityofHelsinki / service-portfolio-visualization

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Projekti

Tämä on Helsingin yliopiston palveluportfoliota esittävä interaktiivinen visualisointi.

Projekti on rakennettu SolidJS:llä hyödyntäen SolidFlow-kirjastoa https://github.com/miguelsalesvieira/solid-flow Koska paketissa oli asioita, joita oli tarvetta räätälöidä, sen sisältämä koodi on tweakattuna liitetty projektin SolidFlow-kansion.

Saman operaation tein myös PinchZoomPan-kirjastolle https://github.com/SanichKotikov/pinch-zoom-pan joka hoitaa canvasin zoomailua ja siirtelyä projektissa.

Projektin css on yhdistelmä Tailwindiä ja CSS-moduuleja.

Projektin käyttämä data on data.ts-tiedostossa. Sen sisältämässä initialTsv-muuttujassa data on tsv-muodossa ja se parsitaan koodissa JSONiksi. Tähän ratkaisuun päädyttiin sen vuoksi, että Excelistä voi copy-pastettaa dataa frontin tekstilaatikkoon tai muuttujaan. Kun kopioit Excelistä dataa huomioi ainakin seuraavat seikat.

  • \r parsitaan rivivaihtona. Excelin natiiveja rivivaihtoja ei voi käyttää, koska se rikkoo tsv-tiedoston
  • Tekstimuotoiluja voi tehdä Markdown-muotoisesti esimerkiksi boldaamalla tekstiä tai luomalla hyperlinkkejä
  • Tyhjiä soluja ei hyväksytä. Laita esimerkiksi viiva (-) sellaisiin kohtiin, joihin ei haluta tietoa

About


Languages

Language:TypeScript 92.3%Language:CSS 6.1%Language:JavaScript 1.2%Language:HTML 0.4%