語旅 · Kotabi

An interactive web prototype for exploring the geographic origins of Japanese loanwords (外来語)
Explore the report »

Features · Snapshots · Setup · Structure

About The Project

語旅 (Kotabi), meaning "word journey," is an interactive web prototype that makes the phenomenon of Japanese loanwords (gairaigo, 外来語) explorable and visually engaging. Built with Svelte, TypeScript, and D3.js, it renders a zoomable world map where each donor country is colored using a traditional Japanese pigment palette. Users can click any country to browse its loanwords, or switch to the AI-powered Discover mode to classify a katakana word and predict its donor language, powered by a pre-trained LinearSVC classifier served through a FastAPI backend.

This project was built for COSC 402: Current Trends and Topics in Computing (HCI Interactive Prototype).

Table of Contents

1. About The Project
2. Features
3. Technologies Used
4. Website Snapshots
5. Setup
6. Project Structure
7. License

Features

• Interactive World Map: Zoomable and pannable SVG map with smooth zoom-to-country transitions and constrained pan bounds
• Country Color Palette: Each donor country is assigned a deterministic color from a traditional Japanese pigment palette (山吹, 常磐, 柿, 藤, and more)
• Explore Mode (探索): Click any colored country to view its national flag, donor language, loanword count, and a searchable, paginated word list
• Real-time Search: Filter loanwords by katakana or English meaning as you type, with a clear button and result count
• Discover Mode (発見): Enter a katakana word and receive an AI-predicted donor language with confidence scores and a bar chart
• Dual UK/US Highlight: English predictions highlight both the United Kingdom and the United States simultaneously with a combined zoom
• Progressive Disclosure: Word card meanings are clamped to two lines and expand fully on hover
• Responsive Feedback: Bilingual validation messages, loading spinners, disabled states, and automatic result clearing on tab switch
• Japanese Aesthetic: Seigaiha wave header, washi paper tones, vermillion accents, Shippori Mincho B1, and Noto Sans JP typography

Technologies Used

Website Snapshots

Initial Load: World map with Japanese pigment country colors and the Explore panel idle state

Explore Mode: Country selected with flag, language tag, loanword count, search bar, and word cards

Discover Mode: Katakana input, Analyze button, disclaimer note, and example word chips

Setup

Prerequisites

• Node.js 18+
• The Kotabi API running locally on port 8000

Installation

git clone https://github.com/krislette/gairaigo-map.git
cd gairaigo-map
npm install

Run Development Server

npm run dev

The app will be available at http://localhost:5173. Make sure the FastAPI backend is running before using Discover mode.

Build for Production

npm run build
npm run preview

Type Check

npm run check

Project Structure

gairaigo-map/
├── public/
│ ├── favicon.svg
│ └── icons.svg
├── src/
│ ├── data/
│ │ └── gairaigo_full.json # 10,378 loanword entries across 37 donor languages
│ ├── lib/
│ │ ├── components/
│ │ │ ├── WorldMap.svelte # D3 map, zoom, pan, country rendering
│ │ │ ├── ExplorePanel.svelte # Country header, search, word list
│ │ │ └── DiscoverPanel.svelte # Katakana input, AI prediction, result card
│ │ ├── stores/
│ │ │ └── mapStore.ts # Shared reactive state (activeIso2, highlights, zoom)
│ │ ├── isoMapping.ts # ISO2 ↔ numeric country code mapping
│ │ └── types.ts # TypeScript interfaces
│ ├── App.svelte # Root layout, tab bar, header, footer
│ ├── app.css # Global CSS variables and design tokens
│ └── main.ts # Entry point
├── index.html
├── vite.config.ts
├── svelte.config.js
├── tsconfig.json
├── tsconfig.app.json
└── tsconfig.node.json

License

This project is for academic use. Loanword data is sourced from JMdict/EDICT, distributed under the Creative Commons Attribution-ShareAlike 4.0 International License by the Electronic Dictionary Research and Development Group.

Back to top