The avatar for @dienert
Diénert Vieira
Published
Visualização de Dados
Edited
Nov 20, 2020
Fork of Plotly.js Examples
Insert cell
Insert cell
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
Insert cell
{
var trace1 = {
x: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set'],
y: [19.462, 25.9, 31.82, 35.076, 38.924, 36.112, 39.738, 37, 32.486],
name: 'Arrecadado',
marker: {color: 'rgb(55, 83, 109)'},
type: 'bar'
};
var trace2 = {
x: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set'],
y: [6.512, 7.77, 11.544, 19.98, 22.126, 25.16, 29.822, 36.626, 31.926],
name: 'Gasto',
marker: {color: 'rgb(26, 118, 255)'},
type: 'bar'
};
var data = [trace1, trace2];
var layout = {
// title: 'US Export of Plastic Scrap',
xaxis: {tickfont: {
size: 14,
color: 'rgb(107, 107, 107)'
}},
yaxis: {
title: 'Reais (mil)',
titlefont: {
size: 16,
color: 'rgb(107, 107, 107)'
},
tickfont: {
size: 14,
color: 'rgb(107, 107, 107)'
}
},
legend: {
x: 0,
y: 1.0,
bgcolor: 'rgba(255, 255, 255, 0)',
bordercolor: 'rgba(255, 255, 255, 0)'
},
barmode: 'group',
bargap: 0.15,
bargroupgap: 0.1,
width: width
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const rows = await csv('https://raw.githubusercontent.com/plotly/datasets/master/globe_contours.csv');

var data = [];
var scl =['rgb(213,62,79)','rgb(244,109,67)','rgb(253,174,97)','rgb(254,224,139)','rgb(255,255,191)','rgb(230,245,152)','rgb(171,221,164)','rgb(102,194,165)','rgb(50,136,189)'];
var allLats = [];
var allLons = [];

for ( var i = 0 ; i < scl.length; i++){
var latHead = 'lat-'+i;
var lonHead = 'lon-'+i;
var lat = unpack(rows, latHead);
var lon = unpack(rows, lonHead);
allLats.push(lat);
allLons.push(lon);
}

for ( var i = 0 ; i < scl.length; i++) {
var current = {
type:'scattergeo',
lon: allLons[i],
lat: allLats[i],
mode: 'lines',
line: {
width: 2,
color: scl[i]
}
}
data.push(current);
};


var layout = {
width: width,
height: width * 0.7,
geo: {
projection: {
type: 'orthographic',
rotation: {
lon: -100,
lat: 40
},
},
showocean: true,
oceancolor: 'rgb(0, 255, 255)',
showland: true,
landcolor: 'rgb(230, 145, 56)',
showlakes: true,
lakecolor: 'rgb(0, 255, 255)',
showcountries: true,
lonaxis: {
showgrid: true,
gridcolor: 'rgb(102, 102, 102)'
},
lataxis: {
showgrid: true,
gridcolor: 'rgb(102, 102, 102)'
}
}
};

const div = DOM.element('div');
Plotly.plot(div, data, layout, {showLink: false});
return div;
}
Insert cell
function unpack2(rows, key, estado) {
return rows.map(function(row) {
if (row['estado'] == estado) {
return row[key];
}
});
}
Insert cell
cores = Object({'-': `rgba(0.12156862745098039, 0.4666666666666667, 0.7058823529411765, ${alpha})`,
'AC': `rgba(1.0, 0.4980392156862745, 0.054901960784313725, ${alpha})`,
'AL': `rgba(0.17254901960784313, 0.6274509803921569, 0.17254901960784313, ${alpha})`,
'AM': `rgba(0.8392156862745098, 0.15294117647058825, 0.1568627450980392, ${alpha})`,
'AP': `rgba(0.5803921568627451, 0.403921568627451, 0.7411764705882353, ${alpha})`,
'BA': `rgba(0.5490196078431373, 0.33725490196078434, 0.29411764705882354, ${alpha})`,
'CE': `rgba(0.8901960784313725, 0.4666666666666667, 0.7607843137254902, ${alpha})`,
'DF': `rgba(0.4980392156862745, 0.4980392156862745, 0.4980392156862745, ${alpha})`,
'ES': `rgba(0.7372549019607844, 0.7411764705882353, 0.13333333333333333, ${alpha})`,
'GO': `rgba(0.09019607843137255, 0.7450980392156863, 0.8117647058823529, ${alpha})`,
'MA': `rgba(0.12156862745098039, 0.4666666666666667, 0.7058823529411765, ${alpha})`,
'MG': `rgba(1.0, 0.4980392156862745, 0.054901960784313725, ${alpha})`,
'MS': `rgba(0.17254901960784313, 0.6274509803921569, 0.17254901960784313, ${alpha})`,
'MT': `rgba(0.8392156862745098, 0.15294117647058825, 0.1568627450980392, ${alpha})`,
'PA': `rgba(0.5803921568627451, 0.403921568627451, 0.7411764705882353, ${alpha})`,
'PB': `rgba(0.5490196078431373, 0.33725490196078434, 0.29411764705882354, ${alpha})`,
'PE': `rgba(0.8901960784313725, 0.4666666666666667, 0.7607843137254902, ${alpha})`,
'PI': `rgba(0.4980392156862745, 0.4980392156862745, 0.4980392156862745, ${alpha})`,
'PR': `rgba(0.7372549019607844, 0.7411764705882353, 0.13333333333333333, ${alpha})`,
'RJ': `rgba(0.09019607843137255, 0.7450980392156863, 0.8117647058823529, ${alpha})`,
'RN': `rgba(0.12156862745098039, 0.4666666666666667, 0.7058823529411765, ${alpha})`,
'RO': `rgba(1.0, 0.4980392156862745, 0.054901960784313725, ${alpha})`,
'RR': `rgba(0.17254901960784313, 0.6274509803921569, 0.17254901960784313, ${alpha})`,
'RS': `rgba(0.8392156862745098, 0.15294117647058825, 0.1568627450980392, ${alpha})`,
'SC': `rgba(0.5803921568627451, 0.403921568627451, 0.7411764705882353, ${alpha})`,
'SE': `rgba(0.5490196078431373, 0.33725490196078434, 0.29411764705882354, ${alpha})`,
'SP': `rgba(0.8901960784313725, 0.4666666666666667, 0.7607843137254902, ${alpha})`,
'TO': `rgba(0.4980392156862745, 0.4980392156862745, 0.4980392156862745, ${alpha})`
})
Insert cell
cores['SP']
Insert cell
function getColor(rows, estado) {
return rows.map(function(row)
{ return cores[row[estado]]; });
}
Insert cell
function getKeys(obj) {
var keys = [];
for(var p in obj) {
if(obj.hasOwnProperty(p)) {
keys.push(p);
}
}
return keys;
}
Insert cell
estados = getKeys(cores)
Insert cell
alpha = 0.5
Insert cell
{
const rows = await csv('https://gist.githubusercontent.com/Dienert/5daa63e17a7afa60a15f1fc01f0198da/raw/c5eeb1dbeb168ee0def848a3ef0ff2e153ee7100/pontos.csv');

let estados = getKeys(cores)

let traces = []

estados.forEach(estado => {
var trace = {
x:unpack(rows, 'x', estado), y: unpack(rows, 'y', estado), z: unpack(rows, 'z', estado),
mode: 'markers',
marker: {
size: unpack(rows, 'tamanho', estado),
color: cores[estado],
// color: 'rgba(0, 0, 255, 50)',
line: {
color: 'rgba(0, 0, 0, 0)',
width: 0.5
},
opacity: 0.8
},
type: 'scatter3d',
//color: getColor(rows, estado),
name: estado
};
traces.push(trace);
});

var layout = {
dragmode: false,
scene: {
xaxis: {title: 'colocação/encaminhamento (hitrate)'},
yaxis: {title: 'empresas/colocação (ratio(c))'},
zaxis: {title: 'retorno/colocação (rc)'}
},
margin: {
l: 0,
r: 0,
b: 0,
t: 0
}};

const div = DOM.element('div');
Plotly.newPlot(div, traces, layout);
return div;
return rows;
}
Insert cell
{
const rows = await csv('https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv');

var trace1 = {
x:unpack(rows, 'x1'), y: unpack(rows, 'y1'), z: unpack(rows, 'z1'),
mode: 'markers',
marker: {
size: 12,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
opacity: 0.8
},
type: 'scatter3d'
};

var trace2 = {
x:unpack(rows, 'x2'),
y: unpack(rows, 'y2'),
z: unpack(rows, 'z2'),
mode: 'markers',
marker: {
color: 'rgb(127, 127, 127)',
size: 12,
symbol: 'circle',
line: {
color: 'rgb(204, 204, 204)',
width: 1
},
opacity: 0.8
},
type: 'scatter3d'
};

var data = [trace1, trace2];
var layout = {
width: width,
height: width * 0.7,
margin: {
l: 0,
r: 0,
b: 0,
t: 0
}
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more