Projet: évitez de vous répéter

[idris-maps]

Vous vous répétez beaucoup. Par exemple:

https://github.com/Soraya97/VisualDon/blob/2456c08b7e47c3a902dc1509d97a3f5a112a1eb9/projet/src/index.js#L103-L131

Pour minimiser le risque d'erreur et pour que ce soit plus lisible, essayez de créé des fonctions plus générales. Comme vous avez fait avec:

https://github.com/Soraya97/VisualDon/blob/2456c08b7e47c3a902dc1509d97a3f5a112a1eb9/projet/src/index.js#L84-L91

Il y a beaucoup de manières de faire. Mais vu la question pour la légende de l'autre jour, j'opterais pour avoir un tableau avec les données par continent. Il contiendrait les noms, couleurs, lignes... et tout ce dont vous auriez besoin.

J'imagine quelque chose comme ça:

const continents = [
  { nom: 'Monde', color: 'HotPink' },
  { nom: 'Afrique', color: 'black' },
  // ...
]

const getPath = ({ nom }) =>
  d3.line()
    .x(d => xScale(parseTime(d.date)))
    .y(d => yScale(d[nom].guéris))

const getLine = (path, color) =>
  svg.append("path")
    .datum(data)
    .attr("d", path)
    .attr('stroke', color)
    .attr('fill', 'none')
    .attr('transform', `translate(${MARGIN_LEFT}, 0)`)
    .attr('opacity', 1)

const continentsData = continents
  .map(d => ({ ...d, path: getPath(d) }))
  .map(d => ({ ...d, line: getLine(d.path, d.color) }))