fix: hardcode PGPASSWORD default so loaders work without local .env
This commit is contained in:
Kerboul
159
README.md
159
README.md
@@ -1,137 +1,58 @@
|
||||
# Observable Workspace — In-N-Out x Séismes x OVNIs (Californie)
|
||||
# Spotify Analytics — Observable Framework
|
||||
|
||||
Workspace **Observable Framework** orienté data storytelling avec deux analyses géospatiales en Californie :
|
||||
Visualization dashboard built with [Observable Framework](https://observablehq.com/framework/) exploring a Spotify dataset (genres, languages, release years).
|
||||
|
||||
- **In-N-Out Seismic Challenge** : classement des restaurants In‑N‑Out selon une exposition aux séismes.
|
||||
- **Paradoxe de l’Animal Style** : corrélation exploratoire entre observations OVNI et proximité d’un In‑N‑Out.
|
||||
**Live demo:** https://arussac-perso.github.io/observable_spotify/history-of-music
|
||||
|
||||
## Objectifs
|
||||
## Pages
|
||||
- **Spotify Analytics** — bar charts and stacked area by genre/language with dual-range year filter.
|
||||
- **History of Music** — stacked area chart + donut chart showing genre evolution over time, filterable by language, period, and genre.
|
||||
|
||||
- Démontrer une chaîne complète de visualisation interactive avec Observable Framework.
|
||||
- Croiser des données hétérogènes (OSM/Overpass, USGS, jeu OVNI) avec un traitement géospatial léger.
|
||||
- Produire des pages analytiques reproductibles, versionnables et publiables statiquement.
|
||||
|
||||
## Stack technique
|
||||
|
||||
- **Runtime / Build** : `@observablehq/framework` (v1.x)
|
||||
- **Langage** : JavaScript ESM (`"type": "module"`)
|
||||
- **Parsing CSV** : `d3-dsv`
|
||||
- **Visualisation** : `Plot` (via Observable), `d3`, `topojson-client`
|
||||
- **Topologie US** : `us-atlas@3` (chargement CDN)
|
||||
|
||||
## Architecture du projet
|
||||
|
||||
```text
|
||||
observablehq.config.js # Configuration Observable Framework
|
||||
package.json # Scripts npm + dépendances
|
||||
docs/
|
||||
index.md # Page d'accueil
|
||||
in-n-out-california.md # Analyse séismes ↔ In-N-Out
|
||||
ufo-animal-style-paradox.md # Analyse OVNI ↔ In-N-Out
|
||||
data/
|
||||
in-n-out-ca-overpass.json.js
|
||||
ca-earthquakes-last365d.json.js
|
||||
in-n-out-ca-csv.json.js
|
||||
ufo-ca-sightings-v2.json.js
|
||||
...
|
||||
## Run locally
|
||||
```
|
||||
|
||||
## Configuration Observable
|
||||
|
||||
Le fichier `observablehq.config.js` définit :
|
||||
|
||||
- `root: "docs"` : toutes les pages et données vivent sous `docs/`
|
||||
- `title: "Observable Workspace"`
|
||||
- `pager: false`
|
||||
- `toc: true`
|
||||
- `theme: "dashboard"`
|
||||
|
||||
## Pipeline de données
|
||||
|
||||
### 1) In-N-Out (source primaire Overpass)
|
||||
|
||||
Le module `docs/data/in-n-out-ca-overpass.json.js` :
|
||||
|
||||
- interroge Overpass API pour les POI In‑N‑Out (`node/way/relation`),
|
||||
- normalise les attributs (`id`, `latitude`, `longitude`, `name`, `city`, `address`, `postcode`),
|
||||
- déduplique par coordonnée arrondie,
|
||||
- tente plusieurs endpoints Overpass (fallback de résilience),
|
||||
- bascule sur un fallback CSV GitHub en cas d’échec.
|
||||
|
||||
### 2) Séismes Californie
|
||||
|
||||
Le dataset `ca-earthquakes-last365d.json` est utilisé dans la page `in-n-out-california.md` pour :
|
||||
|
||||
- filtrer les séismes dans une bounding box Californie,
|
||||
- calculer la distance haversine de chaque séisme à chaque magasin,
|
||||
- agréger des métriques locales (`quakeCount`, `maxMagnitude`, `avgMagnitude`, `nearestKm`),
|
||||
- produire un **Shake Index** composite.
|
||||
|
||||
Formule utilisée :
|
||||
|
||||
`shakeIndex = quakeCount * 1.5 + maxMagnitude * 12 + max(0, radiusKm - min(nearestKm, radiusKm)) * 0.25`
|
||||
|
||||
### 3) OVNI Californie
|
||||
|
||||
La page `ufo-animal-style-paradox.md` :
|
||||
|
||||
- charge les observations OVNI et les points In‑N‑Out,
|
||||
- calcule le magasin le plus proche pour chaque observation (distance haversine),
|
||||
- marque `closeToBurger` selon un rayon interactif,
|
||||
- agrège des hotspots via regroupement par magasin le plus proche,
|
||||
- expose des KPIs interactifs (taux de proximité, volume, durée moyenne, etc.).
|
||||
|
||||
## Visualisations
|
||||
|
||||
- Bar charts classés (top/bottom stores)
|
||||
- Carte Californie (projection Albers)
|
||||
- Nuages de points et outils de filtrage (`Inputs.select`, `Inputs.range`)
|
||||
- Tooltips détaillés pour exploration ad hoc
|
||||
|
||||
## Exécution locale
|
||||
|
||||
Pré-requis :
|
||||
|
||||
- Node.js 18+ recommandé
|
||||
- npm
|
||||
|
||||
Installation :
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
Développement (live preview) :
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# → http://localhost:3000
|
||||
```
|
||||
|
||||
Build statique :
|
||||
## Project structure
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
A typical Framework project looks like this:
|
||||
|
||||
```ini
|
||||
.
|
||||
├─ src
|
||||
│ ├─ components
|
||||
│ │ └─ timeline.js # an importable module
|
||||
│ ├─ data
|
||||
│ │ ├─ launches.csv.js # a data loader
|
||||
│ │ └─ events.json # a static data file
|
||||
│ ├─ example-dashboard.md # a page
|
||||
│ ├─ example-report.md # another page
|
||||
│ └─ index.md # the home page
|
||||
├─ .gitignore
|
||||
├─ observablehq.config.js # the app config file
|
||||
├─ package.json
|
||||
└─ README.md
|
||||
```
|
||||
|
||||
## Sorties et dossiers générés
|
||||
**`src`** - This is the “source root” — where your source files live. Pages go here. Each page is a Markdown file. Observable Framework uses [file-based routing](https://observablehq.com/framework/project-structure#routing), which means that the name of the file controls where the page is served. You can create as many pages as you like. Use folders to organize your pages.
|
||||
|
||||
- `dist/` : artefacts de build statique (à ne pas versionner)
|
||||
- `docs/.observablehq/` : cache/framework interne (à ne pas versionner)
|
||||
**`src/index.md`** - This is the home page for your app. You can have as many additional pages as you’d like, but you should always have a home page, too.
|
||||
|
||||
Le `.gitignore` est configuré pour ignorer ces dossiers de cache/génération.
|
||||
**`src/data`** - You can put [data loaders](https://observablehq.com/framework/data-loaders) or static data files anywhere in your source root, but we recommend putting them here.
|
||||
|
||||
## Qualité, limites et reproductibilité
|
||||
**`src/components`** - You can put shared [JavaScript modules](https://observablehq.com/framework/imports) anywhere in your source root, but we recommend putting them here. This helps you pull code out of Markdown files and into JavaScript modules, making it easier to reuse code across pages, write tests and run linters, and even share code with vanilla web applications.
|
||||
|
||||
- Les données externes (Overpass, CDN, sources tierces) peuvent varier dans le temps.
|
||||
- Les métriques proposées sont exploratoires et non causales.
|
||||
- Le pipeline privilégie robustesse et disponibilité (fallback réseau) plutôt qu’une ETL lourde.
|
||||
**`observablehq.config.js`** - This is the [app configuration](https://observablehq.com/framework/config) file, such as the pages and sections in the sidebar navigation, and the app’s title.
|
||||
|
||||
## Scripts npm
|
||||
## Command reference
|
||||
|
||||
- `npm run dev` → `observable preview`
|
||||
- `npm run build` → `observable build`
|
||||
|
||||
## Publication Git
|
||||
|
||||
Ce dépôt est prévu pour être poussé sur un remote Gitea.
|
||||
Le README sert de documentation technique de référence pour maintenance, reprise et extension du projet.
|
||||
| Command | Description |
|
||||
| ----------------- | -------------------------------------------------------- |
|
||||
| `npm install` | Install or reinstall dependencies |
|
||||
| `npm run dev` | Start local preview server |
|
||||
| `npm run build` | Build your static site, generating `./dist` |
|
||||
| `npm run deploy` | Deploy your app to Observable |
|
||||
| `npm run clean` | Clear the local data loader cache |
|
||||
| `npm run observable` | Run commands like `observable help` |
|
||||
|
||||
Reference in New Issue
Block a user