D3 Map Projection Generation

Uno codice di massima può essere:

  let legend = svg.append("g")  // gruppo per l'intera legenda

labels.forEach((labelText, i) => {

     let legendRow = legend.append("g")  // riga legenda
          .attr("transform", "translate(0, "+(i*18)+")")

     legendRow.append("rect")  // quadrato colorato
               .attr("width", 15)
               .attr("height", 15)
               .attr("fill", colorScale(labelText))

     legendRow.append("text")  // voce testuale
               .attr("x", 22)
               .attr("y", 12)
               .text(labelText)
})

dove

• labels è l’array con le voci da visualizzare e
• colorScale è una scala cromatica creata indicando direttamente i singoli colori o usando una delle scale cromatiche messe a disposizione da d3.js