Crie gráficos com Plotly.js: guia de início rápido

1. Apresentação: Ei, você deseja reunir um gráfico com o lote js e criar um gráfico como este, como gráfico incorreto, gráfico circular e circular, gráfico de linhas suaves, gráfico de pontos dispersos, gráfico de captura de linha, gráficos bolhas Então você está no lugar certo. Meu nome é John Shokar. Sou desenvolvedor Full Stack Web e instrutor on-line. No mundo atual movido por dados, simplesmente mostrar números não é suficiente. Empresas, recursos e desenvolvedores confiam em recursos visuais interativos para se comunicar com os espectadores É por isso que confiamos nos gráficos. E para criar o gráfico de forma eficaz, Plotly permite criar gráficos nos quais o usuário pode ampliar, passar o mouse, filtrar e interagir com eles Basicamente, isso torna sua visualização mais envolvente, significativa e profissional Mesmo que você nunca tenha criado um gráfico antes, você pode aprender otlygs com muita facilidade Apenas uma linha de código JavaScript fez seu trabalho. É muito fácil de aprender. E neste curso, estamos basicamente concentrando nos gráficos básicos, como gráficos de barras horizontais e verticais, circular e circular, gráfico linha suave, gráfico de dispersão Gráfico de ruptura de linha, gráfico de bolhas, gráfico três gráficos de dispersão D, três gráficos de superfície D, três gráficos de linha espinhal D e três gráficos D Mace O que você está esperando? Vamos começar. 2. Como usar o Plotly: Para obter o link do CDN, você pode visitar o site oficial, seu site, plotly.com A partir daqui, você pode obter o link CDN do Plotly. Atualmente, a versão 3.2 0.0 está disponível para nós. Além disso, se você quiser usar as outras versões do Plotly , visite este site Sidnjs.com. A partir daqui, você pode obter as diferentes versões. Deixe-me te mostrar como. A partir daqui, você pode selecionar a versão diferente do Plotly Depois de selecionar qualquer versão, ela fornecerá o link CDN e você precisará copiar essa tag de script Agora, vamos ver como podemos configurar a configuração básica do Plotly. Lembre-se de que você também pode usar este link CDN, latest dot main Dot js Se você digitar o último Dot main Dot js, ele fornecerá a versão mais recente do Plotly Agora vamos ver como podemos criar esse tipo de gráfico. Primeiro, você precisa criar um espaço reservado para o gráfico, você precisa definir uma tag de mergulho. Dentro dessa tag dip, você precisa especificar um ID. Além disso, você precisa fornecer a dimensão desse gráfico. Como você pode ver no nosso caso, usamos com 100% e largura máxima de 700 pixels. Você pode definir o máximo com qualquer tamanho. Depois disso, vamos criar esse gráfico em nosso exemplo. Como você pode ver em nossa direção excessiva, definimos o tamanho do motor em lixo e em nossa direção YXS, aqui definimos eficiência de combustível, milhas por Então, para criar esse tipo de gráfico, queremos definir o elemento profundo onde vamos exibir o gráfico. Então, dentro dessa tag de script, precisamos definir matrizes de dados Matrizes de dados, como para excesso de direção, aqui definimos uma variável const X E aqui definimos o tamanho dos motores, como motor de 1,2 litro, 1,4, 2,0, 3,0 e 4,0. Portanto, em nossa direção de excessos, você pode ver que definimos os tamanhos do motor e, em nosso YXS, de acordo com os tamanhos do motor, definimos a eficiência de combustível em milhas por galão, e você pode notá-la na Depois disso, depois de definir as matrizes de dados, precisamos definir o objeto de dados Precisamos criar um objeto usando essa matriz. Para definir o objeto, primeiro digite cost e o nome do nosso objeto é data. Então, dentro do quadrado ss e dentro do clsesF, vou definir o Em nossos Xs, quero imprimir os tamanhos dos motores. Eu passo essa matriz e, em nossos YXs, vamos imprimir a eficiência de combustível É por isso que passei a matriz Y. Depois vem a parte mais importante, que é o humor. É a parte mais importante do gráfico. Como você pode ver, com linhas com linhas, definimos marcadores, com marcadores positivos Então, com a linha, ela também vai para os pontos marcadores. Em seguida, definimos a cor da linha. Cor da linha azul, e também definimos o tamanho do marcador, tamanho oito do marcador Você pode aumentar o tamanho do marcador e também diminuir o tamanho do marcador. Depois de definir o objeto de dados, necessário definir o layout. Eu quero dizer o design do gráfico. Para isso, aqui definimos um layout variável, depois dentro das vidas. Em nossos XXs, quero imprimir o valor de 1 a 4 0,5. Começa com um e vai até 4,5. Em nossos YXs, aqui está definido o intervalo de 10 a 25. Para nosso excesso de direção, aqui dissemos o tamanho do motor do título em litros, este, para nossa direção YxS, aqui dizemos eficiência de combustível em milhas por galão Esses são nossos títulos. Depois disso, precisamos definir o título principal. Quero dizer com que propósito criamos esse gráfico. Nosso título é carro desse tamanho versus eficiência de combustível, e você pode ver o título na parte superior. Agora, depois de definir o layout, seguida, precisamos renderizar o gráfico. Para renderizar o gráfico, queremos chamar esse objeto de Plotly Tot, do Plotly, quero criar queremos chamar esse objeto de Plotly Tot, do Plotly, quero criar um novo gráfico. Eu digito um novo enredo. Então, dentro da rodada ss e primeiro quando definir como vamos exibir esse gráfico, e vamos exibir o gráfico em nosso elemento em nosso elemento de, dissemos esse ID, meu gráfico Eu seleciono esse elemento profundo usando seu nome de ID. Em seguida, precisamos passar o objeto de dados, e o nome do nosso objeto de dados é data. Em seguida, precisamos passar o design do layout, esse layout. Depois de passar isso, depois de passar todos os valores e definir esse arquivo, se você recarregar o navegador, poderá ver um gráfico como este Você pode desenhar qualquer tipo de gráfico usando isso. Você pode criar Bhat, você pode criar gráfico Pi, gráfico de rosca, gráfico de linha suave, gráfico de plotagem dispersa Line rap e muito mais. Mostrarei todos os exemplos, um por um, em nossos próximos tutoriais Isso é tudo para este tutorial. Vamos começar nosso próximo tutorial com Br harts com a ajuda do Plotly js Obrigado por assistir a este vídeo Stune, para nosso próximo tutorial 3. Gráficos de barras: Olá, pessoal. É bom ver você de volta. Este é o primeiro tutorial relacionado ao gráfico de proteges e, hoje, neste tutorial, aprenderemos sobre gráficos de barras Vamos criar gráficos de barras horizontais e gráficos de barras verticais. Sem falar muito, vamos entrar no editor de código do Visual Studio e ver como podemos usá-lo. Como você pode ver, lado a lado, abri meu Visual Studio code eater e meu navegador usando extensão Lights e já criei um documento Stem chamado index dot TEL Neste tutorial, vamos criar um gráfico de barras. Basicamente, vamos criar gráficos de barras verticais. Em primeiro lugar, vamos usar o link CDN para o gráfico de plotagem Dentro da tag principal, depois do título, vou usar o script script e, em seguida, usaremos esse link CDN Ele carregará a biblioteca PlotiJS de um CDN. Portanto, você pode usar o gráfico E para traçar gráficos. Então, primeiro dentro da tag body, vou pegar uma tag dip tipo D e atribuir uma ID a essa ID da tag Dip, e meu nome de ID é meu gráfico Depois disso, vou estilizar a etiqueta de mergulho. Aqui, vou usar o método de estilo embutido. Eu uso o atributo de estilo, estilo e, primeiro, vou definir com, quero usar 100%. 100%. Depois disso, vou pegar maconha MAX, largura máxima, vou pegar 700 pixels É isso mesmo. Em seguida, vou pegar o script Scriptag dentro da tag scrip Primeiro, vou pegar uma matriz, x é valor e A x é valor Aqui, vou vincular a palavra-chave const e definir uma variável chamada matriz X. Matriz X igual ao valor XX, Helm colocou todos os nomes dos países Dentro dos quadrados, vou digitar todos os nomes dos países dentro dos códigos duplos, Itália, França, Espanha, EUA e Argentina Em seguida, semicone dois nesta linha. Depois disso, vou definir a matriz Y para valores YXS. Vou digitar const Y array. Custo YRA igual a dentro da massa quadrada Impass Então, dica para a Itália, 55 para a França, Ameripas 49 para a Espanha, Amurpa 44 para EUA Amerpas 24 e para Argentina Em seguida, semicone para finalizar esta linha. Nossa primeira matriz é para categorias, como país, e nossa segunda matriz é para o número de produção de vinho. Depois disso, depois disso, precisamos definir o conjunto de dados e o estilo do gráfico Para isso, vou definir outra variável, alguns tipos de contras e o nome da nossa variável é data. Dados iguais a dentro da base quadrada. Eu vou usar um dicionário, então eu uso Carlss Então, dentro dos escultores aqui, aqui, primeiro, precisamos definir os países em xxsPara x dois pontos, vou passar a matriz X para dois pontos YxS, vou passar Y ary, para o tipo para o tipo, vou usar bar precisamos definir os países em xxsPara x dois pontos, vou passar a matriz X para dois pontos YxS, vou passar Y ary, para o tipo para o tipo, vou usar bar. Quero mostrar nosso gráfico na barra horizontal, então vou usar a barra 1 padrão. Em seguida, uma vírgula, precisamos definir a orientação. Orientação, e eu vou usar a vertical, então vou passar V. Atacma Em seguida, precisamos definir a cor da barra Eu quero um pouco de R semitransparente, então vou usar o valor Rgvia Vou digitar marcar marker aqui, vou usar cravos e aqui vou usar então dentro dos cravos vou definir a cor vou Cor, cor, para a cor, vou atribuir a cor arga Dentro dos códigos duplos, vou amarrar o RGBA. Dentro da rodada ses para vermelho, vou passar zero para verde, vou passar zero para azul, vou usar 255, o valor alto Como eu disse, vou usar um pouco de semitransparente. Vou usar para o valor Alpha, vou empatar 0,6 e ponto e vírgula dois na linha Em seguida, precisamos trabalhar na configuração aparente do gráfico , como título. Vou definir outra variável. Vou relacionar custo, custo , e nossa variável é layout. Layout igual ao de Inside the carnivorouss, vou usar Eu vou atribuir título ao título desta parada, e eu vou empatar com este, vou usar exatamente o mesmo título de produção mundial Eu copio este e vou colocá-lo aqui. Produção mundial de vinho e semicron para acabar com esse limão. Depois disso, depois disso, precisamos chamar a função min que criará o gráfico, que é plotty Plotit new plot Então, dentro das rodadas, dentro do vestido redondo, primeiro precisamos fornecer a identificação Primeiro, dentro dos vestidos redondos dessa função, precisamos passar o nome do ID, gráfico M, porque vamos exibir o gráfico no elemento Então, vou passar o nome de identificação, Mplot. Em seguida, precisamos passar o conjunto de dados que definimos aqui, que é variável de dados Depois disso, precisamos passar o layout, o gráfico de layout com estilo. Então, para passar o layout. Vou configurar esse arquivo. Depois de configurar esse arquivo, aqui você pode ver o gráfico, produção mundial de vinho e, acima dele, você pode ver os controles. Mas se você olhar o gráfico, poderá ver em nossos XXs que temos nomes de países como Itália, França, Espanha, EUA e Argentina; em nossos xs, Ouça, definimos os números da produção de vinho Como você sabe, para a Itália, atribuímos o valor 55 para a França, atribuímos 49, e para a Espanha, atribuímos 44, e para os EUA, atribuímos 24 e para a Argentina, atribuímos 15. Este é o exemplo do gráfico de barras verticais. Agora vamos fazer isso em tela cheia e falar sobre os controles. Em nosso primeiro controle, podemos baixar a imagem desse gráfico. Se eu clicar nele, como você pode ver, ele cria uma imagem. Eu crio uma imagem desse gráfico no formato PNG. Se eu abrir minha pasta de download, aqui você pode ver a imagem. Em seguida, temos a opção Zoom, a opção panorâmica, a opção caixa, a ferramenta So, a ferramenta Zoom Out, a escala automática, a redefinição de Xs, a opção de alternar as linhas de pico, mostrar os dados fechados ao passar o mouse e comparar os dados ao passar o mouse, etc Zoom Out, a escala automática, a redefinição de Xs, a opção de alternar as linhas de pico, mostrar os dados fechados ao passar o mouse e comparar os dados ao passar o mouse e comparar Se você quiser converter esse gráfico em gráfico horizontal, sim, você pode fazer isso facilmente. Para isso, basta trocar o XS. Eu quero dizer, primeiro, que vou mudar o nome Xs , assim como vou fazer este Xxs , assim como vou fazer este e este YxS Depois disso, depois disso, precisamos mudar a orientação. Vou torná-lo horizontal, então vou passar H, e não precisamos mudar nada. Então, para configurar esse arquivo, se eu voltar ao meu navegador, você pode ver o resultado. Aqui, convertemos o gráfico vertical em gráfico horizontal. Isso é tudo para este tutorial. Espero que agora esteja claro para você como podemos criar gráficos verticais e horizontais. Eu quero dizer gráfico de barras. No próximo tutorial, criaremos um gráfico circular com a ajuda do PlotJS 4. Gráficos de tortas e donuts: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial. Hoje, neste tutorial, vamos aprender um novo gráfico. Vamos criar um gráfico de pizza e rosquinha com a ajuda do Plotti Sem perder seu tempo, vamos entrar no editor de código WizarStudio Como você pode ver lado a lado, abro meu editor de código do Wiss Studio e meu navegador usando extensão Lifesaver e já crio um documento St chamado index E hoje, neste tutorial, vamos criar dois tipos de gráfico, um gráfico circular e um gráfico de rosca com a ajuda do PlotJS Primeiro, vou importar o link do CEN. Depois do título, vou digitar Script tag, script e usar o link CEN para PlotiJS Em seguida, dentro da etiqueta corporal, vou pegar uma etiqueta profunda. Vou digitar profundamente e vou definir um ID para essa tag de mergulho Mplot e estilo com 100% de largura máxima de 700 pixels Então eu vou pegar a tag Script, script. Dentro da tag do script. Primeiro, vou definir matriz x matriz, aqui, vou definir os nomes dos países. Para isso, vou definir uma variável e o nome da nossa variável é const Xray dentro dessa matriz. Aqui, vou passar vários nomes de países, como Itália, França, Espanha, EUA e Argentina Vamos usar o mesmo gráfico que eu uso no meu tutorial anterior. Vamos usar o gráfico mundial de produção de vinho, mas desta vez vou usar o Picher Então eu vou passar pelo YA. Eu digito const Yarra e vou passar os valores de acordo com os países Em seguida, definiremos o layout e definiremos o título nesse layout. Vou digitar const layout e, dentro carivor, título mundial Depois disso, depois disso, precisamos criar os dados. Em seguida, precisamos definir os dados para esse gráfico. Vou digitar custo, e nossa variável é data, DATA e igual a ela é uma matriz. Dentro da base quadrada, vou usar uma lista, caso contrário, um dicionário. Em seguida, vou definir os rótulos, rótulos, vírgula Xar e valores Y. Em uma vírgula, agora precisamos definir o tipo desse gráfico, algum tipo Ele deve usar o tipo Qard, tipo, tipo e dois pontos Dentro do curso de dogle, vou usar gráfico Pi, PIE e semicon para finalizar essa linha Depois disso, precisamos chamar a função. Precisamos chamar uma nova função de plotyLotPloty, dot, new plot, dot Então, dentro dos vestidos redondos, primeiro, eu vou definir o primeiro, precisamos definir o D onde vamos mostrar o gráfico, que é o meu gráfico. Eu copio o nome de identificação, minha trama, e vou colar aqui. Em seguida, vou definir os dados. Dados. Depois disso, vou definir o layout e vou definir esse arquivo. Depois de configurar esse arquivo, você não pode ver nada porque eu cometi um erro. Precisamos usar o tipo A para o gráfico E. Precisamos aqui digitar, ortografia correta, e eu vou definir isso Depois de definir isso, você pode ver o resultado. Agora você pode ver o gráfico circular dessa produção de vinho. Agora, depois de criar o gráfico circular, se você quiser converter o gráfico circular em gráfico circular para isso, precisará usar outro parâmetro Vou duplicar esta linha e comentar a linha anterior E aqui vou digitar outro parâmetro que é dois pontos inteiros, aqui, vou digitar o valor da foto com pontos Se eu usá-lo , ele criará um buraco nesse círculo. Depois de definir esse arquivo, você pode ver o resultado. Ele cria um buraco nesse círculo e cria uma forma de rosquinha E se você quiser alterar o tamanho, sim, você pode fazer isso facilmente, altere o número. Se eu aumentar, basta aumentar o número e definir o arquivo. Se você quiser um tamanho menor , vou digitar 0.2 e definir o arquivo e ele criará um orifício menor. Por enquanto, eu vou, eu gostaria de escolher quatro. Agora, deixe-me mostrar como você pode mudar a cor desses países. Como você pode alterar a cor desse gráfico circular. Para isso, neste objeto aqui dentro do objeto, vou digitar uma vírgula e vou usar outro parâmetro chamado marcador Marcador, dois pontos e dentro das cores, vou usar a propriedade de cor, Em seguida, cólon. Dentro dos vestidos quadrados, vou definir a cor para. Aqui vou definir a cor de acordo com o país primeiro para a Itália, para França, para a Espanha, para os EUA, para a Argentina, etc Aqui, vou usar alguns códigos extras de cores amarelas e vou definir esse arquivo Depois de definir esse arquivo, mas antes de definir a cor, aqui precisamos usar o parâmetro de cores , não o parâmetro de cor. Para digitar porque aqui vou passar várias cores. Então, eu vou passar dentro do quadrado versus, eu vou passar os códigos de cores. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, instantaneamente ele mudou a cor dos países. Primeiro, eu uso a cor laranja para a Itália. Então eu uso a cor azul para a França. Depois disso, uso a cor verde para a Espanha, depois uso a cor amarela para os EUA e para a Argentina, uso a cor vermelha. Espero que agora esteja claro para você o conceito como podemos criar um gráfico circular e um gráfico de rosca Além disso, aprendemos como podemos mudar a cor dos nossos gráficos. Então, obrigado por assistir a este vídeo Stune, para nosso próximo tutorial 5. Gráfico de linhas suaves com pontos: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo projeto. E hoje, neste projeto, vamos criar um gráfico de linhas suaves com pontos que mostra como o número de visitantes muda de segunda a domingo Aqui mostramos o número de visitantes de um site, de acordo com esta semana. E você pode ver que, dia após dia , ela aumenta e diminui. E de acordo com o valor, ele cria uma linha st. Além disso, você pode observar os marcadores. Então é isso que vamos construir hoje neste projeto. Então, vamos começar a prática. Como você pode ver lado a lado, abro meu editor de código visalstd e meu navegador usando a extensão de servidor Live e já crio um documento HTML chamado index Aqui na seção principal, você pode ver eu já uso o link den do PlotiJS em nossa tag body, criamos a tag profunda onde mostraremos a captura Primeiro, precisamos pegar uma tag de script, algum tipo de script. Então, dentro da tag do script, primeiro, precisamos preparar os dados que serão exibidos em nosso gráfico. No início, vou definir o nome da lista em uma semana. Vou definir dias de custo variável iguais a segunda, terça, quarta, quinta, sexta, sábado e domingo. Então, de acordo com os dias, vou definir os códigos vis. Visitante de um site. Vou definir o custo do visitante. Visitante igual a 120 na segunda-feira, 200 na quarta-feira, 150 na quinta-feira, 300 na sexta-feira, 250 e no sábado 400 e no domingo 380. Agora, para definir os valores, precisamos criar o gráfico. Aqui vou digitar um single e comandar a criação do gráfico. E eu vou digitar C e nossa variável são dados. Dados iguais aos de dentro da resina quadrada, vou usar a resina de curry. Agora, em nossa direção xs e somott X, dois pontos, quero colocar o nome do dia Quero colocar o nome do dia. Então, digite essa variável dias. Então, no YxS, quero colocar os visitantes. Depois disso, vou definir o movimento. Modo, dois pontos aqui, vou usar a linha de valor e os marcadores Dentro do curso duplo, eu digito linhas e marcadores. Ele vai desenhar a linha e o ponto cada um no ponto. O próximo atributo, eu vou usar a linha. Linha, dois pontos e aqui para definir o tipo de linha que eu quero usar Suponha que se você quiser uma linha suave, aqui você pode definir a linha. Aqui você pode definir o tipo de linha que deseja usar. Você pode usar linhas angulares nítidas, caso contrário, linhas suaves. Mas neste exemplo, eu gostaria de usar uma linha suave. Dentro do carlivor, vou definir forma, forma, cólon e quero usar Então digite dentro do curso duplo. Linha SP, vírgula e, finalmente, vou definir o nome e, finalmente, precisamos definir os nomes dos rótulos, o nome do subtipo dentro dos históricos de camadas duplas E o semicon two veio nesta linha. Uma coisa que você precisa lembrar: os gráficos sempre aceitam dados dentro de uma matriz. É por isso que precisamos usar esses seis quadrados. Agora vamos entrar no layout. Aqui, vou definir o layout. Então, para amarrar um layout const igual ao interior do Carlos. Primeiro, vou definir o título. Aqui, vou defini-lo como título de visitante do site em uma semana. Depois disso, precisamos passar o rótulo XXS. Primeiro, definimos o título do gráfico, depois precisamos definir o nível de XXS como d. Herm digite Xs dentro do título de Cali D. Em seguida, em nosso nível YXS, quero imprimir o número de visitantes e ponto e vírgula Agora, depois de definir os dados e o layout, vamos criar o gráfico. Vamos criar o gráfico. Para isso, precisamos amarrar o ponto de plotagem NuPlot Então, primeiro, dentro da redondeza, precisamos definir o ID Precisamos definir o ID do DV. Em qual D vamos colocar o gráfico, que é o meu enredo. Eu copio o nome de identificação e vou colocá-lo aqui. Depois da vírgula, aqui, vou definir os dados Acima disso, vou definir o layout e o ponto e vírgula para finalizar essa linha Para não mexer neste arquivo, aqui você pode ver o resultado. Aqui, criamos linhas com marcadores, e você pode notar que essas linhas são linhas suaves, não linhas rígidas No XXs, imprimimos o nome do dia e no YXS imprimimos os números dos visitantes Este é o título deste gráfico, visitantes do site por mais de uma semana. E você também pode observar o rótulo em XXS e YXS. Para XSS, imprimimos o dia e para YXS imprimimos o número de visitantes Então, temos Smoothline, temos marcadores. Então é assim que podemos construir essa linha suave com o gráfico de marcadores Então, obrigado por assistir a este vídeo estado para nosso próximo projeto. 6. Gráficos de dispersão: É bom ver vocês de volta, pessoal. Mais uma vez, estou de volta com um novo projeto relacionado. E hoje, neste tutorial, vamos criar um gráfico de dispersão Basicamente, um gráfico de dispersão é um tipo de visualização de dados usado para mostrar a relação entre duas variáveis Normalmente, ele é usado para variáveis numéricas. Aqui, cada um dos pontos representa uma observação ou pares de dados. Os Xxs mostram uma variável e os YxS mostram outra Basicamente, nós o usamos para comparar variáveis de quantidade, detectar corelações ou padrões, identificar camadas externas, visualizar relações de regressão e etc Sem falar muito, vamos começar a prática e ver como podemos criar esse gráfico. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver e já crio um documento de estimativa chamado index dot E, como você sabe, hoje, neste projeto, vamos criar um gráfico de dispersão Inicialmente, em nossa tag principal, vou importar o script do tipo de vazamento Cdian e nosso vazamento Cirian dos gráficos Então, dentro da tag body, vou pegar uma tag profunda, digitar Dev, e vou definir a tag IDH, e nosso nome de ID é M plot Além disso, vou aplicar um pouco de estilo à etiqueta de mergulho, algum estilo de tipo, estilo igual ao conjunto Heim com 100 por conjunto Em seguida, vou definir a largura máxima, a largura máxima, largura máxima e ela definir a largura máxima de 700 pixels. Agora, o cenário do nosso gráfico é o preço das casas versus o tamanho. Vamos definir os preços das casas em milhões e o tamanho em metros quadrados. De acordo com o metro quadrado, vamos definir o preço. Para isso, vou definir a tag de script. Então, dentro da tag body, tipo Imo, script. Então, dentro da tag do script, primeiro, precisamos definir uma matriz da variável A para os valores Xxs. Em nossa direção cs, vamos definir a área em metros quadrados. Imo digite const e nossa variável é X array. Raio X igual ao interior da base quadrada, passamos a área em metro quadrado. Da mesma forma, de acordo com o tamanho, precisamos definir o preço. Eu vou definir YA. Vou digitar const, YA igual ao preço do terreno de acordo com o tamanho Lembre-se, aqui definimos o preço em milhões. Depois disso, precisamos definir os dados. Para isso, vou criar uma variável chamada data, então type, const ou variable é data, TATA, data igual a, é uma Então, dentro dos aliases, vou usar um dicionário E aqui vou dizer X para XXs, vou atribuir XR para YXSF YxS, vou atribuir YR vou Em seguida, precisamos definir o modo. Seu modo de digitação, dois pontos, aqui está uma aminoty dentro dos marcadores de códigos duplos e ponto e vírgula Em nosso exemplo anterior, usamos marcadores e linhas juntos, mas para criar um gráfico de dispersão, precisamos usar somente Para definir os dados, precisamos definir o layout. Para isso, quero ter um único comando e vou definir um tipo de variável, const e nossa variável é layout, igual a dentro do ColorSSF que precisamos para definir o X xs, eixo X, cólon. Aqui, vou definir o interior dos escultores, vou definir o alcance Então, digite a faixa de dois pontos dentro do quadrado sis, dentro da resina quadrada, eu vou passar 4.160 Para o X xs, vou pegar 40-160 e vou dizer que o aqui é o título em metro quadrado Dentro do curso duplo, vou digitar metro quadrado. Depois da vírgula para YXS Y, X, para Xs, vou definir o intervalo Dentro da lista, vou digitar range, Range (dois pontos dentro do quadrado), Hemo set range E aqui, apoca, vou definir o preço do título em milhões Então, Atoka, eu vou definir o título do nosso gráfico. Então, digite título dentro dos códigos ovais, tipo de herói, preço da casa versus tamanho, exatamente o mesmo. Semicorm dois nesta linha. Eu quero subtrair esse arquivo Agora, depois de definir os dados e definir o layout, precisamos exibir o gráfico usando plotagem Aqui, precisamos criar um objeto de floty, algum tipo, plotty dt, Então, primeiro dentro do recesso redondo, precisamos definir o nome do ID, caso contrário, o nome do dB onde exibiremos o gráfico No nosso caso, minha trama. Eu copio o nome de ID desse elemento de e o colo aqui. Depois do coma, vou passar os dados e vou passar o layout. E eu quero configurar esse arquivo. Depois de configurar esse arquivo, aqui você pode ver o resultado. Aqui, criamos com sucesso o gráfico disperso. Aqui você pode observar na direção excessiva, imprimimos o tamanho do terreno em metros quadrados na direção X, imprimimos o preço em milhões Agora, de acordo com o tamanho do terreno, ele imprime o preço. Você pode notar que por 50 metros quadrados, imprima, destaque 7.000.060 metros quadrados metros Em seguida, para 70, ele destaca oito novamente. Em seguida, para 80, destaca nove. Para um terço do metro quadrado , destacou 14 milhões e para 150 metros quadrados , destacou 15 milhões. Este é o exemplo básico e simples do gráfico de dispersão. Espero agora que você saiba como podemos criar isso com a ajuda da plotagem Isso é tudo para este tutorial. Obrigado por assistir a este estúdio de vídeo para nosso próximo tutorial 7. Gráficos de linha: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à plotadora. Hoje, neste tutorial, aprenderemos como desenhar gráficos de linhas com marcadores Como você pode ver neste gráfico, temos o tamanho do motor na direção XX e a eficiência de combustível por galão na direção YxS Agora, de acordo com o tamanho do motor, precisamos mencionar a eficiência de combustível. Para isso, vamos usar esse gráfico de linhas com marcadores. Sem perder seu tempo, vamos começar a prática e ver como podemos criá-la Finalmente, estamos no meu editor de código do Visual Studio e, como você pode ver, já importamos o link Cdian dos últimos Plotgs Agora, primeiro, dentro da tag body, vou criar uma tag dip, tipo D Dev, e vou atribuir N ID a essa tag dip ID, ID, my flot vou criar uma tag dip, tipo D Dev, e vou atribuir N ID a essa tag dip ID, ID, my Depois disso, vou aplicar estilo embutido a essa tag Zip Então, digite estilo de atributo de estilo aqui, eu vou aplicar com, eu quero aplicar 100%. Depois disso, vou definir a largura máxima. Então digite, largura máxima, largura máxima. Aqui vou mencionar a largura máxima de 700 pixels, que pode se estender até 700 pixels. Em seguida, precisamos entrar na tag do script. Aqui eu vou pegar a tag script, script. Dentro da tag scrip, primeiro, vou criar uma matriz para XXS Em nossa matriz XS, vamos definir o tamanho do motor e vamos definir o tamanho do motor em lixo Então digite const, const, X array. uma matriz X constante igual a aqui, vou definir dentro do quadrado o tamanho do motor, como 1,2, 1,4 litro , 1,6, 1,8, 2,2 0,2 0,4, algo assim, e ponto e vírgula dois nesta linha Depois disso, vou definir outra matriz para YxS em nossos YXSs, mencionaremos a eficiência de combustível e a mediremos em milhas por galão Henotpe possui uma matriz Y igual a um motor de 2,2 litros. Em um galão, ele pode atingir até 22 milhas. Em um galão. Como você pode ver, se aumentarmos o tamanho do motor, tempos ele reduzirá a quilometragem De tempos em tempos, reduziu a distância em milhas. Para motores de 4,0 litros, ele pode atingir até 12 milhas em um galão Em seguida, precisamos criar o conjunto de dados. Para isso, aqui, vou definir outro custo variável Cs e nosso nome de dados é data. Dados iguais a dentro do quadrado ses, dentro do Css, aqui, vou definir X x. X, dois pontos, primeiro, vou fornecer a matriz X, coma para Y, para Y xs, aqui, vou fornecer a matriz Y. Então, para vírgula, em seguida, precisamos mencionar o modo. Em qual modo eu quero desenhar nosso gráfico, algum modo de tipo, modo, dois pontos, e dentro dos códigos duplos, primeiro eu preciso de linhas, depois com linhas, eu quero aplicar marcadores Em seguida, vou definir a cor da linha. Linha linha dentro do cólon dentro do Colbress aqui, eu vou definir a cor dessa Cor, dois pontos, dentro das camadas duplas, eu quero uma linha de cor azul A vírgula, vou definir o tamanho do marcador. Marcador, tamanho do marcador, cólon. Aqui vou definir o tamanho oito. Já criamos o conjunto de dados para nossa captura. Agora defina os dados, precisamos definir o layout. Para isso, aqui, vou definir uma variável e nosso layout de variáveis, const layout Layout de contras igual ao interior da resina Cari. Em primeiro lugar, vou definir o título. Título, dois pontos, aqui vou digitar dentro dos códigos duplos Dentro do curso duplo, vou digitar o tamanho do motor do carro versus a eficiência de combustível. Depois da vírgula, depois do título, vou definir o xs X xs para X xs, dentro do Cariss dentro das resinas do carro, vou definir o alcance Aqui vou definir o intervalo, intervalo, dois pontos e, para excessos, vou definir, quero fornecer um intervalo entre um, dois, quatro, um, cinco Porque se você notar, deixe-me mostrar o tamanho do nosso motor a partir de 1,2 e termina em 0410 Aqui eu tomo um valor um pouco menor do que o primeiro valor e eu pego e também tomo um valor um pouco maior do que a última veia Em seguida, precisamos definir o título para o xs, algum tipo, título, tamanho do motor na maca Depois dessa apro-coma, vou definir os YXs. Para os YXs vou usar o mesmo valor e o mesmo título sugeridos Por fim, após definir o layout, definir os dados, precisamos exibir o Plotly Para isso, aqui vou digitar Plotly, Plotly dot, new plot, New plot Lá eu exibo um novo enredo. Depois disso, primeiro, precisamos definir em qual elemento do banco de dados vou exibir o gráfico. No nosso caso, minha trama. Eu copio, então eu passo o nome do ID, então precisamos passar os dados. Depois disso, precisamos definir o layout. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, aqui você pode ver o gráfico. Você pode ver o enredo. Como você pode ver, para um motor de 1,2 litro, ele mostra 22 milhas por galão E para um motor de 1,5 litro , mostra 20 1 milha por galão E para o 2,5, mostra 16 milhas por galão. Então é assim que funciona. Então, espero que agora esteja claro para você como podemos criar captura de linha com marcadores. E se você quiser, se não quiser mostrar os marcadores, sim, você pode Você só precisa definir as linhas. Em seguida, ele esconderá todos os pontos marcadores. Deixe-me te mostrar como. Agora, em nosso modo, se removermos os marcadores e depois configurarmos o arquivo e voltarmos ao navegador, agora ele ocultará todos os marcadores Agora você pode ver apenas linhas retas. Mas para entender melhor, vou aplicar um marcador com linhas Eu configurei esse arquivo novamente e aquele para o navegador. É assim que parece. 8. Diagramas em bolha: É bom ver vocês. Mais uma vez, estou de volta com outro tutorial relacionado ao plotly js. E hoje, neste tutorial, vamos criar gráficos de bolhas Agora, a questão é por que usamos gráficos de bolhas e qual é a utilidade deles Um gráfico de bolhas é uma versão aprimorada do gráfico de dispersão em que cada ponto de dados é representado não apenas por sua posição no X e Y, também pelo tamanho do marcador e, opcionalmente, também usamos cores Em termos simples, Xxs é uma variável. YXS é outra variável. tamanho da bolha representa a terceira variável, e a cor da bolha pode representar a quarta dimensão, como categoria ou intensidade Por causa disso, um gráfico de bolhas é frequentemente descrito como um gráfico tridimensional com apenas dois xs visíveis, onde a terceira dimensão é comunicada visualmente pelo tamanho da bolha Agora, a questão é por que usamos gráficos de bolhas? Quando, se você quiser mostrar a relação entre três variáveis ou mais variáveis, padrão ou agrupamento nos dados, comparação entre categorias. As magnitudes são proporcionais visuais. Se falarmos sobre os exemplos, compara os países por seu PIB, expectativa de vida Por exemplo, para o PIB, usamos XXs. Para a expectativa de vida, usamos Ys e para a população, usamos o tamanho da bolha É por isso que se tornou tridimensional. Caso contrário, visualize as vendas de produtos, as unidades vendidas, o lucro e o giro do marketing Além disso, podemos usá-lo para rastrear tarefas do projeto, como complexidade, duração e tamanho da equipe. Então, neste tutorial, vou mostrar dois exemplos. Em nosso primeiro exemplo, vamos comparar os países pela expectativa de vida do GDB e pela expectativa de vida do GDB população usando o tamanho da bolha Então, vamos começar a prática e ver como podemos usar isso. Como você pode ver, estamos no editor de código do meu estúdio sul, e eu já inseri o link UploJS do Cidan e uso o mais recente Então, dentro da tag body, primeiro, precisamos criar a tag profunda onde exibiremos o gráfico de bolhas Para isso, aqui vou definir uma tag profunda com gráfico de bolhas de ID, e definimos com 800 pixels e altura de 600 pixels Agora, dentro da tag do script, primeiro, vou definir os dados de amostra. Para os dados de amostra, primeiro vou definir os nomes dos países na matriz, então digite onde o país é igual a EUA, China, Índia, Japão e Alemanha. Esses são os cinco grandes países de acordo com seu PIB e população. Em seguida, de acordo com o nome do país, vou definir seu PIB em bilhões de dólares Para isso, vou definir outra variável onde o PIB, onde o PIB é igual para os EUA, 21.000 400 bilhões Para a China, 14.000 300 bilhões para a Índia, 2.000 900 bilhões, para o Japão, 5.000 100 bilhões e para a Alemanha, 3.000 800 Aqui definimos seu PIB em bilhões de toneladas. Da mesma forma, vou definir sua expectativa de vida na mesma ordem Tipo em que a expectativa de vida é igual à dos EUA, 79 anos para a China, 76 anos para a Índia, 69 anos para o Japão, 84 e para a Alemanha 81 Além disso, vou definir a população em milhões. Então, vou seguir a mesma ordem Sontai era população, 331 milhões para os EUA e 1.441 para a China, 1.384, Índia, 126 para 1.384, Índia, 126 Esses são os nomes dos países, e vou mostrar seu PIB na direção da SS. E em nossa direção ao XS, vou mostrar a expectativa de vida E no tamanho da bolha, vou mostrar a população Então, como você sabe, vamos mostrar a população em tamanho de bolha, mas você pode ver em números, eles são dois bicos, então você precisa reduzi-la Para isso, vou definir outro tamanho de bolha variável Vou definir onde o tamanho da bolha igual ao método de mapa de pontos da população Dentro dos rundres aqui, p representa a população População igual a maior que P dividida por dois. Agora, o que isso significa? O que vai voltar. No início, você tenta entender que uma grande população cria uma bolha enorme e é muito difícil de ver Você reduz cada população dividindo por dois e, como você sabe, método map aplica a função a cada elemento dessa matriz O método de mapeamento funciona com matriz. Você não precisa executar um loop para isso. Por exemplo, a China tem 1.000 441 milhões de pessoas. Se dividirmos a China por dois, ela se tornará 720. Então, exatamente esse valor que vamos usar para essa bolha. Em seguida, precisamos criar um conjunto de gráficos. Pelo menos um conjunto de gráficos. Precisamos criar o traçado da trama. Para isso, precisamos criar um objeto, e nosso nome de objeto é trace, onde trace é igual a dentro do Css. Dentro do *****, primeiro, vou definir o X xs XXxS em nosso xs, quero exibir Quero exibir o PIB do país, digite essa variável chamada PIB Então, em nossos xs, eu quero representar a expectativa de vida Vírgula, então eu vou definir o modo. Modo. Para mais informações aqui, vou digitar marcador. Em vez dos códigos duplos, sou marcadores de texto. Então. Em seguida, vou definir texto, texto e, para o texto, vou passar os nomes dos países. Então, dentro desse objeto, vou definir outro objeto, e o nome do nosso objeto é marcador. Digite marcador, marcador dentro dos dois pontos dentro da lista. Primeiro, vou definir o tamanho do marcador. Tamanho do marcador, vou definir o tipo de tamanho da bolha, tamanho, tamanho, tamanho da bolha Depois disso, vou definir o modo de tamanho, a área do modo de tamanho. Em seguida, vou definir referência de tamanho, referência tamanho, tamanho f, referência de tamanho, quero 2,2 0,0. Em seguida, vírgula. Depois disso, vou definir cor, cor , cor por cor. Em cores, vou passar a variável de populações, população. Depois disso, precisamos definir a escala de cores, alguns tipos de variedades de escala de cores. Então mostre a escala, mostre a escala, eu vou tornar isso realidade. Então eu vou para ponto-e-corão para qualquer linha. Eu crio o objeto. Aqui, criamos um traço. Um traço significa um conjunto de dados para o gráfico. Então, crie o traço, precisamos criar outro objeto para o layout. Aqui eu defino e nossa variável é layout. Layout igual ao interior do calor. Em vez dos escultores, vou passar o título. Gráfico de bolhas do título, PIB versus expectativa de vida e população Em seguida, precisamos definir o título Xs. Em nosso título XX aqui, vou digitar XX, título PIB em bilhões de dólares. Depois disso, vou definir o yxSTit. Expectativa de vida do título YX em anos. Em seguida, precisamos criar De plot. Então eu digito plotly plot dot u plot type dot plot. Em seguida, dentro da rotunda, dentro do antigo campo, o nome do nosso enredo é gráfico de bolhas Bolha, trama. Em seguida, precisamos passar o primeiro rastreamento e o layout. Tres significa os dados. Trace significa os dados que eu quero mostrar nesse gráfico e o layout, o design do layout. Vou definir esse arquivo, mas antes de definir esse arquivo, precisamos fazer P em maiúsculo Plotly E eu vou configurar esse arquivo novamente. Depois de configurar esse arquivo, volto ao meu navegador, e é assim que nosso gráfico se parece. Em XXs, mostra o PIB. No YXS, mostra a expectativa de vida. E no tamanho da nossa bolha , mostra a população Além disso, a cor da bolha representa a população. Então eu passo o mouse, se eu passar o mouse sobre ele, como você pode ver, ele exibe primeiro o tamanho do GDB, e o tamanho do GDV é de 2000 e 900 Também mostra a expectativa de vida. Como na Índia, a expectativa de vida é 69 anos e também exibe o nome do país Índia Então vem a Alemanha. Se eu passar o mouse sobre ele, a expectativa de vida é 81. E na parte inferior, também exibe o PIB com dedução XX, 3.800 bilhões Depois vem o Japão. O tamanho do PIB é de 5.100 bilhões Aqui você pode observar o tamanho da bolha. Em comparação com a China e a Índia, é muito pequeno porque, para o Japão, população é de apenas 126 milhões. Esses vêm da China. A expectativa de vida é de 76 anos. E o tamanho do PIB é de 14.000 300 bilhões. Você pode notar o tamanho da bolha. É maior do que tudo isso. É maior que a Índia, EUA, Alemanha e Japão. E, finalmente, temos os EUA. A expectativa de vida é de 79 anos e o tamanho do GDB é de 21,4000 bilhões Aqui você pode notar uma cor diferente da bolha. Para a Alemanha, a cor da bolha é roxa. Para a China, a cor da bolha é pura YuluF. Em outros países, Com essa escala de cores, como definimos o tamanho da população. Na China, temos 1,4 bilhão de pessoas. Na Índia, temos 1,38 bilhão de pessoas. Para os EUA, são 33 milhões, nessa posição, para a Alemanha , são 83 milhões na posição final. É por isso que é mais roxo. É o vídeo mais baixo. Quero dizer que podemos definir a população com o tamanho da bolha, também com a cor Isso é exatamente o que podemos fazer com o bubble hack. Esse é um dos exemplos. No próximo exemplo, vou dar outra demonstração. Fique ligado no próximo exemplo. Obrigado por assistir a este vídeo.