D3 moving average

Im novo para D3 e tentando fazer uma média móvel de valores anteriores e próximos em meus dados, a fim de suavizar-lo. Atualmente, eu tenho que trabalhar usando os 2 valores anteriores do valor atual. Ele funciona mas 1) como eu também usaria os próximos valores, e 2) o que se eu quisesse usar os 15 valores anteriores e 15 próximos (seria louco ter 30 vars individuais para armazenar todos eles) Eu costumava Javascript tradicional, mas perdeu como a forma de percorrer os dados desta forma em D3. Espero que alguém possa me iluminar, obrigado. Ou apenas o código de análise de dados aqui: Um componente Bollinger Bands para gráficos D3 No meu último artigo (na linha de componentes de anotação para gráficos D3), eu criei um componente que calculou e exibiu uma média móvel. Como prometido, agora estou voltando minha atenção para Bandas de Bollinger. O componente que vou criar vai ficar assim: Como antes, eu vou enganar tomando o gráfico Toms desenvolvido em seu artigo sobre OHLC e componentes candlestick. E estou criando o componente seguinte convenção de Mike Bostocks. O que são Bandas Bollinger Que bom que você perguntou. Em poucas palavras, Bandas Bollinger são usados ​​em gráficos financeiros para indicar a volatilidade dos preços. Como você pode ver a partir do gráfico acima, eles consistem em três componentes: As bandas superior e inferior são um número de desvios padrão longe da média móvel - e note que aqui estavam falando sobre um desvio padrão em movimento. A partir desta definição, podemos ver que precisamos de dois parâmetros para os nossos cálculos - o período de média móvel. Para o qual é tipicamente utilizado um valor de 20, e o número de desvios-padrão. Que é tipicamente 2. Bollinger Bandas Componente Heres o código completo para o Bollinger Bandas componente - Ill passar por ele abaixo e explicar o que está acontecendo. Isso é uma quantidade decente de código, por isso vamos começar no topo, olhando para as propriedades Ive definido neste componente - você verá que eu os quebrei em seções, então não temos um bloco monolítico de declarações na parte superior do arquivo. Primeiro temos as escalas X e Y, que o componente precisa quando está trabalhando onde desenhar as coisas. Em seguida, temos os campos que precisamos para realizar nossos cálculos - o campo a ser usado no modelo de dados, o período de média móvel e o número de desvios padrão a serem utilizados. Observe que foram defaulting o período de média móvel para 20 eo número de desvios padrão para 2, os valores típicos para esses campos. Finalmente, temos um número de propriedades que definem classes CSS para as várias partes do componente. Isso fornece ao usuário um monte de customisability quando se trata de estilo, mas definimos valores padrão para que o usuário não tem que especificar essas propriedades. Na função componente criamos uma área d3.svg. area para representar a área entre as bandas superior e inferior e três objetos d3.svg. line para representar a banda superior, faixa inferior e linha média móvel, definindo seus valores X adequadamente. Estou usando o elemento de área porque thats um realmente agradável, built-in maneira de mostrar a área entre duas linhas. A melhor parte é, é realmente simples de usar - onde um elemento de linha exige que você defina seu valor Y, um elemento de área tem dois valores Y - e estou muito a favor de tornar a vida mais fácil para mim. Na próxima seção, definimos duas funções para calcular a média móvel e o desvio padrão em movimento. Observe que as Bandas de Bollinger usam a versão de população da fórmula de desvio padrão. Dentro do bloco de selection. each é onde nós fazemos nosso levantamento pesado - ajustando os valores de Y de nossos vários elementos de SVG. Declaramos uma variável vazia, bollingerData. Em seguida, preenchê-lo com dados - é um mapa de data para avg (média móvel) e sd (desvio padrão) para cada item de dados. Fazemos isso uma vez, o que é massivamente mais eficiente do que seria se fizéssemos todos esses cálculos de imediato. Por outro lado, isso significa fazer esses cálculos toda vez que o componente é redesenhado, se quiséssemos ser maximamente eficientes. Mas isso também exigiria que verificássemos que os dados não haviam mudado toda vez que precisávamos redigir, o que traz seus próprios problemas. O restante do bloco selection. each é longo, mas bastante simples - foram apenas definir os valores Y para a nossa área e elementos de linha com base nos dados no mapa bollingerData. Finalmente, adicionamos as bandas de área. Lineup. LineLower e LineAverage elementos SVG para o caminho. Observe que não definimos a totalidade da matriz de dados nesses elementos - Bollinger Bands normalmente não são mostrados quando não há dados suficientes para calcular a média móvel completa, então começamos a index movingAverage. Que tem o efeito desejado. Ive não mostrou os vários get / set acessadores porque theyre não especialmente interessante, como theyre praticamente todos os mesmos: Adicionando o componente para o gráfico OK, isso é o pouco complicado fora do caminho, então agora vamos usar este novo componente Bollinger Bands. Primeiro criamos e configuramos o nosso componente: Aqui estávamos dizendo ao componente sobre as escalas X e Y e dizendo para usar a propriedade close no modelo de dados. As propriedades movingAverage e standardDeviations são opcionais (especialmente porque estavam apenas definindo-as para seus valores padrão aqui, mas você precisaria incluí-las se você quisesse algo não padrão). Podemos também definir qualquer uma das quatro propriedades CSS que o componente expõe, mas Ive optou por omiti-los aqui e apenas deixá-los com seus valores padrão. Com isso feito, adicionamos o componente ao gráfico: Pro dica: Estou colocando este código apenas na frente do código para exibir os dados do gráfico em si, de modo que as Bandas Bollinger será no plano de fundo e os dados do gráfico será no primeiro plano. Styling Obviamente, o último passo é criar um estilo nas várias seções do componente. Ive escolheu para exibir o Bollinger Bandas em cinza, então Im usando um cinza claro para a área entre as bandas superior e inferior e um cinza mais escuro para as bandas próprias (você poderia usar transparência para tornar a área mais leve). Como um aparte, note que Ive definir traço-largura: 0 na área para que ele não mostra quaisquer fronteiras. Eu fiz isso por duas razões. Em primeiro lugar, estavam desenhando sobre as fronteiras superior e inferior de qualquer maneira, e em segundo lugar não queremos uma borda esquerda ou direita a ser mostrado - tente remover esta linha e você verá o que quero dizer. Juntando tudo, este é o resultado: Melhorias Im bastante feliz com este componente - ele funciona muito bem e seu razoavelmente eficiente, programaticamente. Há ainda algumas melhorias que poderíamos fazer embora. Se você ler através da entrada Wikipedia em Bollinger Bands você verá que estavam usando um cálculo de média móvel simples, mas que outros tipos de cálculo às vezes são usados, poderíamos estender nosso componente para permitir que o usuário escolha fornecendo uma propriedade adicional como. movingAverageType Exponencial). Conclusão Neste artigo Ive tomou a média móvel componente desenvolvi no meu artigo anterior e usado como base para um componente Bollinger Bands. O novo componente é muito fácil de configurar e estilo. Na prática, a média móvel fornecerá uma boa estimativa da média da série temporal se a média for constante ou mudar lentamente. No caso de uma média constante, o maior valor de m dará as melhores estimativas da média subjacente. Um período de observação mais longo medirá os efeitos da variabilidade. O objetivo de fornecer um m menor é permitir que a previsão responda a uma mudança no processo subjacente. Para ilustrar, propomos um conjunto de dados que incorpora mudanças na média subjacente das séries temporais. A figura mostra a série de tempo usada para ilustração juntamente com a demanda média a partir da qual a série foi gerada. A média começa como uma constante em 10. Começando no tempo 21, ele aumenta em uma unidade em cada período até atingir o valor de 20 no tempo 30. Então ele se torna constante novamente. Os dados são simulados adicionando à média um ruído aleatório de uma distribuição Normal com média zero e desvio padrão 3. Os resultados da simulação são arredondados para o número inteiro mais próximo. A tabela mostra as observações simuladas usadas para o exemplo. Quando usamos a tabela, devemos lembrar que a qualquer momento, apenas os dados passados ​​são conhecidos. As estimativas do parâmetro do modelo, para três valores diferentes de m, são mostradas juntamente com a média das séries temporais na figura abaixo. A figura mostra a estimativa média móvel da média em cada momento e não a previsão. As previsões mudariam as curvas da média móvel para a direita por períodos. Uma conclusão é imediatamente aparente a partir da figura. Para as três estimativas, a média móvel está aquém da tendência linear, com o atraso aumentando com m. O atraso é a distância entre o modelo ea estimativa na dimensão temporal. Devido ao atraso, a média móvel subestima as observações à medida que a média está aumentando. O viés do estimador é a diferença em um tempo específico no valor médio do modelo eo valor médio predito pela média móvel. O viés quando a média está aumentando é negativo. Para uma média decrescente, o viés é positivo. O atraso no tempo e o viés introduzido na estimativa são funções de m. Quanto maior o valor de m. Maior a magnitude do atraso e do viés. Para uma série de crescimento contínuo com tendência a. Os valores de lag e viés do estimador da média são dados nas equações abaixo. As curvas de exemplo não correspondem a essas equações porque o modelo de exemplo não está aumentando continuamente, em vez disso, ele começa como uma constante, muda para uma tendência e, em seguida, torna-se constante novamente. Também as curvas de exemplo são afetadas pelo ruído. A previsão média móvel de períodos no futuro é representada deslocando as curvas para a direita. O atraso e o viés aumentam proporcionalmente. As equações abaixo indicam o atraso e o viés de um período de previsão para o futuro quando comparado aos parâmetros do modelo. Novamente, estas fórmulas são para uma série de tempo com uma tendência linear constante. Não devemos nos surpreender com esse resultado. O estimador da média móvel baseia-se no pressuposto de uma média constante, eo exemplo tem uma tendência linear na média durante uma parte do período do estudo. Como as séries de tempo real raramente obedecerão exatamente aos pressupostos de qualquer modelo, devemos estar preparados para tais resultados. Podemos também concluir a partir da figura que a variabilidade do ruído tem o maior efeito para m menor. A estimativa é muito mais volátil para a média móvel de 5 do que a média móvel de 20. Temos os desejos conflitantes de aumentar m para reduzir o efeito da variabilidade devido ao ruído e diminuir m para tornar a previsão mais sensível às mudanças Em média O erro é a diferença entre os dados reais e o valor previsto. Se a série temporal é verdadeiramente um valor constante, o valor esperado do erro é zero ea variância do erro é composta por um termo que é uma função de e um segundo termo que é a variância do ruído. O primeiro termo é a variância da média estimada com uma amostra de m observações, assumindo que os dados provêm de uma população com média constante. Este termo é minimizado fazendo-se o maior possível. Um grande m faz com que a previsão não responda a uma mudança nas séries temporais subjacentes. Para tornar a previsão responsiva às mudanças, queremos que m seja o menor possível (1), mas isso aumenta a variância do erro. A previsão prática requer um valor intermediário. Previsão com o Excel O suplemento de Previsão implementa as fórmulas de média móvel. O exemplo abaixo mostra a análise fornecida pelo add-in para os dados da amostra na coluna B. As primeiras 10 observações são indexadas -9 a 0. Em comparação com a tabela acima, os índices de período são deslocados por -10. As primeiras dez observações fornecem os valores de inicialização para a estimativa e são usados ​​para calcular a média móvel para o período 0. A coluna MA (10) (C) mostra as médias móveis calculadas. O parâmetro de média móvel m está na célula C3. A coluna Fore (1) (D) mostra uma previsão para um período no futuro. O intervalo de previsão está na célula D3. Quando o intervalo de previsão é alterado para um número maior, os números na coluna Fore são deslocados para baixo. A coluna Err (1) (E) mostra a diferença entre a observação e a previsão. Por exemplo, a observação no tempo 1 é 6. O valor previsto a partir da média móvel no tempo 0 é 11.1. O erro é então -5.1. O desvio padrão eo desvio médio médio (MAD) são calculados nas células E6 e E7, respectivamente. Calculando a média móvel no Excel Neste tutorial breve, você aprenderá a calcular rapidamente uma média móvel simples no Excel, quais funções usar para se mover Média dos últimos N dias, semanas, meses ou anos e como adicionar uma linha de tendência de média móvel a um gráfico do Excel. Em alguns artigos recentes, nós demos uma olhada no cálculo da média no Excel. Se você está seguindo nosso blog, você já sabe como calcular uma média normal e quais funções usar para encontrar a média ponderada. No tutorial de hoje, vamos discutir duas técnicas básicas para calcular a média móvel no Excel. O que é a média móvel De um modo geral, a média móvel (também referida como média móvel, média móvel ou média móvel) pode ser definida como uma série de médias para diferentes subconjuntos do mesmo conjunto de dados. É freqüentemente usado em estatísticas, previsões econômicas e meteorológicas ajustadas sazonalmente para entender as tendências subjacentes. Na negociação de ações, média móvel é um indicador que mostra o valor médio de um título ao longo de um determinado período de tempo. Nos negócios, é uma prática comum para calcular uma média móvel de vendas para os últimos 3 meses para determinar a tendência recente. Por exemplo, a média móvel das temperaturas de três meses pode ser calculada tomando a média das temperaturas de janeiro a março, depois a média das temperaturas de fevereiro a abril, depois de março a maio, e assim por diante. Existem diferentes tipos de média móvel, como simples (também conhecido como aritmética), exponencial, variável, triangular e ponderada. Neste tutorial, estaremos analisando a média móvel mais comumente utilizada. Calculando a média móvel simples no Excel No geral, existem duas maneiras de obter uma média móvel simples no Excel - usando fórmulas e opções de linha de tendência. Os exemplos seguintes demonstram ambas as técnicas. Exemplo 1. Calcular a média móvel para um determinado período de tempo Uma média móvel simples pode ser calculada em nenhum momento com a função MÉDIA. Suponha que você tenha uma lista de temperaturas médias mensais na coluna B e queira encontrar uma média móvel de 3 meses (como mostrado na imagem acima). Escreva uma fórmula média usual para os primeiros 3 valores e insira-a na linha correspondente ao 3º valor da parte superior (célula C4 neste exemplo) e, em seguida, copie a fórmula para outras células da coluna: Coluna com uma referência absoluta (como B2) se você desejar, mas não se esqueça de usar referências de linha relativa (sem o sinal) para que a fórmula ajusta corretamente para outras células. Lembrando que uma média é calculada adicionando valores e dividindo a soma pelo número de valores a serem calculados, você pode verificar o resultado usando a fórmula SUM: Exemplo 2. Obter média móvel para os últimos N dias / semanas / Meses / anos em uma coluna Supondo que você tenha uma lista de dados, por exemplo Venda ou cotações de ações, e você quer saber a média dos últimos 3 meses em qualquer ponto do tempo. Para isso, você precisa de uma fórmula que recalcule a média assim que você digitar um valor para o próximo mês. Qual função do Excel é capaz de fazer isso O bom AVERAGE antigo em combinação com OFFSET e COUNT. MÉDIA (OFFSET (NÚMERO DE COUNT (NÚMERO COMPLETO) - N, 0, N, 1)) Onde N é o número dos últimos dias / semanas / meses / anos a incluir na média. Não sei como usar essa fórmula de média móvel em planilhas do Excel O exemplo a seguir tornará as coisas mais claras. Supondo que os valores para a média estão na coluna B começando na linha 2, a fórmula seria a seguinte: E agora, vamos tentar entender o que esta fórmula de média móvel Excel está realmente fazendo. A COUNT função COUNT (B2: B100) conta quantos valores já estão inseridos na coluna B. Começamos a contar em B2 porque a linha 1 é o cabeçalho da coluna. A função OFFSET leva a célula B2 (o primeiro argumento) como ponto de partida e desloca a contagem (o valor retornado pela função COUNT) movendo 3 linhas para cima (-3 no 2º argumento). Como resultado, retorna a soma de valores em um intervalo composto por 3 linhas (3 no 4 º argumento) e 1 coluna (1 no último argumento), que é o mais tardar 3 meses que queremos. Finalmente, a soma retornada é passada para a função MÉDIA para calcular a média móvel. Dica. Se estiver trabalhando com planilhas continuamente atualizáveis ​​onde novas linhas provavelmente serão adicionadas no futuro, forneça um número suficiente de linhas à função COUNT para acomodar novas entradas possíveis. Não é um problema se você incluir mais linhas do que realmente necessário contanto que você tenha a primeira célula direita, a função COUNT irá descartar todas as linhas vazias de qualquer maneira. Como você provavelmente notou, a tabela neste exemplo contém dados para apenas 12 meses, e ainda o intervalo B2: B100 é fornecido para COUNT, apenas para estar no lado de salvar :) Exemplo 3. Obter média móvel para os últimos valores de N em Uma linha Se você deseja calcular uma média móvel para os últimos N dias, meses, anos, etc. na mesma linha, você pode ajustar a fórmula Offset desta maneira: Supondo que B2 é o primeiro número na linha e você quer Para incluir os últimos 3 números na média, a fórmula tem a seguinte forma: Criando um gráfico de média móvel do Excel Se você já criou um gráfico para seus dados, adicionar uma linha de tendência de média móvel para esse gráfico é uma questão de segundos. Para isso, vamos usar o recurso Excel Trendline e seguir as etapas detalhadas abaixo. Para este exemplo, criei um gráfico de colunas em 2D (grupo Inserir guia gt Gráficos) para nossos dados de vendas: E agora, queremos visualizar a média móvel por 3 meses. No Excel 2010 e no Excel 2007, vá para Layout gt Trendline gt Mais opções de tendência. Dica. Se você não precisa especificar os detalhes, como o intervalo de média móvel ou os nomes, você pode clicar em Design gt Adicionar elemento gráfico gt Trendline gt Média móvel para o resultado imediato. O painel Format Trendline será aberto no lado direito da planilha no Excel 2017 ea caixa de diálogo correspondente será exibida no Excel 2010 e 2007. Para refinar o bate-papo, você pode alternar para a linha Fill amp ou a guia Effects no O painel Format Trendline e jogar com diferentes opções, como tipo de linha, cor, largura, etc. Para análise de dados poderosa, você pode querer adicionar algumas linhas de tendência de média móvel com intervalos de tempo diferentes para ver como a tendência evolui. A seguinte imagem mostra as linhas de tendência de média móvel de 2 meses (verde) e 3 meses (tijolo vermelho): Bem, isso é tudo sobre como calcular a média móvel no Excel. A planilha de exemplo com as fórmulas de média móvel e a linha de tendência está disponível para download - planilha de Moving Average. Agradeço a leitura e espero vê-lo na próxima semana Criando um gráfico do Yahoo Finance com D3 e d3fc A maioria das bibliotecas de gráficos são monólitos. Quanto mais recursos eles suportam, mais difíceis as APIs tendem a se tornar. Com o projeto d3fc estamos explorando uma abordagem alternativa, construindo gráficos a partir de um conjunto de pequenos componentes, usando a biblioteca D3. Neste post eu quero demonstrar o poder de ambos d3fc e D3, recriando o bastante complexo Yahoo Finance gráfico. Criar uma recreação pixel-perfeito deste gráfico com qualquer biblioteca de gráficos monolítica seria um desafio significativo (se não impossível). Com d3fc é surpreendentemente simples Este post tem uma abordagem passo a passo para demonstrar como o Yahoo Finance gráfico pode ser fielmente recriado. A renderização de um gráfico simples d3fc e sua dependência estão disponíveis via npm conforme detalhado nas instruções de instalação. D3fc cria gráficos usando SVG, então o primeiro passo é adicionar um elemento SVG para a página: Os dados do Yahoo Finance estão disponíveis como dados CSV através de uma API não suportada, mas amplamente utilizada. D3 tem um número de funções de utilidade para buscar e analisar dados, incluindo CSV. O código a seguir executa uma solicitação XHR via d3.csv: Uma vez que os dados foram buscados e analisados, a seguinte função renderChart é chamada: Olhando para este código em detalhes, a primeira etapa constrói um fc. chart. linearTimeSeries. Este é um componente de nível relativamente alto d3fc que processa um gráfico com um eixo de data horizontal e um eixo numérico vertical. Sua principal responsabilidade é construir um layout SVG que abrigue as várias partes do gráfico (eixos, área de enredo, etc). A função de utilitário fc. util. extent é usada para calcular as extensões (valores máximo e mínimo) de várias propriedades dos dados. Em seguida, é construída uma série de área d3fc, onde a propriedade de acessório yValue é usada para selecionar o valor aberto de cada ponto de dados. O acessador xValue padrão para a maioria dos componentes espera uma propriedade de data, que é o caso neste exemplo. O gráfico plotArea é definido para o componente de área de série, garantindo que a série de área tem as escalas corretas aplicadas a ele. Finalmente, o elemento SVG é selecionado usando d3.select. Os dados são vinculados eo componente de gráfico chamado na seleção. Se você já teve alguma experiência com D3, este padrão de construção deve ser bastante familiar para você. Os componentes d3fc seguem o padrão de componente D3. O código simples acima resulta no seguinte gráfico: Adicionando linhas de grade e linha Onde outras bibliotecas de gráficos podem representar linha, ponto e área como um tipo de série única, d3fc prefere uma abordagem de micro componente onde cada um é separado. Para este gráfico são necessárias uma área e uma série de linhas: As linhas de grade são outro componente d3fc: A área de gráfico do gráfico só aceita uma única série, no entanto várias instâncias de série (que têm escalas x e y) podem ser agrupadas usando uma série múltipla: Multi-series cria um elemento contendo g para cada uma das séries fornecidas, define suas escalas x e y e propaga os dados para cada um. Com linhas de grade, área e série de linhas adicionadas e alguns ajustes menores ao número de carrapatos, o gráfico se parece com o seguinte: Os componentes de styling d3fc são denominados via CSS. A maneira mais fácil de determinar os seletores CSS adequados para denominar um componente é apenas olhar para a saída renderizada. O gráfico do Yahoo tem um gradiente sutil que é aplicado à série de área. Os gradientes de SVG são (de modo bastante desajeitado) definidos em SVG da seguinte forma: Observe que chamar o componente linearTimeSeries no SVG acima não destrói o elemento defs. Os componentes d3fc são escritos de forma a identificar seus próprios elementos via classe CSS, permitindo que esses elementos vivam ao lado de outros dentro do mesmo container. Com alguns CSS simples, o gradiente e os estilos de linha podem ser aplicados ao gráfico. Infelizmente, não é possível re-posicionar etiquetas de eixo D3 via CSS. A única maneira de conseguir isso é renderizar o eixo e então usar uma seleção D3 para localizar as etiquetas e depois movê-las diretamente: Isto não é ideal, pois o código acima será executado sempre que os gráficos forem renderizados, independentemente de os eixos exigirem atualizações . Com este estilo no lugar o gráfico se parece com o seguinte: Adicionando uma média móvel d3fc tem um número de indicadores financeiros, estes algoritmos são aplicados diretamente aos dados do gráfico, com a implementação padrão adicionando novas propriedades aos dados (isso pode ser modificado por Fornecendo uma função de mesclagem personalizada). O seguinte calcula uma média móvel exponencial (EMA) com base no preço fechado: Para tornar um indicador, é necessário um processador adequado. Um EMA calcula um único valor para cada ponto de dados e é processado através de uma série de linhas regulares, mas para indicadores mais complexos (MACD, Bollinger) o d3fc fornece renderizadores dedicados. O código acima demonstra o padrão de decoração que pode ser encontrado na maioria dos componentes d3fc. Decore é passado uma seleção que é criada como resultado da junção de dados de componentes. Se você não estiver familiarizado com este conceito, Id recomendar Mikes Thinking With Join artigo. No código acima, a seleção fornecida para decorar é a seleção de atualização para o elemento raiz ra de componentes. A seleção de entrada é usada para adicionar uma classe ema a esse elemento. Observe que, usando a seleção de entrada, isso só é feito uma vez, no ponto em que o elemento é inicialmente construído. NOTA: Esta seleção de entrada não é exatamente a mesma obtida através de uma associação de dados padrão, neste caso a seleção de entrada já tem um elemento anexado. Você verá decorar sendo usado em alguns lugares neste exemplo, é um padrão poderoso e versátil. Com a série EMA adicionada à série multi, o gráfico parece o seguinte: Adicionando um gráfico de volume O gráfico do Yahoo Finance mostra o volume negociado na metade inferior da área de plotagem, este é um layout de gráficos financeiros bastante padrão. Para renderizar o gráfico de volume, é necessária uma escala y secundária, com o domínio baseado no volume de dados e o intervalo definido como metade da altura da área de plotagem. O linearTimeSeries não tem uma escala de volume como parte de seu layout, isso é algo que tem que ser adicionado manualmente. O linearTimeSeries usa o componente de layout d3fc, que implementou layout flexbox, por isso faz sentido usar isso para criar um contêiner para a série de volumes também. O seguinte cria um elemento g que atua como um contêiner para a série de volume: Ao invés de acrescentar um elemento g diretamente no contêiner, ele é anexado dentro de uma combinação de dados. Isso garante que apenas um único elemento é adicionado independentemente de quantas vezes a função renderChart é chamada. O exemplo acima é um layout relativamente simples, para um exemplo mais complexo pop para o site d3fc. Uma escala de volume é construída com um domínio baseado nos dados de entrada e um intervalo baseado na altura do recipiente de volume: Finalmente, uma série de volume é construída e processada: Isso resulta no seguinte gráfico: Colorindo as barras de volume O passo final em Este exemplo é para colorir cada barra do gráfico de volume com base em se o preço subiu ou caiu dentro do período de tempo representado pela barra dada. Mais uma vez decorar é empregado: Se você olhar para os elementos SVG construídos para uma série de barras você vai descobrir que cada barra é construída a partir de um elemento g que contém um único caminho. A função decore acima usa a seleção enter, que contém esses elementos g, seleciona o caminho aninhado e aplica uma cor de traçado adequada com base na direção do movimento do preço. Conclusão Neste blog você já viu como os componentes do d3fc podem ser montados, configurados e decorados para recriar um gráfico financeiro relativamente complexo, embora ainda não esteja completo. No próximo post, eu mostrarei como os componentes d3fc legend e crosshair podem ser adicionados para fornecer alguma interatividade e como criar um provedor de descontinuidade personalizado. Até lá, se você tiver alguma dúvida sobre d3fc ou este exemplo, entre em contato através do campo de comentários Abaixo, ou através do projeto GitHub. Atenciosamente, Colin E. Sou Diretor de Tecnologia na Scott Logic e sou um prolífico autor técnico, blogueiro e palestrante em uma variedade de tecnologias. Durante vários anos trabalhei com a pilha de tecnologias da Microsoft, incluindo WPF, WCF, Silverlight e Windows Phone. Mais recentemente, eu tenho diversificado para incluir HTML5, JavaScript e iOS desenvolvimento.