29:null 2a:["$","title",null,{"children":"TP - 1 | Ethan Collin | Observable"}] 2f:T8aa,## Le cours : qu'est-ce qu'une échelle ? Une **échelle** (*scale*) est une fonction qui transforme une **valeur de données** en **valeur visuelle** (ici une position horizontale en pixels). - **Domaine** `[dMin, dMax]` : l'intervalle des données (ex. `[0, 100]`) - **Plage** (*range*) `[rMin, rMax]` : l'intervalle des pixels (ex. `[40, 560]`) Une échelle **linéaire** conserve les proportions : une valeur 2× plus grande est 2× plus loin de l'origine. C'est une fonction affine : ${tex.block`f(v) = a \cdot v + b`} ## Méthode de calcul On impose deux conditions : ${tex`f(d_{min}) = r_{min}`} et ${tex`f(d_{max}) = r_{max}`}. **1. La pente a** (nombre de pixels par unité de donnée) : ${tex.block`a = \frac{r_{max} - r_{min}}{d_{max} - d_{min}}`} **2. L'ordonnée à l'origine b** : ${tex.block`b = r_{min} - a \cdot d_{min} \quad (\text{ou } b = r_{max} - a \cdot d_{max})`} **Autre méthode (normaliser, puis projeter)** : 1. ${tex`t = \dfrac{v - d_{min}}{d_{max} - d_{min}}`} : position de la valeur entre 0 et 1 2. ${tex`x = r_{min} + t \cdot (r_{max} - r_{min})`} : position en pixels ## Exemple : catégorie B (valeur 85) Domaine `[0, 100]`, plage `[40, 560]` (SVG de 600 px, marge de 40 px) : - a = (560 − 40) / (100 − 0) = **5,2** - b = 40 − 5,2 × 0 = **40** - f(85) = 5,2 × 85 + 40 = **482 px** Vérification aux bornes : f(0) = 40 ✓ et f(100) = 560 ✓ | Catégorie | Valeur | t | cx (px) | |---|---|---|---| | A | 45 | 0,45 | 274 | | B | 85 | 0,85 | 482 | | C | 20 | 0,20 | 144 | | D | 65 | 0,65 | 378 | | E | 90 | 0,90 | 508 | ## Fonction inverse (pixels → données) ${tex.block`v = d_{min} + \frac{x - r_{min}}{r_{max} - r_{min}} \cdot (d_{max} - d_{min}) = \frac{x - b}{a}`} C'est l'équivalent de `.invert()` dans D3. ⚠️ Erreur fréquente : écrire ${tex`a = \frac{d_{max} - d_{min}}{r_{max} - r_{min}}`} (domaine et plage inversés). On obtient alors la fonction **inverse**, pas l'échelle. ## Choix du domaine - `[0, 100]` : les distances respectent les vraies proportions entre les valeurs. - `[min, max]` des données (ici `[20, 90]`) : les écarts sont étirés, mais C se retrouve à 0 px comme s'il valait zéro, ce qui peut tromper la lecture.30:T47a,// Données du TP (un tableau → crochets [ ]) const data = [ { category: "A", value: 45 }, { category: "B", value: 85 }, { category: "C", value: 20 }, { category: "D", value: 65 }, { category: "E", value: 90 } ] // Conteneur SVG const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("border", "1px dashed #ccc") // Ligne de référence (de rMin à rMax) svg.append("line") .attr("x1", xScale(0)).attr("x2", xScale(100)) .attr("y1", height / 2).attr("y2", height / 2) .attr("stroke", "#ccc") // Un point par catégorie : cx = xScale(valeur) svg .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => xScale(d.value)) .attr("cy", height / 2) .attr("r", 8) .attr("fill", "steelblue") // Étiquettes des points svg .selectAll("text") .data(data) .join("text") .attr("x", (d) => xScale(d.value)) .attr("y", (d, i) => (i % 2 ? height / 2 + 26 : height / 2 - 16)) // une étiquette sur deux en dessous pour éviter les chevauchements .attr("text-anchor", "middle") .attr("font-size", 12) .text((d) => `${d.category} (${d.value})`) display(svg.node())31:[] 2d:{"id":"8b970c6a39b19d9f","slug":"tp-1","title":"TP - 1","thumbnail":null,"access_level":"public","create_time":"$D2026-09-22T06:32:52.814Z","update_time":"$D2026-09-22T07:25:23.784Z","view_time":null,"first_public_time":"$D2026-09-22T06:57:12.098Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d9fde8b964ba3e9f","login":"ethan-collin","name":"Ethan Collin","avatar_url":null,"tier":"free_2026"},"version":63,"publish_version":63,"role":null,"authored":false,"authors":[{"type":"individual","id":"92c033684e9e76eb","login":"ethan-collin","name":"Ethan Collin","avatar_url":null,"tier":null}],"members":[{"type":"team","id":"d9fde8b964ba3e9f","login":"ethan-collin","name":"Ethan Collin","avatar_url":null,"tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"TP - 1","cells":[{"id":1,"value":"# TP - 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"

Y = ax + b

f(x) = px>

[Dmin, Dmax]

[Rmin, Rmax]

\n\n\n

A = (dMax - dMin) / (rMax - rMin)

\n\n

B = dMax - ( dMax - dMin / rMax - rMin ) rMax

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$2f","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"// Échelle linéaire \"from scratch\" : f(v) = a·v + b\nfunction linearScale(domain, range) {\n const [dMin, dMax] = domain // intervalle des données\n const [rMin, rMax] = range // intervalle des pixels\n\n const dSpan = dMax - dMin\n const rSpan = rMax - rMin\n\n // Pente : combien de pixels pour 1 unité de donnée\n const a = dSpan === 0 ? 0 : rSpan / dSpan\n // Ordonnée à l'origine : on impose f(dMin) = rMin\n const b = rMin - a * dMin\n\n return {\n type: \"linear\",\n domain,\n range,\n a,\n b,\n // données → pixels\n scale: (v) => {\n if (!Number.isFinite(v)) return rMin\n if (dSpan === 0) return rMin\n return a * v + b // équivalent de rMin + (v - dMin) / dSpan * rSpan\n },\n // pixels → données (équivalent de .invert() dans D3)\n invert: (x) => (a === 0 ? dMin : (x - b) / a)\n }\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// Dimensions du graphique\nconst height = 120\nconst margin = 40 // marge pour que les cercles (r = 8) ne soient pas coupés\n\n// Domaine [0, 100] : on part de 0 pour respecter les proportions\n// (avec [20, 90], C serait placé à 0 px comme s'il valait zéro)\n// Plage [margin, width - margin] : les pixels disponibles\nconst lScale = linearScale([0, 100], [margin, width - margin])\nconst xScale = lScale.scale","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"xScale(90)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"xScale(20)\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"xScale(60)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$30","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"2"}} 2e:"$2d:body"