From eac1d16ee550aced054e6238f793396f9a5b0cd7 Mon Sep 17 00:00:00 2001 From: jdanielgoh Date: Thu, 2 Mar 2023 21:39:06 -0600 Subject: [PATCH] ajustes --- .env.production | 6 +- public/.htaccess | 9 + public/ico_tc.png | Bin 0 -> 5487 bytes public/index.html | 5 +- src/App.vue | 90 ++- src/assets/img/iconos/behance.svg | 1 + src/assets/img/iconos/instagram.svg | 1 + src/assets/img/iconos/twitter.svg | 1 + src/components/Huevo.vue | 135 +++- src/components/OrdinalBrush.vue | 4 +- src/components/navegacion/Footer.vue | 123 ++++ src/components/navegacion/Header.vue | 72 ++ src/components/navegacion/Menu.vue | 122 ++++ .../navegacion/TarjetaPortafolio.vue | 100 +++ src/router/index.js | 13 +- src/views/DefuncionesTemporales.vue | 681 ++++++++++-------- 16 files changed, 1010 insertions(+), 353 deletions(-) create mode 100644 public/.htaccess create mode 100644 public/ico_tc.png create mode 100644 src/assets/img/iconos/behance.svg create mode 100644 src/assets/img/iconos/instagram.svg create mode 100644 src/assets/img/iconos/twitter.svg create mode 100644 src/components/navegacion/Footer.vue create mode 100644 src/components/navegacion/Header.vue create mode 100644 src/components/navegacion/Menu.vue create mode 100644 src/components/navegacion/TarjetaPortafolio.vue diff --git a/.env.production b/.env.production index 9669591..bbb32e8 100644 --- a/.env.production +++ b/.env.production @@ -1,6 +1,6 @@ NODE_ENV = production -VUE_APP_TITLE = defunciones-infancia -VUE_APP_DESCRIPTION = Analizamos las causas de defunciones de niñas, niños y adolescentes en México a través del tiempo +VUE_APP_TITLE = mortalidad-infancia +VUE_APP_DESCRIPTION = Analizamos las causas de mortalidad de niñas, niños y adolescentes en México a través del tiempo VUE_APP_DOMAIN = https://tirandocodigo.mx -VUE_APP_BASE_ROUTE = /proyectos/defunciones_infancia/ +VUE_APP_BASE_ROUTE = /proyectos/mortalidad-infancia/ VUE_APP_HASH = true diff --git a/public/.htaccess b/public/.htaccess new file mode 100644 index 0000000..85e68e7 --- /dev/null +++ b/public/.htaccess @@ -0,0 +1,9 @@ + + + RewriteEngine On + RewriteBase /proyectos/mortalidad-infancia/ + RewriteRule ^/proyectos/mortalidad-infancia/index\.html$ - [L] + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule . /proyectos/mortalidad-infancia/index.html [L] + diff --git a/public/ico_tc.png b/public/ico_tc.png new file mode 100644 index 0000000000000000000000000000000000000000..45ed4bf25080b8ff1432d0694ce18f5f31c7915c GIT binary patch literal 5487 zcmZWscQ~9|&|lGeFHvIk5>^+T4G}GRS-mdNd#qlg1wmMC^(YZNAw*drT0}3`>O}7Z zQG##Xd%t_{^L^)ee(%hgncvKN=FI!Y8>g-Ll$d~?0000GtEwpJqNO1ka(FoCXWh|m z2LM3i;;5*ot*WR9)b?_>cXWXQ04j0mMz|2YewsYf)a2xmdw44NZTPHWVQFM0n@nGn zRqo+)^h6cd2)rVwHdpG1u8!btq$ZPo0oB^PX1hQ00CLpJ*Fj0nP!=+C~8_->;j^NThM`< zf-|>KE|u9W;oY%0RueP6xex~b=6cjct=jy zLxwB#*hBg&U6|sk_%5*mm<7sfUL`2N^SQ_XWflR3Si3?>h8jTe`D^>f%ile}lgoO)&w|Skq#-9`5Pb<|PpC;GVF& zSoV%&V-b&*&_~cxmW(;r$32!L>za?yq^9;r1&W8kQWR)X%j;3>xoHK*FU9RtQGDq) zj7CyRM$0?lGLN!KRzlgRJoJBODyInYP}>lEHGEl=Mi(mvd;wqMRIYGQro~4IMT+bC zN3e!GjHSd{sReS#8)kA4Khs8KtPbG(>=ws=f}o>bFal~27){|ycmE*yO6vUuMEJFG z75pIFMPtGW6a@B&753Y0RzM)iS1y1&cxu|!-8`wS66vyTEPaG}oBY5R8PuE=Q!6~! z9^SkcM|`Savs7WtR_+)E^0EY6OOhf00~RJua#spIXE-C!X~%6h8kr_i7)JOO$bc92 zMopxN)z?ays3xue?>9yYpf7p~oA^6{0?S0`{W0DeO`x+?qleWK5RAZ6E*8uG@Kcag zI;_u>0CrETC=|BQ`6cpb{Yzoy?XOGl-Xmf{ry_m&i-M=o>jfM_QFIzaT+tMJo@{f> zzq*T;#K=gD5OIN|>qmomhiN04Fr_BVP2gM}cQ)5G%eUtv7#E5L4Sm1cX_|;vPdXw! z9@?;C(Rq>`e)IFqgp#w`TWrg)@Ey+5^f?hz>es4NG3H<{_ zzIc;ROJ-B>EQ3p{A=^mi^B&O#T<=zv#)czHLW)4x*%*;R=u^HmDJKj9f~bG z{T=)CCvZVBEzm0Ybr-YInx2komU^yw#(=|`S-6!`_{vfpmuji%6IACt9Kv=cETW{$ z4Vj4L?UikUuod&--&X+)@`ohg6I0~Y`YlP=V%^QnjpCvYc`smk2mAHy7k4RXPQc7I z03qG?Mx8KS%FL6cBNYD`Y>X(JrxxplAhXdDeh?Ulhd~acVGkD-#4t3*`_)XPfg#di zrcI>w#j6%aKP=ITupFbMLv93*B$9H8s0j}gxw8bClg(Y?*u*$cV2%K?M@5g2D}E)a zQ)VPLii$gDV^N_>4SUOSUqzf%d9{zoPEI$zQi(TtP=&vqRx%c$FvPak=eo)=_OcZ$ zS4gM!#8-!M0*5J1Scir_jgJ95_6|VZbb=^B;vu<6xnrThltVYaadMA zBxuEP@6cK{I*Ngj-lQwA(NQwu%VCjN6S3q7zSP#>W^-X<1R|mx-n}_YQeoewbd9q( z%~wpjOy!e%2F~?KBeaLXY}Q+%EgO!!&jcF z7OiTp>we=oO&d=OO#8IGy-l;duzj@6dMdfSwjDSz{7zo~R%NnKN*gudsW0iv<12kC zaVmbwpQ!wy5PNLQ5&L7wN0S-V8O#}6;?L0^aGpli2$>e^7K4Ap_dI-7U)sQ_?j2#D zVxP4hGN_(CZ(_&Kz~4w?xoO_WJk@Glz5X;>cCQ>Bw zCN`oIr(bx~naG&1l2}UTDk$YTA#3K>bl|aYn7Vuwy(pxd$do{tP{!ac!cBAP-0-xCMB2G`be z24}xt@wxD)@~<23Ha5Ad*4dfZ8&@~F)a}*@e~53)wl;9^?ag)>{77R`(;(-3z0fno zIcZ<`ta#Ad6w@@xHN`b|PgXkHJZ#>s#i_;lOewH5xcWNaYJj9XGA44QaBMl1ZF_Tz z+so`=S}sDcGcXFKbQ+tZsm}%1E7Z#!S9A#8;NI{bN*trun zex7405#hC&Xw?}kUTBhPIyQS~Uei1}_jumEMXb5)g`W>?le-6U4g4$i46-@8a@0LO zpto&&fLepDr7s(-`M!BKkYEe4&ily;!}T9NliR%>?Hw=caL6CdZ`W*ZZkGDV^3Ukf1=*HeSYWb?1luVSiY7uLiXUz!NuV!Z1 zf=cg~#EoT-sc!LX&5i~3MkknyGikI1gplfUzCUU|}WXACG-oT5av!v{(Y`q4Hh6d>bKfd>hJFC9t(!G1Ftq);F zdTn~w>+_c_>c7Hdk7WhU?04Jh1iUNTvH2Id|){mADgp2)Z?2 zyhzshV#?CXsW9Lo_u_PRY)JF>Q zbJ5XicE)biY9QWSJv`FOtHsW|#E%4F0s~i9R~1)RNSE+0oeM`z5L6^@6kcHTGZstX zpCVt78Divu6Naw2lYB!k`CWqcsdP z^~j`kh&T75Ha}kFzW*fIy&(mz}+ou9EWKbo5S^^|_Cahm?STpPwJdPXy%d%#V)X_x5-5v4-)xd9(eMz{v;KNd zD9rKSN^ahN9}9gzfjf_Y5J*tqpWJAw%$-$A+YttJF;;SPMfVI{Lrz>+=Fjl|=lHka ze~6HOi4x-fCH}|pe~AX(P%lMyS9C!ixqmO~Z}NYge-mW{?#}(6KK#|>KdtC4%Mr*3 z{BvV+1XHIJ1L#X+bX3yPM@#gG{kfRYPi{2sBpR3xD#UK~(e7iQ6MNfyZ z7wPR}@12#dx}H`p9_Vp`y9FMnIZMVjqywK%STaXFh#$iOe+BXcarfbp69)I;@!r?h z_?E46e=WO*%sG>EYZ{(zk1{c>6G>V?4CH6+BQmb8^W+!3hc+zsWsOR8-_4O>FUPOF zrLw!X>z;RyZ_9g)l+x;&PbD3o9zV{kOk!9(8v8mUUmzv$4erJ{{(B3a!m8!@Y@uumZL*S zKC}7=JBzZ(gnj2pc4Ix_l>V+1L>n_tR$!r71Icl$iulRZCSJP)u2nFM$(=Y+1jm%Z zC8Q0zzE-d?b1QcEpsLA_*FlOLoS3LJ@Hjw+n6-#HytjE?&_W^#tY^B^4nE5?vNA9w ztlhFQ(8kOABfY4mO0rx?Z;KCKy!dUucdzY@gq&f?(I@}?%NRczBy$N@u(OP#RS!Sj_vTz1x89egq>ki4J<4M+Tb!Q|u`Q!d@ zaFctT2Os#Z7nh9LQnf;3^G5GJ(xHKCWHIE8KQFnLm7hgW1h$Z8!eV3vrUxWXSc~H^ ziHn6RS7&k2edN@!EM0xOO`h8Gh8g@`{+O=t>S|Cw&-(9oz_QQO@#pM~&1c!RbTDhH zkjAfC=)u3e)oG77M^8WX-PG@8yQ{nb-_88^yM8i7jyP2+w^-CST5yWeXwH^}#wgj& z6Y=<$+DbsBQ~Q34lgH(>{elp6wJC_D!cZG;&7?tmf%zmS{YDlT1Aq^>{j@@H1C)7(hSdb**6s) zNaPp5tM1MOS^C5xBr<>0|MBur`Uk(-An=)T&=Wtwi4{ zRkzbCE06I@7vbbUHEX`Pxj9gpuQ55-z`%g|p-$klut|Hju)Ry5sH3Bg)d4Q^63T!J zNStTngTmRB+V45PHa$Pt=BbI(FwL;S58rzVvYst07N*NzB(gq#@vvQkXdLl=c<`ww zlu2!`EQ52UJMky%>b$y=dD!@qRm1%(36F~hUIedcfFW&3Rl-P7b;Js9i(q6R;*u zYkldLV;n@n)aYnaev?!LfgEu0D zn6;x`gGvVr@mdpX~k#q|T= vV$_C=pY*deF$}{D;=pr~RmA@QC0Pk@ literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html index 3e5a139..2b242e4 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,10 @@ - + + + + <%= htmlWebpackPlugin.options.title %> diff --git a/src/App.vue b/src/App.vue index a1482d4..cc9adf4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,57 +1,77 @@ - diff --git a/src/assets/img/iconos/behance.svg b/src/assets/img/iconos/behance.svg new file mode 100644 index 0000000..9ef5101 --- /dev/null +++ b/src/assets/img/iconos/behance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/iconos/instagram.svg b/src/assets/img/iconos/instagram.svg new file mode 100644 index 0000000..0806c7f --- /dev/null +++ b/src/assets/img/iconos/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/iconos/twitter.svg b/src/assets/img/iconos/twitter.svg new file mode 100644 index 0000000..50cf50f --- /dev/null +++ b/src/assets/img/iconos/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Huevo.vue b/src/components/Huevo.vue index 1025591..a997cfb 100644 --- a/src/components/Huevo.vue +++ b/src/components/Huevo.vue @@ -20,7 +20,7 @@ export default { margen: { type: Object, default: function () { - return { arriba: 10, abajo: 10, izquierda: 5, derecha: 10 }; + return { arriba: 30, abajo: 30, izquierda: 30, derecha: 30 }; }, }, @@ -33,15 +33,28 @@ export default { datos: { type: Array, }, - variables: { - Array, - - } + variables: { + Array, + }, }, data() { return { parseDate: d3.timeParse("%d/%m/%Y"), descripcion: "", + meses: [ + "Enero", + "Febrero", + "Marzo", + "Abril", + "Mayo", + "Junio", + "Julio", + "Agosto", + "Septiembre", + "Oct.", + "Noviembre", + "Diciembre", + ], }; }, @@ -54,13 +67,13 @@ export default { this.eje_y = this.svg.select("g.eje-y"); this.configurandoDimensionesSVG(); - this.rmin = this.alto * 0.21; - this.rmax = this.alto * 0.49; + if (this.datos.length > 0) { this.configurandoDimensionesStreams(); this.agregandoNomenclatura(); this.creandoStreams(); } + window.addEventListener("resize", this.reescalandoPantalla); }, methods: { configurandoDimensionesSVG() { @@ -69,6 +82,8 @@ export default { this.margen.izquierda - this.margen.derecha; this.alto = this.ancho; + this.rmin = this.alto * 0.21; + this.rmax = this.alto * 0.49; this.svg .attr("width", this.ancho + this.margen.izquierda + this.margen.derecha) .attr("height", this.alto + this.margen.arriba + this.margen.abajo); @@ -86,16 +101,19 @@ export default { .range([-Math.PI * 0.5, 1.5 * Math.PI]); this.escalaRad = d3 .scaleLinear() - .domain([0, d3.max( + .domain([ + 0, + d3.max( this.datos.map((d) => d3.sum(this.variables.map((dd) => d[dd.cve]))) - )]) + ), + ]) //.domain([0,1]) .range([this.rmin, this.rmax]); - - this.datos_apilados = d3 + + this.datos_apilados = d3 .stack() .offset(d3.stackOffsetNone) - .keys(this.variables.map(d=>d.cve))(this.datos); + .keys(this.variables.map((d) => d.cve))(this.datos); this.reordenamientoDatosApilados(); }, reordenamientoDatosApilados() { @@ -125,15 +143,18 @@ export default { contador_apilador += diccionario_apilado[cats].delta; } } - console.log(this.datos_apilados) }, agregandoNomenclatura() { + this.grupo_contenedor.selectAll(".lineas-guia").remove(); + this.grupo_contenedor.selectAll(".texto-guia").remove(); + this.grupo_contenedor .selectAll("lins") .data(d3.range(1, 13)) .enter() .append("line") + .attr("class", "lineas-guia") .attr("x1", (d) => this.rmin * Math.cos(this.escalaAng(d))) .attr("x2", (d) => this.rmax * Math.cos(this.escalaAng(d))) .attr("y1", (d) => this.rmin * Math.sin(this.escalaAng(d))) @@ -146,14 +167,67 @@ export default { .data(d3.range(1, 13)) .enter() .append("text") + .attr("class", "texto-guia") + .attr("x", (d) => this.rmax * Math.cos(this.escalaAng(d))) .attr("y", (d) => this.rmax * Math.sin(this.escalaAng(d))) - .text((d) => "mes " + d) - .style("fill-opacity", ".5") + .text((d) => this.meses[parseInt(d - 1)]) + .style("fill-opacity", ".8") .style("font-family", "Roboto") //.style("text-anchor","middle") .style("dominant-baseline", "middle") + .style("text-anchor", "middle") .style("font-size", "14px"); + + /** + * Lineal + */ + this.grupo_contenedor.selectAll(".radial-escala").remove(); + this.grupo_contenedor + .attr("text-anchor", "middle") + .call((g) => + g + .append("text") + .attr("text-anchor", "end") + .attr("x", "-0.5em") + .attr( + "y", + (d) => -this.escalaRad(this.escalaRad.ticks(5).pop()) - 10 + ) + .attr("dy", "-1em") + .style("fill", "#1a1a1a") + .attr("class", "radial-escala") + .style("fill", "#000") + .text("Defunciones") + + ) + .call((g) => + g + .selectAll("g") + .data(this.escalaRad.ticks(5)) + .join("g") + .attr("fill", "none") + .call((g) => + g + .append("circle") + .attr("class", "radial-escala") + + .style("stroke", "#000") + .style("stroke-opacity", 0.5) + .attr("r", this.escalaRad) + ) + .call((g) => + g + .append("text") + .attr("y", (d) => -this.escalaRad(d)) + .attr("dy", "0.35em") + .attr("class", "radial-escala") + + .style("fill", "#000") + .text(this.escalaRad.tickFormat(6, "s")) + + ) + ); }, creandoStreams() { this.area = d3 @@ -172,24 +246,47 @@ export default { ) .curve(d3.curveCatmullRomClosed); - this.grupo_contenedor + this.streams_apilados = this.grupo_contenedor .selectAll("streams") .data(this.datos_apilados) .enter() .append("path") .attr("class", "areas") .style("fill-opacity", 0.6) - .style("fill", (d) => this.variables.filter(v=>v.cve == d.key)[0].color) + .style( + "fill", + (d) => this.variables.filter((v) => v.cve == d.key)[0].color + ) + .attr("d", this.area) + .attr("class", (d) => "cve-" + d.key); + }, + actualizandoStreams() { + this.streams_apilados + .data(this.datos_apilados) + + .transition() + .duration(1000) + .style( + "fill", + (d) => this.variables.filter((v) => v.cve == d.key)[0].color + ) .attr("d", this.area) .attr("class", (d) => "cve-" + d.key); }, + reescalandoPantalla() { + this.grupo_contenedor.selectAll("path").remove(); + this.configurandoDimensionesSVG(); + + this.configurandoDimensionesStreams(); + this.agregandoNomenclatura(); + this.creandoStreams(); + }, }, watch: { datos(nv) { - this.grupo_contenedor.selectAll("path").remove() this.configurandoDimensionesStreams(); this.agregandoNomenclatura(); - this.creandoStreams(); + this.actualizandoStreams(); }, }, }; diff --git a/src/components/OrdinalBrush.vue b/src/components/OrdinalBrush.vue index cb174fd..c38b7c0 100644 --- a/src/components/OrdinalBrush.vue +++ b/src/components/OrdinalBrush.vue @@ -70,7 +70,7 @@ export default { .join("text") .attr("x", d => this.x(d)) .attr("dy", "0.35em") - .attr("font-size", "14px") + .attr("font-size", "12px") .text(d => d); @@ -87,7 +87,7 @@ export default { const i0 = d3.bisectRight(range, selection[0]); const i1 = d3.bisectRight(range, selection[1]); - this.bar.attr("fill", (d, i) => i0 <= i && i < i1 ? "orange" : null); + this.bar.attr("fill", (d, i) => i0 <= i && i < i1 ? "#36d9c1" : null); this.bar.attr("activa", (d, i) => i0 <= i && i < i1 ? true : null); this.listado_seleccionado = this.x.domain().slice(i0, i1) } else { diff --git a/src/components/navegacion/Footer.vue b/src/components/navegacion/Footer.vue new file mode 100644 index 0000000..fcfe3e8 --- /dev/null +++ b/src/components/navegacion/Footer.vue @@ -0,0 +1,123 @@ + + + \ No newline at end of file diff --git a/src/components/navegacion/Header.vue b/src/components/navegacion/Header.vue new file mode 100644 index 0000000..10123bc --- /dev/null +++ b/src/components/navegacion/Header.vue @@ -0,0 +1,72 @@ + + + + + \ No newline at end of file diff --git a/src/components/navegacion/Menu.vue b/src/components/navegacion/Menu.vue new file mode 100644 index 0000000..48f8862 --- /dev/null +++ b/src/components/navegacion/Menu.vue @@ -0,0 +1,122 @@ + + + \ No newline at end of file diff --git a/src/components/navegacion/TarjetaPortafolio.vue b/src/components/navegacion/TarjetaPortafolio.vue new file mode 100644 index 0000000..1b1db39 --- /dev/null +++ b/src/components/navegacion/TarjetaPortafolio.vue @@ -0,0 +1,100 @@ + + + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 8174d41..716d9c4 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,9 +1,7 @@ import Vue from 'vue' import VueRouter from 'vue-router' -import Home from '../views/Home.vue' import DefuncionesTemporales from '../views/DefuncionesTemporales.vue' -import CasoChiapas from '../views/CasoChiapas.vue' Vue.use(VueRouter) @@ -11,19 +9,10 @@ Vue.use(VueRouter) const routes = [ { path: '/', - name: 'Home', - component: Home - }, - { - path: '/defunciones', name: 'DefuncionesTemporales', component: DefuncionesTemporales }, - { - path: '/chiapas', - name: 'CasoChiapas', - component: CasoChiapas - } + ] const router = new VueRouter({ diff --git a/src/views/DefuncionesTemporales.vue b/src/views/DefuncionesTemporales.vue index e639621..0e9b0b0 100644 --- a/src/views/DefuncionesTemporales.vue +++ b/src/views/DefuncionesTemporales.vue @@ -1,71 +1,111 @@ \ No newline at end of file