Introdução
Se houver 2 Tendências fundamentais que impulsionam o jornalismo digital, Seriam estes:
- Gere e capture mais dados sobre seus clientes.
- Maior penetração na web (ou móvel) Entre os clientes e a necessidade de contar histórias de dados através da Web.
É aqui que entra a D3.js. D3.js tornou-se o Santo Graal da visualização interativa de dados.
D3.js vs. outras alternativas
Acho que a popularidade do D3.js na fraternidade de ciência de dados está fora de sincronia com seu verdadeiro potencial. A principal razão é que você precisa de um conjunto de habilidades diferente (como um exemplo, HTML, Conhecimento de CSS e JavaScript) do que a maioria das ferramentas convencionais para ciência de dados ou aprendizado de máquina. Ao mesmo tempo, há ferramentas prontamente disponíveis, como QlikView e Tableau, que fornecem esse recurso.
Apesar disto, Quando você quiser painéis de controle / Histórias de dados personalizadas entregues na Web a baixo custo, D3.js é uma das melhores ferramentas disponíveis. E é por isso que acreditamos na criação desse caminho de aprendizagem.
Projetamos um caminho de aprendizado amigável para iniciantes abaixo. Se você acha intimidante no início:, não se preocupe, Isso é natural. Mas, Se você promete dar seu primeiro passo em D3.js, Prometemos que o ajudaremos constantemente a superar sucessivos obstáculos.
Observação: Este caminho de aprendizagem foi projetado assumindo que você é um novato em linguagens de codificação e desenvolvimento web (HTML / CSS e JavaScript). Se você já os conhece, Você pode ignorar as seções correspondentes.
O que é D3.js?
Documentos orientados por dados (D3) é uma biblioteca JavaScript de código aberto usada para criar visualizações dinâmicas e interativas habilitadas em um navegador da Web moderno. Funciona principalmente com HTML, Svg, CSS e JavaScript. Foi criado por Maurício Bostock, Cientista da computação e especialista em visualização de dados (Em imagem).
D3.js é extremamente rápido, Responsivo e também suporta grandes conjuntos de dados para criar animações dinâmicas em navegadores da Web. Coleção de plugins úteis e componentes de codificação torna os códigos d3 reutilizáveis.
Dica para iniciantes: Se você é um iniciante, pode ser confundida entre a linguagem de programação Java e a linguagem de script JavaScript. Filho 2 Idiomas absolutamente independentes. Java é usado principalmente para desenvolvimento de software e aplicações, enquanto o JavaScript é usado para criar páginas da Web interativas.
Paso 0: Motivação – Por que aprender D3.js?
Eu realmente acredito nele Círculo Dourado explicado por Simon Sinek. Ele diz, Se você está apenas começando com algo, Comece com “Por que”?
Antes de iniciar sua jornada, Você deve ter uma resposta para esta pergunta:
Por que eu deveria aprender D3.js?
o
Como D3.js vai me ajudar?
Deixe-me ajudá-lo a encontrar sua resposta. Veja isso Palestra Scott Murray, Autor de Visualização Interativa de Dados para a Web, Para entender o verdadeiro poder da criação de visualizações habilitadas para a Web.
5 Exemplos do mundo real
Isso é essencial. Deixe-me mostrar algumas das visualizações que são criadas com d3. Você não precisa analisar essas visualizações, Mas você tem inspiração e vontade de criar um.
- Greve da polícia em janeiro 2012 em Nova Iorque
- Processo de Markov
- Introdução Visual ao Machine Learning
- Autódromo leva à vitória
- Conexões entre os candidatos ao Oscar
Eu sugiro fortemente que você passe algum tempo em cada uma dessas páginas, interagindo com os itens dessas páginas. Você começará a ver o poder do que D3.js pode lhe oferecer!
Percorrer Mais de 600 exemplos em D3.
Relevância da visualização de dados
Se você conferiu os exemplos acima, Tenho certeza de que não preciso enfatizar a relevância de visualizar os dados. Você sabe o quanto os dados podem falar por si. Como cientista de dados, Seu verdadeiro motivo deve ser explicar o modelo para as partes interessadas. A verdadeira coisa vem na apresentação de dados para partes interessadas não analíticas. Eles não querem números, mas uma história muito bem trabalhada com números. Se você pode executar esta tarefa com D3, Excelente trabalho.
Paso 1: Aprenda o básico: HTML, CSS, Svg, Javascript
Apagar seus conceitos básicos de codificação primeiro. Se você não tem conhecimento prévio de codificação, Comece com HTML e CSS curso Codecademia. É um curso interativo e o melhor lugar para começar.
Depois de terminar com HTML e CSS, Prossiga para aprender os argumentos de Javascript. Você pode fazer o curso de Javascript a partir de Codecademia O que mais.
Você também pode consultar Beliscar da Assembleia Geral para aprender HTML, CSS e JavaScript interativamente. Depois de terminar de usar o Javascript, Prossiga para jQuery. Mantenha-se fiel codecenia Mais uma vez. É um curso curto. Mas, muito útil para D3.
Por último, você precisa Gráficos vetoriais escaláveis (Svg). Ele desempenha um papel vital na criação de várias formas integradas em uma visualização d3. Para isto, Você pode acompanhar isso tutorial por W3Schools.
Neste momento, Você deve ser capaz de criar páginas da Web interativas básicas. Agora é hora de colocar a experiência prática.
Coloque suas habilidades à prova: Para testar seus conhecimentos de HTML, CSS, Javascript, Faça isso exercício de criação de projetos web. Isso deve ajudá-lo a ganhar confiança na codificação.
Adicional: Se você ainda se sente profundamente imerso nesses argumentos, Tome isso Curso completo por Freecodecamp. Se você concluir com sucesso todos os níveis deste curso, Você está mais do que pronto para passar para a próxima etapa.
Paso 2: descargar, Instalar e executar D3.js
Agora você precisa instalar um editor de texto onde você pode codificar. Este é um fator crucial. Selecionar um bom editor de texto fornece um verdadeiro impulso e emoção para o código. Eu uso, Eu prefiro e recomendo Sublime Text. É um editor de código aberto, Rápido e fácil de usar. Ele suporta muitos plugins úteis e opções de personalização para tornar a experiência de codificação incrível.
Depois de instalar um editor de texto, O próximo passo é baixar e instalar a biblioteca d3.js, o que também é bastante simples.
Você pode baixar o arquivo zip d3 completo de aqui. Crie uma pasta em sua máquina local e descompacte-a. Você encontrará os arquivos javascript nomeados d3.js e d3.min.js.
Para carregar a biblioteca d3 no editor de texto, Você pode fazer isso de várias maneiras, seja da sua máquina local ou da sua origem. Não se esqueça de adicionar este script no
:<!--Carregar D3 do site de origem--> <script src="http://d3js.org/d3.v3.min.js"></roteiro> <!--Carregar D3 da máquina local--> <tipo de script="texto/javascript" src="https://www.analyticsvidhya.com/learning-paths-data-science-business-analytics-business-intelligence-big-data/newbie-d3-js-expert-complete-path-create-interactive-visualization-d3-js/d3.min.js"></roteiro>
Paso 3: Introdução ao D3 – Primeiro exemplo
A seguir, Você deve trabalhar durante todo o Capítulo 1b do curso de Udacity. Apresente os conceitos de D3 através de um exemplo simples. Depois de trabalhar com um exemplo básico, Você pode ver mais detalhes sobre como criar itens controlados por dados.
Você pode olhar para qualquer um:
- Capítulo 7 – Capítulo 20 a partir de arrojado3 tutoriais; o
- Capítulo 4 – Capítulo 17 Do livro de Scott Murray
Ambos cobrem vários aspectos do d3 em detalhes, Supondo que você tenha conhecimento prévio de HTML, css, javascript.
Paso 4: Tempo de Prática
A estas alturas, Eu deveria ter adquirido um conhecimento prático de D3. Agora você deve se sentir confortável codificando usando essas diferentes linguagens. Vamos agora praticar algumas técnicas básicas de visualização que você aprendeu nas etapas anteriores.
A ideia por trás desses exemplos é fazer você praticar. Não verifique o código em primeiro lugar. Experimente você mesmo primeiro. Depois de, Verifique a resposta se você ficar preso.
Exemplo 1: Criar um gráfico circular
<!HTML DOCTYPE>
<html>
<cabeça>
<título>Caminho com Linha</título>
<tipo de script="texto/javascript" src="https://www.analyticsvidhya.com/learning-paths-data-science-business-analytics-business-intelligence-big-data/newbie-d3-js-expert-complete-path-create-interactive-visualization-d3-js/d3.min.js"></roteiro>
</cabeça>
<corpo>
<roteiro>
dados var = [20, 50, 80];
var r = 150;
var canvas = d3.selecione("corpo").acrescentar("SVG")
.atr("largura", 1500)
.atr("altura", 1500); cor var = d3.scale.ordinal()
.faixa(["laranja", "vermelho", "verde"]); grupo var = canvas.append("g")
.atr("Transformar", "Traduzir(200, 200)"); arco var = d3.svg.arc()
.innerRadius(80)
.outerRadius(r); var pie = d3.layout.pie()
.valor ( função(d) { retorno d; }); arcos var = group.selectAll(".arco")
.dados(torta(dados))
.digitar()
.acrescentar("g")
.atr("classe", "arco"); arcos.apêndice("caminho")
.atr("d", arco)
.atr("encher", função(d) { cor de retorno(d.dados)}); arcos.apêndice("texto")
.atr("Transformar", função(d) { Retorna "Traduzir(" + arc.centroide(d) + ")"; })
.atr("âncora de texto", "meio")
.atr("tamanho da fonte", "1.5eme")
.texto(função(d) { retornar d.data; });</roteiro> </corpo> </html>
Produção: Parece que está assim.:
Exemplo 2: crear un gráfico de barras animado |
<!HTML DOCTYPE>
<html>
<cabeça>
<tipo de script="texto/javascript" src="https://www.analyticsvidhya.com/learning-paths-data-science-business-analytics-business-intelligence-big-data/newbie-d3-js-expert-complete-path-create-interactive-visualization-d3-js/d3.min.js"></roteiro>
</cabeça>
<corpo>
<classe div="recipiente">
<h2>Gráfico de barras animado</h2>
<div id="gráfico"></Div>
</Div>
<roteiro>
var bardata = [];
para (var i=0; eu<50; i++){
bardata.empurrar(Math.round(Matemática.aleatório()*30))
}
bardata.classificar(função compareNumbers(uma,b){
Retorno A-B;
})
margem var = { principal: 30, direito: 30, fundo: 40, deixou: 50}
var altura = 400 - margin.top - margem.fundo,
largura = 600 - margin.direita - margem.esquerda,
barWidth = 50,
barOffset = 5;
var tempColor;
dica de ferramenta var = d3.select('Corpo').acrescentar('div')
.estilo('Posição', 'Absoluto')
.estilo('preenchimento', '0 10px')
.estilo('Antecedentes', 'Branco')
.estilo('Opacidade', 0)
var yScale = d3.escala.linear()
.domínio([0, d3.max(bardata)])
.faixa([0, altura])
var xScale = d3.scale.ordinal()
.domínio(d3.intervalo(0,bardata.comprimento))
.gamaBandas([0,largura], .3)
cor var = d3.scale.linear()
.domínio([0, bardata.length*.63, bardata.comprimento])
.faixa(['#ffb832','#c61c6f','#d33682'])
var myChart = d3.selecione('#chart').acrescentar('SVG')
.estilo('Antecedentes', '#e7e0cb')
.atr('largura', largura + margem.esquerda + margin.direita)
.atr('altura', altura + margin.top + margem.fundo)
.acrescentar('g')
.atr('Transformar','traduzir(' + margin.esquerda+','+ margin.top + ')')
.selecionarTudo('ret')
.dados(bardata)
.digitar()
.acrescentar('ret')
.estilo('Preencher', função(d,eu){
cor de retorno(eu);
})
.atr('largura', xScale.rangeBand())
.atr('x', função(d,eu){
retornar xScale(eu);
})
.atr('altura', 0)
.atr('e', altura)
.sobre('Passar o mouse', função(d){
dica de ferramenta.transição()
.estilo('Opacidade', 0.9)
tooltip.html(d)
.estilo('esquerda', (d3.event.pageX - 35)+'PX')
.estilo('top', (d3.event.pageY - 40)+'PX')
tempColor = this.style.fill;
d3.selecione(este)
.estilo('Opacidade', .5)
.estilo('Preencher', 'amarelo')
})
.sobre('Rato', função(d){
d3.selecione(este)
.estilo('Opacidade', 1)
.estilo('Preencher', tempCor)
})
myChart.transição()
.atr('altura', função(d){
retornar yScale(d);
})
.atr('e', função(d){
altura de retorno - yEscala(d);
})
.Atraso(função(d,eu){
Retorno i*20;
})
.duração(5000)
.Facilidade('Elástico')
var vGuideScale = d3.scale.linear()
.domínio([0, d3.max(bardata)])
.faixa([altura, 0])
var vAxis = d3.svg.eixo()
.escala(vGuideScale)
.oriente('esquerda')
.Carrapatos(10)
var vGuide = d3.selecione('SVG').acrescentar('g')
vAxis(vGuia)
vGuide.attr('Transformar','traduzir('+margem.esquerda+',' + margin.top + ')')
vGuide.selectAll('caminho')
.estilo({encher: 'Nenhum', derrame: '#000'})
vGuide.selectAll('Linha')
.estilo({derrame: '#000'})
var hAxis = d3.svg.eixo()
.escala(xEscala)
.oriente('Fundo')
.tickValores(xEscala.domínio().filtro(função(d,eu){
Retorna !(eu % (bardata.comprimento/5));
}))
var hGuide = d3.selecione('SVG').acrescentar('g')
hEixo(hGuia)
hGuide.attr('Transformar', 'traduzir('+margem.esquerda+',' + (altura + margin.top) + ')')
hGuide.selectAll('caminho')
.estilo({encher: 'Nenhum', derrame: '#000'})
hGuide.selectAll('Linha')
.estilo({derrame: '#000'})
</roteiro>
</corpo>
</html>Produção: Isto é gráfico de barrasO gráfico de barras é uma representação visual de dados que usa barras retangulares para mostrar comparações entre diferentes categorias. Cada barra representa um valor e seu comprimento é proporcional a ele. Esse tipo de gráfico é útil para visualizar e analisar tendências, facilitar a interpretação de informações quantitativas. É amplamente utilizado em várias disciplinas, como estatísticas, Marketing e pesquisa, devido à sua simplicidade e eficácia.... se parece a esto: Clique Aqui
Exemplo 3: Criar um contorno de mapa simples
Demonstrei este exemplo usando o mapa do bairro de Boston. A ideia é entender os argumentos da cartografia, sem mergulhar em coisas extravagantes.
<html>
<cabeça>
<título>Mapa básico D3</título>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></roteiro>
<script src="neighborhoods.js"></roteiro>
</cabeça>
<corpo>
<roteiro>
largura var = 700,
altura = 580;
var svg = d3.selecione( "corpo" )
.acrescentar( "SVG" )
.atr( "largura", largura )
.atr( "altura", altura );
var g = svg.append( "g" );
var albersProjeção = d3.geo.albers()
.escala( 190000 )
.girar( [71.057,0] )
.Centro( [0, 42.313] )
.Traduzir( [largura/2, altura/2] );
var geoPath = d3.geo.path()
.projeção( albersProjeção );
g.selectAll( "caminho" )
.dados( neighborhoods_json.características )
.digitar()
.acrescentar( "caminho" )
.atr( "encher", "#Ccc" )
.atr( "d", geoCaminho );
</roteiro>
</corpo>
</html>Produção: Este é o esboço do mapa do bairro de Boston:
Esses exemplos são apenas para aguçar o apetite. O jogo real começa com mapas geográficos animados. Quando você estiver confortável em criar essas visualizações elementares, Leve-o para o próximo nível. Para Mapas, D3 funciona melhor com os formatos Geojson e Topojson. Geojson é o arquivo de dados geográficos padrão. Mas, Topojson é considerado mais rápido e capaz de carregar grandes conjuntos de dados em tamanho pequeno (Dados compactados).
Outros recursos úteis
Aqui estão alguns recursos mais úteis que você pode achar úteis:
- Repositório Github de tutoriais de d3.js
- Conclua o curso Udacity em d3.js
- Melhor Tutorial do Youtube sobre d3.js
- Site Oficial D3
- D3 Dicas & Truques: eBook gratuito
Ainda assim, se você acha D3 difícil de aprender, Sinta-se à vontade para compartilhar seus problemas na seção de comentários abaixo.
