Tengo el eje x como un rango, por ejemplo: -100, -50, -12, -6, 0, 6, 12, 50, 100 y el eje y son etiquetas para, por ejemplo: diferentes marcas de chocolate kitkat, 5star, milkybar, etc. o viceversa eje X e y
Quiero diagramas de dispersión para cada marca y coloración condicional (para cada marca diferentes condiciones de coloración), por ejemplo: para la marca kitkat, si el valor está en un rango menor o igual a -6 y +6 diagrama de dispersión de color amarillo, si es mayor que 6 verde , si es menor que -6 debe ser rojo. 5 estrellas: si el valor está en un rango menor o igual a -12 y +12, la dispersión de color amarillo, si es mayor a 12, verde, si es menor a -12, debe ser rojo.
Soy una abeja nueva en plotly js. y estoy encontrando valores x, y en todos los ejemplos, pero no puedo encontrar marcas similares en el eje y y valores en el eje x.
Quiero que cada marca tenga sus respectivas dispersiones en esa línea horizontal, solo que ahora no puedo mostrar eso.
aquí están mis datos,
[{"kitkat":[1, -9, 60, 5, 19], "5star":[20,-78,12,18,90], "milkybar":[-67,20,-8,90,12]}]probé este código pero no puedo dar a cada marca cada dato e incluso coloración codicional
esta inicial:
data = []; data.push({ 'id': "KitKat", 'value': 12, 'condition': 'CM' }); data.push({ 'id': "KitKat", 'value': 4, 'condition': 'ECM' }); data.push({ 'id': "KitKat", 'value': -23, 'condition': 'SAX' }); data.push({ 'id': "5Start", 'value': 4, 'condition': 'SAX' }); data.push({ 'id': "5Start", 'value': 78, 'condition': 'ECM' }); data.push({ 'id': "5Start", 'value': 78, 'condition': 'CM' }); data.push({ 'id': "ABC", 'condition': 'CM' }); data.push({ 'id': "DEF", 'condition': 'CM' }); data.push({ 'id': "XYZ", 'condition': 'CM' }); var conditions = new Set(data.map(a => a.condition)); traces = []; conditions.forEach(function(condition) { var newArray = data.filter(function(el) { return el.condition == condition; }); traces.push({ x: newArray.map(a => a.id), y: newArray.map(a => a.value), name: condition, mode: 'markers', type: 'scatter' }) }) Plotly.plot('myPlot', traces); <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <div id="myPlot"></div>¿Alguien puede sugerir cómo lograr mi salida?
trace.marker.color acepta una matriz, que puede usar para dar un color individual a cada punto de datos.
const data = [ { "id": "kitkat", "value": 12, "condition": "CM" }, { "id": "kitkat", "value": 4, "condition": "ECM" }, { "id": "kitkat", "value": -23, "condition": "SAX" }, { "id": "milkyway", "value": 12, "condition": "CM" }, { "id": "milkyway", "value": 4, "condition": "ECM" }, { "id": "milkyway", "value": -23, "condition": "SAX" } ]; const conditions = ["CM", "ECM", "SAX"]; function getColor(data) { // enter your conditional coloring code here if (data.id === 'kitkat' && data.value > 0) { return '#0000FF' } return '#FF0000'; } const traces = conditions.map(condition => { const filteredData = data.filter(d => d.condition === condition); return { x: filteredData.map(d => d.id), y: filteredData.map(d => d.value), name: condition, mode: 'markers', type: 'scatter', marker: { color: filteredData.map(d => getColor(d)) } }; }); Plotly.plot('myPlot', traces, {showlegend: false}); <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <div id="myPlot"></div>