# SVG + d3.js + elevation

**URL:** <https://talk.observablehq.com/t/svg-d3-js-elevation/8150>\
**Category:** Help\
**Created:** [August 3, 2023, 7:06am UTC](https://talk.observablehq.com/t/svg-d3-js-elevation/8150 "2023-08-03T07:06:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![shakipete](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shakipete/32/7930_2.png) [@shakipete](https://talk.observablehq.com/u/shakipete)\
**Post date:** [August 3, 2023, 7:06am UTC](https://talk.observablehq.com/t/svg-d3-js-elevation/8150/1 "2023-08-03T07:06:34Z")

</div>

Hello all, despite my 40 years of working on computer, I pain to build a SVG template using d3.js to display a map with elevation. Any of you could give me a simple sample that I could take inspiration to do that please ?

![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/ae736b97bc2a0f69ae795d26dbe2ea675ecd272f.png)

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [August 3, 2023, 7:41am UTC](https://talk.observablehq.com/t/svg-d3-js-elevation/8150/2 "2023-08-03T07:41:11Z")

</div>

See [Contours / D3 | Observable](https://observablehq.com/@d3/contours) for an introduction to d3-contour.

To draw the labels, see [Contour Labels (SVG) / Fil | Observable](https://observablehq.com/@fil/contour-labels-svg)

---

<div class="post-metadata">

**Author:** ![shakipete](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shakipete/32/7930_2.png) [@shakipete](https://talk.observablehq.com/u/shakipete)\
**Post date:** [August 3, 2023, 8:23am UTC](https://talk.observablehq.com/t/svg-d3-js-elevation/8150/3 "2023-08-03T08:23:59Z")

</div>

merci beaucoup, j’y plonge de suite !  
Cdt

---

<div class="post-metadata">

**Author:** ![shakipete](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shakipete/32/7930_2.png) [@shakipete](https://talk.observablehq.com/u/shakipete)\
**Post date:** [August 6, 2023, 1:33pm UTC](https://talk.observablehq.com/t/svg-d3-js-elevation/8150/4 "2023-08-06T13:33:48Z")

</div>

Bonjour Philippe,  
le model “Contour Label” est exactement ce dont j’ai besoin, mais la page ne permet que de récupérer la sortie SVG  
Or, j’aurais besoin d’un exemple du script JS créant dynamiquement ce SVG à l’aide des commandes D3.JS  
Auriez-vous ça svp ?  
Merci d’avance  
Cdt

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [August 6, 2023, 2:08pm UTC](https://talk.observablehq.com/t/svg-d3-js-elevation/8150/5 "2023-08-06T14:08:09Z")

</div>

Pour voir le script il suffit de cliquer sur le menu à gauche (les trois petits points bleus), puis “Edit”.

 ![Capture d’écran 2023-08-06 à 16.07.20](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/d/dc647a1e40c6d30a9ebfb6ce859c2d7b3a37de8e.png)

(Une autre façon de voir tout le code est d’ajouter /safe à la fin de l’URL du notebook.)

---

<div class="post-metadata">

**Author:** ![shakipete](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shakipete/32/7930_2.png) [@shakipete](https://talk.observablehq.com/u/shakipete)\
**Post date:** [August 6, 2023, 2:49pm UTC](https://talk.observablehq.com/t/svg-d3-js-elevation/8150/6 "2023-08-06T14:49:57Z")

</div>

![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/d/d755c8af630b19589f6ebd95867425e59821c651.png)  
merci Philippe, mais je ne depataouille pas. Pour commencer, j’ai mis le code entre 2 balises SCRIPT dans du html, et déjà j’ai des erreurs partout. Je dois intégrer ce SVG dans une appli très complexe, et si déjà je galère pour integrer du code existant, je ne suis pas sortir de l’auberge. Je ne vous embète pas plus longtemps. (il me fallais un code entier dont je puisse m’inspirer) Merci quand même

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [August 6, 2023, 3:16pm UTC](https://talk.observablehq.com/t/svg-d3-js-elevation/8150/7 "2023-08-06T15:16:53Z")

</div>

Les cellules Observable fonctionnent comme une fonction anonyme. Tu peux remplacer

> { … return 1 }

par

> function x() { return 1 }

et ensuite appeler cette fonction dans ton code.

Dans notre cas de figure:

```auto
function chart() {
  const chart = …
  ...
  return chart;
}

```

---

<div class="post-metadata">

**Author:** ![shakipete](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shakipete/32/7930_2.png) [@shakipete](https://talk.observablehq.com/u/shakipete)\
**Post date:** [August 7, 2023, 6:01am UTC](https://talk.observablehq.com/t/svg-d3-js-elevation/8150/8 "2023-08-07T06:01:49Z")

</div>

Merci Philippe, mais chaque bout de code à ajouter est un souci. J’ai opté pour d3.js pour me faciliter la vie, Mais là, c’est le contraire. Je cherchais un exemple dont je pouvais m’inspirer, qq chose de TRES simple. 3 ou 4 niveaux de dénivelé incluant un path + un label + une couleur (basé sur l’image que j’ai postée). Je pensais que d3.js me faciliterait la vie, mais de ce que je vois, c’est le contraire. Je vais coder en JS de base. Merci encore pour ta patience. Cdt, Dan