https://github.com/bicklabuw/bickgraphing
Repo for BickGraphing Code
https://github.com/bicklabuw/bickgraphing
audio-analysis audio-processing research-software spectrogram spectrogram-analysis waveform waveform-generator web-application
Last synced: 2 months ago
JSON representation
Repo for BickGraphing Code
- Host: GitHub
- URL: https://github.com/bicklabuw/bickgraphing
- Owner: bicklabuw
- License: mit
- Created: 2026-01-14T17:09:52.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-04-02T06:00:10.000Z (2 months ago)
- Last Synced: 2026-04-02T18:46:37.686Z (2 months ago)
- Topics: audio-analysis, audio-processing, research-software, spectrogram, spectrogram-analysis, waveform, waveform-generator, web-application
- Language: JavaScript
- Homepage: https://ie-graphing-709865.pages.doit.wisc.edu
- Size: 65.9 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Citation: CITATION.cff
Awesome Lists containing this project
README
# Bick Graphing
[](https://svelte.dev)
[](https://www.typescriptlang.org/)
[](https://doi.org/10.5281/zenodo.19381867)
[](LICENSE)
**Browser-based audio visualization tool** for rapid inspection of .wav recordings. Drag-and-drop waveforms + spectrograms. Client-side only.
[Check out our Live Demo](https://ie-graphing-709865.pages.doit.wisc.edu)
## Features
- **Multi-file upload** — Drag multiple large .wav files
- **Dual visualization** — Waveform + spectrogram views
- **Interactive controls** — Amplitude range, zoom, color scale
- **Offline-first** — No server, processes ~10x real-time [web:8]
- **Responsive** — Mobile/desktop optimized
- **Export ready** — PNG waveforms/spectrograms
## Background
Built for **insect bioacoustics research**—rapid quality checks on field .wav recordings. Designed for non-technical users (farmers, field techs) needing instant visual feedback during remote fieldwork.
**Key motivations:**
- Offline capability for field use
- Handles hours-long recordings (~500MB peak memory)
- No coding required—drag, adjust sliders, export PNGs
## Architecture (4 Layers)
┌─ File I/O FileSelector.svelte, FileList.svelte
│
├─ Signal Processing ├─ FFmpeg.wasm (.wav decode)
│ └─ fft.ts (512pt STFT)
│
├─ Visualization ├─ graph.svelte (orchestrator)
│ ├─ waveform.svelte
│ └─ spectrogram.svelte
│
└─ Controls RangeSlider.svelte, ViewSelector.svelte
## Tech Stack
| Layer | Tech |
| --------- | --------------------------------- |
| Framework | SvelteKit 2.16+, TypeScript, Vite |
| Audio | FFmpeg.wasm, Web Audio API |
| Viz | D3.js (scales), Canvas2D |
| Styling | TailwindCSS 3.4 |
| Controls | noUiSlider |
**Bundle:** ~30MB (FFmpeg + deps), loads in <5s modern browsers
## Devoloper Installation Guide
These instructions are made for ubuntu machines:
Install Node:
```
sudo apt update && sudo apt upgrade -y
sudo apt install -y curl software-properties-common
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
```
Config your bash file:
```
mkdir -p ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=$HOME/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc
```
Check to see if Node exists
```
node -v
```
If you did this correcly - output should look like this:
```
v20.18.3
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
rm -rf .svelte-kit/ node_modules/.vite/ dist/
pnpm dev # or npm run dev / yarn dev
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
## Deployment
- This is deployed through github pages. [Bick Graphing](https://ie-graphing-709865.pages.doit.wisc.edu)