• No se han encontrado resultados

Hola! Espera mientras comienza la sesión.

N/A
N/A
Info
Descargar
Protected

Academic year: 2021

Share "Hola! Espera mientras comienza la sesión."

Copied!
33
0
0

Cargando.... (Ver texto completo ahora)

Descargar ahora ( 33 página )

Texto completo

(1)

¡Hola

👋

! Espera mientras comienza la sesión.

¡Hola

👋

! Espera mientras comienza la sesión.

(2)

Antes que todo, ¿cómo están?

Antes que todo, ¿cómo están?

(3)

Visualización de Información

Visualización de Información

IIC2026 2020-2

IIC2026 2020-2

(4)

Utilidades en D3.js II

Utilidades en D3.js II

Visualización de Información

Visualización de Información

IIC2026 2020-2

IIC2026 2020-2

(5)

Repaso

Repaso

(6)

Repaso

Repaso

1. Eventos en D3.js

1. Eventos en D3.js

2. Transiciones de D3.js

2. Transiciones de D3.js

3.

(7)

¡Más detalles para nuestro programa!

¡Más detalles para nuestro programa!

Comenzamos con una visualización estática.

(8)

Eventos

Eventos

const width = 600; const height = 400; const margin = { top: 30, bottom: 30, right: 30, left: 30, }; const svg = d3 .select("body") .append("svg")

.attr("width", width) .attr("height", height);

