Estoy tratando de colorear cada punto en mi diagrama de dispersión según el continente en el que se encuentra. Tengo mi código a continuación, pero no estoy seguro de cómo puedo hacer referencia al campo de continente para cada entrada y luego asignarlo al campo de color en trace1.
Intenté algo como a continuación, pero no tuve suerte.
EDITAR :: Esto ha sido respondido -> Además, ¿cómo puedo sacar de github?
Aquí está mi código a continuación.
<!DOCTYPE html> <html> <head> <!-- Load plotly.js into the DOM --> <script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script> </head> <body> <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div> </body> <body> <svg id="visualisation" width="1355" height="333"></svg> <script src="https://cdn.plot.ly/plotly-2.11.1.min.js" charset="utf-8"></script> <script> d3.csv('https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/4_ThreeNum.csv', function(err, rows){ function unpack(rows, key) { return rows.map(function(row) { return row[key]; });} const asia = []; const condition = unpack(rows, 'continent'); const j = 0; for(let i = 0; i < condition.length;i++ ){ if(condition[i] === 'asia'){ asia[j] = condition[i]; j++; } } console.log(asia[0]); var trace1 = { x:unpack(rows, 'lifeExp'), y: unpack(rows, 'gdpPercap'), z: unpack(rows, 'pop'), mode: 'markers', marker: { size: 12, line: { color: 'rgba(217, 217, 217, 0.14)', width: 0.5}, opacity: 0.8}, type: 'scatter3d' }; var data = [trace1]; var layout = { width: 1000, height: 1000, margin: { l: 0, r: 0, b: 100, t: 0 }, scene: { xaxis: { title: asia[1] }, yaxis: { title: "Population" }, zaxis: { title: "GDP per cap" }, }, }; Plotly.newPlot('myDiv', data, layout); }); </script> </body> </html>