3e:null 3f:["$","title",null,{"children":"Segunda Entrega | Pajaro Speed's Workspace | Observable"}] 45:T1224,{ //Propiedades del lienzo let ancho = 770; let alto = 400; let lienzo= d3.create ("svg") .attr("width",ancho) .attr("height",alto) .style("background","#2b092a") //Primera figura elipse (Representación filial con mis hermanos) let Hermanos = lienzo.append ("ellipse") .attr ("cx", 300) .attr ("cy", 200) .attr ("rx", 100) .attr ("ry", 50) .attr ("fill", "#de091b"); //Segunda figura, círculo (mi edad devorándose a sí misma) let edad = lienzo.append ("circle") .attr ("cx",ancho/3) .attr ("cy",alto/2) .attr ("r",objetoautobiografico.edad) //Introduzco esta figura del medio para representar a mi hermano del medio lienzo.append ("circle") .attr("cx", ancho/3) .attr("cy", alto/2) .attr("r", objetoautobiografico.edad/2) .attr ("fill", "#4a3f40"); //Introduzco esta figura para representar a mi hermano menor lienzo.append ("circle") .attr("cx", ancho/3) .attr("cy", alto/2) .attr("r", objetoautobiografico.edad/4) .attr ("fill", "#a69d9e"); //Tercera figura línea (Relación entre el descenso de la estatura, vida, y los desplomes de la felicidad) let estatura = lienzo.append ("line") .style ("stroke", objetoautobiografico.Nivel_Felicidad) .attr ("x1", 0) .attr ("y1", 0) .attr ("x2", 900) .attr ("y2", 520); //Cuarta figura línea que llega al corazón de la edad let Animal_Favorito = lienzo.append ("polyline") .style ("stroke", objetoautobiografico.Gafas) .style ("fill", "none") .attr ("points", "0, 0, 200, 400, 255, 200"); //Ubicación en plano cartesiano del camino de la línea //Quinta figura línea de mi mascota con el color de mis ojos let Mascota = lienzo.append ("polyline") .style ("stroke", objetoautobiografico.Color_Ojos) .style("fill", "none") .attr ("points","0, 0, 300, 330, 200" ) //Sexta figura let Cabello = lienzo.append ("rect") .attr ("x", 300) .attr ("y", 328) .attr ("height", 100/objetoautobiografico.edad) .attr ("width", 200) .attr ("fill", "#b91cc7") //Séptima figura let nombre = lienzo.append ("ellipse") .attr("cx",0) .attr("cy",0) .attr("rx",150) .attr("ry",150) .style("opacity", .8) .style("fill",objetoautobiografico.Color_Favorito) //Octava figura let profesion= lienzo.append ("rect") .attr("x",300) .attr("y", 150) .attr("width",objetoautobiografico.edad/2) .attr("height",objetoautobiografico.Estatura+10) .attr("fill","#1de0c3") d3.select("#demoBasic") .append("path") .attr("d", d3.symbol()) .attr("transform", "translate(25,50)"); //Figura círculo negro let Hobbies = lienzo.append ("circle") .attr ("cx",500) .attr ("cy",330) .attr ("r",objetoautobiografico.Estatura/6) //Texto let Profesion = lienzo.append ("text") .style ("fill",objetoautobiografico.Nivel_Felicidad) .attr ("dy", ".50em") .attr ("text-anchor", "middle") .attr ("transform", "translate (510,280) rotate (31)") .text ("Хорхе Алехандро Льянос") //Novena figura let Lugar_De_Nacimiento= lienzo.append ("path") .style("stroke", "black") .style("fill", objetoautobiografico.Color_Ojos) .attr("d", "M 742,35, L 550,60, L 730,220 Z"); //Décima figura let Gafas = lienzo.append ("rect") .attr("x",490) .attr("y", 320) .attr("width",20) .attr("height",20) .attr("fill","#610b0f") //Onceava figura let Comida_Favorita = lienzo.append ("polyline") .style ("stroke", "#0a940a") .style ("fill", "none") .attr ("points", "770, 0, 360, 500, 0, 0"); //Doceava figura (triángulos desintegrándose) let Estatura= lienzo.append ("polygon") .style("stroke", "black") .style("fill", "none") .attr("points", "750,50, 530,80, 740,230"); lienzo.append ("polygon") .style("stroke", "#17123b") .style("fill", "none") .attr("points", "740,80, 530,90, 740,240"); lienzo.append ("polygon") .style("stroke", "#361033") .style("fill", "none") .attr("points", "730,90, 530,100, 740,250"); lienzo.append ("polygon") .style("stroke", "red") .style("fill", "none") .attr("points", "720,100, 530,110, 740,260"); lienzo.append ("polygon") .style("stroke", "#8c1867") .style("fill", "none") .attr("points", "700,110, 530,120, 740,270"); return lienzo.node() } 46:T6c5,**Introducción a la visualización** Para esta parte de la entrega, decidí usar un *Treemap* desde la aplicación de *Flourish*. La razón por la cual elegí este tipo de visualización es muy sencilla: la compleja carga de datos que maneja esta base requiere una herramienta que permita clasificar, jerarquizar y tener sentido dentro de una visualización. Si bien se pueden tomar dos o tres variables importantes (por ejemplo los votos por el sí, por el no y los abstemios), la capacidad de este tipo en específico de visualización es fundamental para abarcar de forma general cada una de las variables. Además de ello, su fácil apropiación permite una lectura intuitiva de la misma. Para ello, le pedí a mis padres, quienes poco están relacionados con la tecnología, que intentaran descifrar cómo funcionaba y para qué servía cada elemento. El ejercicio resultó satisfactorio y pudo denotar una utilidad esperada. Algo que me quedó sonando es la ubicación de las casillas (tamaño) respecto al porcentaje de cada una de las variables, ya que hay momentos en los cuales se llegan a ver muy pequeñas y se pierden. No obstante, para la siguiente experimentación, utilicé una visualización jerárquica de *Packed Circles*, muy similar al *Treemap*, que me permitió —una vez más—, contemplar todos los datos de manera general. Sigue los mismos principios de la visualización anterior, donde la intuición se complementa con la información, pudiendo visualizar una cantidad abrumadora de información y teniendo por separado cada una de las variables. Esto con el fin de entregar visualmente este tipo de datos al público general o servir de insumo para un trabajo de investigación mucho más grande. 47:[] 43:{"id":"d5d208cdb3b2e26e","slug":null,"title":"Segunda Entrega","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-09-23T17:46:55.968Z","update_time":"$D2023-09-28T13:34:21.883Z","view_time":null,"first_public_time":"$D2023-09-23T17:46:55.968Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ac30ceb205c2a0f9","login":"pajaro-speed-ws","name":"Pajaro Speed's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/5db481617d4e3d9c7d3fd84bb12069c6d2d8ad563aa8b1074b480d403a39114e","tier":"starter_2024","bio":"","following":false},"version":489,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02d042f663d9950a","login":"pajaro-speed","name":"Pajaro Speed","avatar_url":"https://avatars-next.observableusercontent.com/79577d5e17474df0fa1bfd1a7478464e26c16bbc79b9fafdfc63954651bdddb5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"02d042f663d9950a","login":"pajaro-speed","name":"Pajaro Speed","avatar_url":"https://avatars-next.observableusercontent.com/79577d5e17474df0fa1bfd1a7478464e26c16bbc79b9fafdfc63954651bdddb5","tier":null,"role":"editor"},{"type":"team","id":"ac30ceb205c2a0f9","login":"pajaro-speed-ws","name":"Pajaro Speed's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/5db481617d4e3d9c7d3fd84bb12069c6d2d8ad563aa8b1074b480d403a39114e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Segunda Entrega","cells":[{"id":0,"value":"# Segunda Entrega","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"objetoautobiografico = ({\n\n nombre: \"Jorge Alejandro Llanos\", \n edad: 40, \n Profesión: [\"historiador del arte, periodista\"], \n Lugar_de_nacimiento: \"Colombia\", \n Hobbies: [\"Música, teatro, cine, literatura\"], \n Barba: \"#262426\", \n Cabello: false,\n Gafas: \"#92b507\", \n Color_Favorito: \"#000000\", \n Color_Ojos: \"#6e460a\", \n Hermanos: true, \n Mascota: [\"Perro\"], \n Nivel_Felicidad: \"#6ea9c4\", \n Comida_Favorita: \"arroz con pollo\",\n Estatura: 168, //centímetros\n Animal_Favorito: \"elefante\", \n\n \n\n}\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"**Contextualización de la imagen**\n\nComo parte de mi ejercicio de experimentación y codificación, no quise hacer una composición figurativa de mi rostro sino más bien una composición geométrica. Inspirado en los artistas suprematistas rusos, de los cuales soy admirador, quise emular la portada del álbum *Gruppa krovi* (en ruso: Группа крови, en español: Grupo Sanguíneo), de la banda soviética *Kinó*. \n\nRealicé la composición geométrica tomando en cuenta el código que fuimos realizando en clase, además de la lectura del libro titulado *Data Driven D3.JS Tips and Tricks* de Malcolm Maclean (2019). Intenté dejar en los comentarios del código cómo veía yo la relación de mis datos al momento de componer las figuras y el por qué de su uso y su relación con las demás figuras. Soy consciente que, desde la visualización este no sería un ejemplo claro, sin embargo, con el riesgo y la libertad que presupone la composición abierta que se planteaba, me tomé el gusto de hacerlo. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":454,"value":"\n

Portada original del álbum Gruppa krovi (1988)

\n\n

Referencia original e inspiración de la banda para su portada (Poster Ruso de la obra Dr Mabuse, 1922)

\n\n $\"Una$ ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"**Ejercicio seccional**\n\nRelacionado con lo que mencionaba en el párrafo anterior, si quisiera visualizar ciertos datos importantes, como el sí, el no y los abstemios, podría utilizar otro tipo de visualización que no abarcara un nivel jerárquico tan complejo, y permitiera impactar mucho más desde los datos más relevantes para el público en general. Teniendo esa idea en mente decidí usar un tipo de visualización como el *Stacked Column Chart*, que permite mirar porcentajes y datos numéricos relacionados, en este caso, con la votación del Plebiscito. \n\nSi bien se presenta mucho más limpio y ordenado, pierde la fuerza que tenía el gráfico anterior, ya que la mayoría de datos quedan ocultos. No obstante, dentro de una población que busca conocer resultados tácitos, es una herramienta que permite dar visualización a ese problema. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":478,"value":"