const boton = d3 select("body") append("button") text("Agregar eleme

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

(9)

Eventos

Eventos

const width = 600; const height = 400; const margin = { top: 30, bottom: 30, right: 30, left: 30, }; const svg = d3 .select("body") .append("svg")

.attr("width", width) .attr("height", height);

const boton = d3 select("body") append("button") text("Agregar eleme

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 boton.on("click", () => { datos.push(datoNuevoRandom(datos)); j i D D t (d t ) categoria: String.fromCharCode( 120 datos[datos.length - 1].categoria.charCodeAt(0) + 1 121 ), 122 frecuencia: Math.floor(Math.random() * 800), 123 }); 124 125 let datos; 126 127 d3.json("datos.json") 128 .then((datosCargados) => { 129 console.log(datosCargados); 130 datos = datosCargados; 131 joinDeDatos(datos); 132 133 134 135

(10)

Eventos

Eventos

const width = 600; const height = 400; const margin = { top: 30, bottom: 30, right: 30, left: 30, }; const svg = d3 .select("body") .append("svg")

.attr("width", width) .attr("height", height);

const boton = d3 select("body") append("button") text("Agregar eleme

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const width = 600; 1 const height = 400; 2 const margin = { 3 top: 30, 4 bottom: 30, 5 right: 30, 6 left: 30, 7 }; 8 9 const svg = d3 10 .select("body") 11 .append("svg") 12

.attr("width", width) 13

.attr("height", height); 14

15

const boton = d3 select("body") append("button") text("Agregar eleme

16

.on("mouseenter", (_, d) => {

parrafo.text(`Categoría: ${d.categoria}, Frecuencia: ${d.frecu }) .on("mouseleave", () => { parrafo.text(""); }) .on("click", (_, d) => { datos.splice(datos.indexOf(d), 1); joinDeDatos(datos); }); .duration(500) 102

.attr("y", height - margin.top - margin.bottom) 103 .attr("height", 0) 104 .remove() 105 ) 106 107 108 109 110 111 112 113 114 115 116

(11)

Eventos

Eventos

¡Hay muchos tipos de eventos!

click dbclick change dragstart dragover ... Lista de eventos: MDN

(12)

¡Alerta de versión!

¡Alerta de versión!

V5:

V6:

seleccion.on("click", (d, i, elements) => { console.log(d3.event()); console.log(d); console.log(elements[i]); }) 1 2 3 4 5

seleccion.on("click", (event, d) => { console.log(event); console.log(d); console.log(event.currentTarget); }) 1 2 3 4 5

(13)

Transiciones

Transiciones

const width = 600; const height = 400; const margin = { top: 30, bottom: 30, right: 30, left: 30, }; const svg = d3 .select("body") .append("svg")

.attr("width", width) .attr("height", height);

const boton = d3 select("body") append("button") text("Agregar eleme

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

(14)

Transiciones

Transiciones

const width = 600; const height = 400; const margin = { top: 30, bottom: 30, right: 30, left: 30, }; const svg = d3 .select("body") .append("svg")

.attr("width", width) .attr("height", height);

const boton = d3 select("body") append("button") text("Agregar eleme

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 enter .append("rect")

.attr("fill", "magenta")

.attr("y", height - margin.top - margin.bottom) .attr("x", (d) => escalaX(d.categoria))

.attr("width", escalaX.bandwidth()) .attr("height", 0)

.transition() .duration(1000)

.attr("height", (d) => escalaAltura(d.frecuencia)) .attr("y", (d) => escalaY(d.frecuencia))

.selectAll( rect ) 74 .data(datos, (d) => d.categoria) 75 .join( 76 (enter) => 77 78 79 80 81 82 83 84 85 86 87 88 selection() 89

(15)

Transiciones

Transiciones

const width = 600; const height = 400; const margin = { top: 30, bottom: 30, right: 30, left: 30, }; const svg = d3 .select("body") .append("svg")

.attr("width", width) .attr("height", height);

const boton = d3 select("body") append("button") text("Agregar eleme

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const width = 600; 1 const height = 400; 2 const margin = { 3 top: 30, 4 bottom: 30, 5 right: 30, 6 left: 30, 7 }; 8 9 const svg = d3 10 .select("body") 11 .append("svg") 12

.attr("width", width) 13

.attr("height", height); 14

15

const boton = d3 select("body") append("button") text("Agregar eleme

16

update

.transition() .duration(1000)

.attr("height", (d) => escalaAltura(d.frecuencia)) .attr("y", (d) => escalaY(d.frecuencia))

.attr("x", (d) => escalaX(d.categoria)) .attr("width", escalaX.bandwidth())

.attr( height , 0) 84 .transition() 85 .duration(1000) 86

.attr("height", (d) => escalaAltura(d.frecuencia)) 87

.attr("y", (d) => escalaY(d.frecuencia)) 88 .selection(), 89 (update) => 90 91 92 93 94 95 96 97 .selection(), 98 (exit) => 99 exit 100

(16)

Transiciones

Transiciones

const width = 600; const height = 400; const margin = { top: 30, bottom: 30, right: 30, left: 30, }; const svg = d3 .select("body") .append("svg")

.attr("width", width) .attr("height", height);

const boton = d3 select("body") append("button") text("Agregar eleme

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const width = 600; 1 const height = 400; 2 const margin = { 3 top: 30, 4 bottom: 30, 5 right: 30, 6 left: 30, 7 }; 8 9 const svg = d3 10 .select("body") 11 .append("svg") 12

.attr("width", width) 13

.attr("height", height); 14

15

const boton = d3 select("body") append("button") text("Agregar eleme

16 const width = 600; 1 const height = 400; 2 const margin = { 3 top: 30, 4 bottom: 30, 5 right: 30, 6 left: 30, 7 }; 8 9 const svg = d3 10 .select("body") 11 .append("svg") 12

.attr("width", width) 13

.attr("height", height); 14

15

const boton = d3 select("body") append("button") text("Agregar eleme

16

exit

.transition() .duration(500)

.attr("y", height - margin.top - margin.bottom) .attr("height", 0)

.remove()

.duration(1000) 93

.attr("height", (d) => escalaAltura(d.frecuencia)) 94

.attr("y", (d) => escalaY(d.frecuencia)) 95

.attr("x", (d) => escalaX(d.categoria)) 96

.attr("width", escalaX.bandwidth()) 97 .selection(), 98 (exit) => 99 100 101 102 103 104 105 ) 106 .on("mouseenter", (_, d) => { 107

(17)

Transiciones

Transiciones

Detalles de transiciones en submódulo . Tienen un método delay para jar un atraso.

Tienen un método ease para alterar como es el cambio en el tiempo.

(18)

Join

(19)

selección grupo arreglo datos 4 5 18 23 42

(20)

selección grupo arreglo datos 4 5 18 23 42

selección grupo arreglo datos

4 0 5 1 18 2 23 3 42 4 selection.data(data) 1

(21)

selección grupo arreglo datos 4 5 18 23 42

selección grupo arreglo datos

4 0 5 1 18 2 23 3 42 4 selección grupo rect rect rect rect rect datos arreglo 4 5 18 23 42 selection.data(data) 1 selection.data(data).enter().append("rect") 1

(22)

selección grupo rect rect rect rect rect datos arreglo 4 5 18 23 42 selección grupo rect 0 rect 1 rect 2 rect 3 rect 4 datos arreglo 4 0 5 1 18 2 23 3 42 4 selection.data(data); 1

(23)

selección grupo rect rect rect rect rect datos arreglo 4 18 23 42 selección grupo rect 0 rect 1 rect 2 rect 3 rect 4 datos arreglo 4 0 18 1 23 2 42 3 selection.data(data); 1

(24)

Función de llave en

Función de llave en data join

data join

const width = 600; const height = 400; const margin = { top: 30, bottom: 30, right: 30, left: 30, }; const svg = d3 .select("body") .append("svg")

.attr("width", width) .attr("height", height);

const boton = d3 select("body") append("button") text("Agregar eleme

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

(25)

Función de llave en

Función de llave en data join

data join

const width = 600; const height = 400; const margin = { top: 30, bottom: 30, right: 30, left: 30, }; const svg = d3 .select("body") .append("svg")

.attr("width", width) .attr("height", height);

const boton = d3 select("body") append("button") text("Agregar eleme

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .data(datos, (d) => d.categoria) .transition() 66 .duration(1000) 67 .call(ejeX) 68 .selection() 69 .selectAll("text") 70 .attr("font-size", 20); 71 72 contenedorBarras 73 .selectAll("rect") 74 75 .join( 76 (enter) => 77 enter 78 .append("rect") 79

.attr("fill", "magenta") 80

attr("y" height margin top margin bottom) 81

(26)

selección grupo rect rect rect rect rect datos arreglo 4 18 23 42 selección grupo rect A rect B rect C rect D rect E datos arreglo 4 A 18 C 23 D 42 E selection.data(data, (d) => d.llave); 1

(27)

¡Visualización del día!

¡Visualización del día!

(28)

¡Visualización del día!

¡Visualización del día!

Artículo de explicación de pandemia COVID-19 mediante simulaciones. Propuesta por ayudante Francisca Ibarra.

(29)

¿Más dudas?

¿Más dudas?

(30)

Próximos eventos:

Próximos eventos:

(31)

Próximos eventos:

Próximos eventos:

¡Sesión de jueves 17 de septiembre es libre! Me conectaré de todas formas por si tienen preguntas :)

Se publicaron los contenidos de la semana siguiente a la semana de receso. Los ejercicios propuestos se actualizarán a medida que estén disponibles.

(32)

Próximos eventos:

Próximos eventos:

¡Sesión de jueves 17 de septiembre es libre! Me conectaré de todas formas por si tienen preguntas :)

Se publicaron los contenidos de la semana siguiente a la semana de receso. Los ejercicios propuestos se actualizarán a medida que estén disponibles.

(33)

Utilidades en D3.js II

Utilidades en D3.js II

Visualización de Información

Visualización de Información

IIC2026 2020-2

IIC2026 2020-2

¡Deja tus preguntas en los comentarios!

¡Deja tus preguntas en los comentarios!

Referencias

Descargar ahora ( PDF - 33 página - 1.99 MB )

Documento similar

y un a no en la que el y con la que se no son y las de los A. la de " LA EL Y

Volviendo a la jurisprudencia del Tribunal de Justicia, conviene recor- dar que, con el tiempo, este órgano se vio en la necesidad de determinar si los actos de los Estados

UNA CRÍTICA A LOS PRINCIPIOS DE LA REFORMA DEL RÉGIMEN JURÍDICO DE LA DISCAPACIDAD1

Se llega así a una doctrina de la autonomía en el ejercicio de los derechos que es, en mi opinión, cuanto menos paradójica: el paternalismo sería siempre una discriminación cuando

I. Disposiciones generales

Gastos derivados de la recaudación de los derechos económicos de la entidad local o de sus organis- mos autónomos cuando aquélla se efectúe por otras enti- dades locales o

DE SENTIDO DE LOS TEXTOS

Consecuentemente, en el siglo xviii hay un cambio en la cosmovi- sión, con un alcance o efecto reducido en los pueblos (periferia), concretados en vecinos de determinados pueblos

y el de la de es al del a los que se la de la En de la es uno de los o en el de los (*) Y DE LA Y

En cuarto lugar, se establecen unos medios para la actuación de re- fuerzo de la Cohesión (conducción y coordinación de las políticas eco- nómicas nacionales, políticas y acciones

Informe de la campaña de control del mercado de termómetros digitales de uso clínico

La campaña ha consistido en la revisión del etiquetado e instrucciones de uso de todos los ter- mómetros digitales comunicados, así como de la documentación técnica adicional de

Anexo I

Products Management Services (PMS) - Implementation of International Organization for Standardization (ISO) standards for the identification of medicinal products (IDMP) in

Capítulo 8

This section provides guidance with examples on encoding medicinal product packaging information, together with the relationship between Pack Size, Package Item (container)