42:null 43:["$","title",null,{"children":"Eléments de Javascript pour utiliser la librairie Plot | Marc Thevenin | Observable"}] 49:T5e3,* Langage de programmation dit fonctionnel: reposant sur des déclarations de variables faisant appel à des fonctions. * Ce n'est pas au premier abord un langage à visée scientifique/statistique...Cela a plutôt été conçu pour vous permettre ~~d'acheter de manière plus ou moins compulsives des trucs sur internet~~ d'intéragir avec des contenus affichés sur un navigateur web. Bien qu'il n'y ai aucune utilité à le faire, un site web peut être intégralement codé en javascript, éléments css compris. * C'est parfois bizarre, en fait peu strict, mais cela peut s'expliquer: **`1 == "1"`** renvoie **`true`**...c'est pas faux cela se ***ressemble*** effectivement. Mais **`1 === "1"`** renvoie `false`...ouf. * Et donc c'est un langage qui est peu typé sur les formats des valeurs. * Ce qui est parfois applelé OJS pour Observable Java Script n'est pas une variante du langage javascript dit *vanilla* ou un sous langage javascript, mais certaines de règles de syntaxe qui doivent être adaptées au travail sur un notebook (ou dans un document Quarto). La raison vient du fait que les cellules du notebook sont elles même générées dans des fonctions javascript. Tant qu'on ne réutilise pas les codes d'un notebook dans built généré par Observable Framework ou dans un built de site standard, cela n'a aucune conséquence. Cela a néanmoins comme conséquence d'alourdir certaines syntaxe par rapport au vanilla, en particulier pour les expressions de type `if ... else`. 4a:T4ad,### Faut s'y faire, il y en a partout: [], {}, () Juste une courte intro * **`[]`**: tableau appelé **Array**. C'est, on va dire, la forme minimale du format **json**. Les données qu'on utilisera pour les graphique seront sous cette forme (mais également toutes les fonctions graphiques de la librairies plot). * Exemple: `[1,2,3]` * **`{}`**: objet ou initialisateur d'objets. Si on reprend le tableau précédent: `[{valeur:1}, {valeur:2}, {valeur:3}]`. Ici l'objet est proche de ce qu'on appelle variable dans un tableau de donnée généré dans un logiciel stat. Mais la structure est différente. * **`()`**: classiquement où sont listés les arguments d'une fonction: `nomFonction(arg1, arg2,...)`. En dehors d'une fonction, les parenthèses permettent juste de mettre des éléments en relief, sans aucune incidence sur le résultat du code. On retrouve tous ces éléments dans une fonction de la librairie plot: **`Plot.text(["Salut"], {x: "positionX", y: "positionY", fontColor: "Red"})`**. `Plot.text()` est bien une fonction qui comporte deux arguments: un tableau avec un texte (argument1), et une série d'options (objets) initialisées dans des accolades (argument2).4b:T4d8,Il s'agit d'une fonction générique permettant de charger des fichiers (bases de données, images, vidéo, zip...) dans les notebooks ou lorsqu'on programme une application avec Observable Framework. Elle ne peut pas être utiliser en dehors de ces environnements. * Pour le chargement d'un fichier csv, FileAttachment exécute la fonction D3 **`d3.csv()`**: * `FileAttachement(nomFichier.csv).csv()` * A l'importation directe du fichier toutes les valeurs sont en format caractère. * Option pour récupérer les bons formats des valeurs: `{typed: true})` * `FileAttachement(nomFichier.csv).csv({typed: true})` * OK si le format est homogène pour une caractérique: si toutes les valeurs sont d'apparence numérique, le changement de format sera appliquer sans problème. * Si présence de valeurs d'apparence numérique et de valeur d'apparence caractère, les secondes seront laissés sous forme caractère. Exemple: les départements français avec "2A" et "2B" pour la Corse: `[{dep: 28}, {dep:29}, {dep:"2A"}, {dep: "2B"}, {dep: 30}]` * Solution: utiliser une fonction appeler **map()** [voir plus loin]. Exemple dans un notebook: le plus simple est d'utiliser le raccourci à la création d'une cellule javascript. 4c:[{"id":"0de02dc6de4cf392c8091f40010ff18a3c97e52a6cba10b756cb3540e7f2e000311a02dbdc5e5e1d6232977950e0f8c0046ea834594e773ad3c2b56aab17eb9d","href":"https://static.observableusercontent.com/files/0de02dc6de4cf392c8091f40010ff18a3c97e52a6cba10b756cb3540e7f2e000311a02dbdc5e5e1d6232977950e0f8c0046ea834594e773ad3c2b56aab17eb9d","name":"fileAttachment1.gif","type":"image/gif","lastModified":1739432264452.151,"size":2346249},{"id":"5e023f957607f3917b3eebd232ad8ad26be13f6106bcf95554e3680032b0ffe9399c026954cb70e2b144e49c68a51383f3912c759ce2700e46097521158a3a94","href":"https://static.observableusercontent.com/files/5e023f957607f3917b3eebd232ad8ad26be13f6106bcf95554e3680032b0ffe9399c026954cb70e2b144e49c68a51383f3912c759ce2700e46097521158a3a94","name":"data@2.csv","type":"text/csv","lastModified":1739773958129.274,"size":8961},{"id":"5e023f957607f3917b3eebd232ad8ad26be13f6106bcf95554e3680032b0ffe9399c026954cb70e2b144e49c68a51383f3912c759ce2700e46097521158a3a94","href":"https://static.observableusercontent.com/files/5e023f957607f3917b3eebd232ad8ad26be13f6106bcf95554e3680032b0ffe9399c026954cb70e2b144e49c68a51383f3912c759ce2700e46097521158a3a94","name":"data@3.csv","type":"text/csv","lastModified":1739774006751.311,"size":8961}] 47:{"id":"16926eb907c5a6c5","slug":null,"title":"Eléments de Javascript pour utiliser la librairie Plot","thumbnail":"228de2f3efc5503b4b66bb20442e157fa844983a4a004337279746d07fba39d1","access_level":"public","create_time":"$D2025-02-12T07:07:06.817Z","update_time":"$D2025-05-23T06:25:22.438Z","view_time":null,"first_public_time":"$D2025-02-18T06:53:07.100Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":"pro_2026","bio":"Statistical Engineer at the french National Institute for Demographic Studies (INED)","following":false},"version":1140,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":null,"bio":"Statistical Engineer at the french National Institute for Demographic Studies (INED)","following":false}],"members":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":null,"role":"editor"},{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":"pro_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Eléments de Javascript pour utiliser la librairie Plot","cells":[{"id":0,"value":"# Eléments de Javascript pour utiliser la librairie `Plot`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"*Après quelques mois d'auto-apprentissage plus ou moins douloureux*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"## Quelques caractéristiques génériques","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"### La zône de commentaire\n\n* **`//`**\n* La zône sélectionnée va jusqu'à la fin de la ligne\n* On peut sélectionner un bloc de codes sur plusieurs lignes en sélectionnant cette zône et en faison `CTRL + SHIFT + /`.\n* On peut désélectionner un bloc de commentaire automatiquement en refaisant l'opération précédente. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"### Ponctuation ; , \n\n* **;** est complètement optionnel dans une ligne de code, il est ajouté pour facilité sa lecture.\n* **,** permet de séparer différents objets. La succession de deux virgules sans objet à l'intérieur renvoie un message d'erreur. Dans les notebooks une erreur (oubli, succession sans argument) est indiquée en direct pendant l'écriture du code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"### camelCase\n\nSans être obligatoire, le javascript utilise massivement le camelcase pour nommer les variables, objets.... Tous les mots sont liés dans un même terme avec à partir du second mot, la première lettre en majuscule. L'utilisation du **.** est interdite pour les noms. On peut utiliser l'underscore, mais il est préférable de prendre des bonnes habitude, sachant qu'une option non reconnu ne renverra pas un message d'erreur. \n\nExemple: l'option pour l'épaisseur d'une courbe est **`strokeWidth: #`** (# est un nombre de pixels).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"### Les variables javascript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":573,"value":"***Syntaxe dans un notebook d'observable*** :\n\nDans les notebooks les variables ne sont pas directement déclarées avec leur expressions `const` ou `let`. Pour ce faire il faut les déclarer à l'intérieur d'un initialisateur d'objet `{}`: \n\n* ` const/let nomVar =

` renvoie un message d'erreur.\n* `{const/let nomVar = }` ne renvoie pas de message d 'erreur  mais aucun résultat n'est retourné.\n* `{const/let nomVar =  ; return nomVar}` le résultat de nomVar est retourné.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":935,"value":"x1 = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"x2 = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"testValeur = {\nlet n;\n  if (x1>x2) {return \"x1 est supérieur à x2\"} \n  else if (x1===x2) {return \"x1 est égal à x2 \"}\n  else {return \"x1 est inférieur à x2\"}\n  \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"Deux types de variables: \n\n* **const**: variable assignable (déclarable) une seule fois:  ce sont des **constantes**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"// const est déjà dans la déclaration (le nom) de la cellule. Cette expression vaut pour un code javascript dans un environnement plus standard: Observable framework, code js dans un chevron