-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage-4.html
82 lines (82 loc) · 4.04 KB
/
page-4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hola D3.js!</title>
</head>
<body>
<div class="container py-3">
<div class="row">
<div class="col-md-12 py-3">
<h1>D3.js</h1>
</div>
<div class="col-md-6 pt-2">
<svg width="360" height="360" style="background:#eee;">
<g>
<circle r="40" cx="100" cy="100"/>
<text x="98" y="100" fill="#ED3D88"></text>
<circle r="40" cx="250" cy="100"/>
<text x="248" y="100" fill="#ED3D88"></text>
<circle r="40" cx="100" cy="250"/>
<text x="98" y="251" fill="#ED3D88"></text>
<circle r="40" cx="250" cy="250"/>
<text x="248" y="251" fill="#ED3D88"></text>
</g>
</svg>
</div>
<div class="col-md-6 pt-2">
<p>Vendría bien aprovechar que el nombre de cada ciudad ya es parte la variable. En una primera instancia, podemos agregar "a mano" los espacios para el texto, para luego asignar el contenido a cada espacio agregado.</p>
<p><code>d3.selectAll('text')</code> - Seleccionamos todos los "text" en el documento.</p>
<p><code>.data(ciudades)</code> - Nuevamente vamos a buscar los datos de la variables ciudades.</p>
<p><code>.text(function(d) {return ". " + d.name;});</code> - Finalmente ponemos el cada "name" donde corresponda. En este caso agregamos un punto y espacio, que se concatenarán con ese "name".</p>
</div>
<div class="col-md-12 pt-3">
<nav aria-label="navegacion">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="index.html">Portada</a></li>
<li class="page-item"><a class="page-link" href="page-1.html">1</a></li>
<li class="page-item"><a class="page-link" href="page-2.html">2</a></li>
<li class="page-item"><a class="page-link" href="page-3.html">3</a></li>
<li class="page-item active"><a class="page-link" href="page-4.html">4</a></li>
<li class="page-item"><a class="page-link" href="page-5.html">5</a></li>
<li class="page-item"><a class="page-link" href="page-6.html">6</a></li>
<li class="page-item"><a class="page-link" href="page-7.html">7</a></li>
<li class="page-item"><a class="page-link" href="page-8.html">8</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!--D3.js-->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
//crear una variable llamada ciudades
var ciudades = [
{name:'Santiago',population:5631839},
{name:'Concepción',population:848023},
{name:'Valparaíso',population:824006},
{name:'Coquimbo',population:296253}
];
//seleccionar todos los "circle" en el documento
d3.selectAll('circle')
.data(ciudades)
.attr('fill','#AAAAAA')
.attr('r', function(d) {
return d.population / 57000;
})
//seleccionar todos los "text" en el documento
d3.selectAll('text')
.data(ciudades)
.attr('fill','#404996')
.text(function(d) {
return "* " + d.name;
});
</script>
<!-- jQuery primero, luego Popper.js, y finalmente Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>