I am trying to color each point on my scatterplot according to the continent it is on. I have my code below but I am unsure as to how I can reference the continent field for each entry, and then assign it to the color field in trace1.
I tried something such as below but no luck.
EDIT:: This has been answered -> Also, how can I pull from the github?
Here is my code below.
<!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>