Skip to content

Instantly share code, notes, and snippets.

@filipinascimento

filipinascimento/index.html

Last active September 30, 2015 04:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save filipinascimento/fa8ed45eb3944e0fa510 to your computer and use it in GitHub Desktop.
Save filipinascimento/fa8ed45eb3944e0fa510 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
body {
padding:0px;
padding-top:2px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<body>
<script src="introducaod3js.js"></script>
</body>
</html>
Raw
introducaod3js.js
var pessoas = [
{altura:1.65, fonte: "Arial", nome: "Ana"},
{altura:1.71, fonte: "Courier", nome: "Andre"},
{altura:1.75, fonte: "Helvetica", nome: "Pedro"},
{altura:1.79, fonte: "Times", nome: "Diogo"},
{altura:1.69, fonte: "Tahoma", nome: "Maria"},
{altura:1.62, fonte: "Verdana", nome: "Lucia"},
{altura:1.81, fonte: "Futura", nome: "Rafael"},
]
// Criando elementos
d3.select("body") // Seleciona onde começar
.selectAll("p") // Seleciona todos os paragrafos de "body"
.data(pessoas) // Associa o dado pessoas a cada p
.enter() // Considera apenas elementos faltando.
.append("p") // Acrescenta paragrafos se estiver faltando p
// Atualizando elementos
d3.select("body") // Seleciona onde começar
.selectAll("p") // Seleciona todos os paragrafos de "body"
.text(function(d) {
// atribui o texto de cada paragrafo
// em função dos dados associados
return "A altura de "+d.nome+" é "+d.altura+"m.";
})
.style("font-size",function(d){
// atribui o tamanho de cada paragrafo
// em função dos dados associados
return ((d.altura-1.5)*50.0+10)+"px";
}).style("font-family",function(d){
// atribui o tamanho de cada paragrafo
// em função dos dados associados
return d.fonte;
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment