SVG + d3.js + elevation

Community Help
1

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

2

See Contours / D3 | Observable for an introduction to d3-contour.

To draw the labels, see Contour Labels (SVG) / Fil | Observable

1 Like
3

merci beaucoup, j’y plonge de suite !
Cdt

4

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

5

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
Capture d’écran 2023-08-06 à 16.07.20934×544 69.7 KB

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

6

image
image1236×768 64.1 KB

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

7

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:

function chart() {
  const chart = 

  ...
  return chart;
}
8

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