From f8bc6d8a8d5c7a5e943630d37bf2a3819df7ad84 Mon Sep 17 00:00:00 2001
From: jdanielgoh <jdanielgoh@ciencias.unam.mx>
Date: Thu, 10 Aug 2023 16:29:55 -0600
Subject: [PATCH] Agregamos una version en ingles

---
 src/App.vue                           |  45 +-
 src/assets/data/catalogo_en.json      |   1 +
 src/components/Huevo.vue              |  30 +-
 src/components/StreamGraph.vue        |   3 +
 src/router/index.js                   |   6 +
 src/views/DefuncionesTemporales.vue   |  86 +++-
 src/views/DefuncionesTemporalesEn.vue | 672 ++++++++++++++++++++++++++
 7 files changed, 771 insertions(+), 72 deletions(-)
 create mode 100644 src/assets/data/catalogo_en.json
 create mode 100644 src/views/DefuncionesTemporalesEn.vue

diff --git a/src/App.vue b/src/App.vue
index cb8cc44..bed70d7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,50 +1,7 @@
 <template>
   <div id="app">
     <Header></Header>
-    <div class="contenedor-flex">
-      <div class="contenedor-texto">
-        <h1>Mortalidad de niñas, niños y adolescentes en México</h1>
-        <p>
-          Este proyecto surge a partir del
-          <i> Datatón sobre la niñez y adolescencia en México 2023</i>. La
-          herramienta está dirigida a personas investigadoras, tomadoras de
-          decisiones y a la ciudadania con interés en obtener información
-          preventiva para las infancias.
-        </p>
-        <p>
-          A partir de una exploración de la base de datos
-          <a
-            href="https://datamx.io/dataset/mortalidad-de-ninas-ninos-y-adolescentes-en-chiapas-2021"
-            ><i>Mortalidad de Niñas, Niños y Adolescentes en Chiapas 2021</i></a
-          >
-          proporcionada por <a href="https://redias.org/">REDIAS</a> se encontró
-          que para el rango de edad entre 14 y 15 años, una de las principales
-          causas de muerte son las lesiones autoinflingidas intencionalmente,
-          así como las agresiones fueron la principal causa de muerte de
-          personas de 16 años. A partir de ello surgen varias preguntas ¿cómo ha
-          impactado la pandemia en las causas de muerte de la población
-          adolescente e infantil?, ¿existe alguna estacionalidad anual en la
-          cual ciertas causas de defunción incrementen? y ¿Cúales son las
-          principales causas de mortalidad para cualquier grupo de edad y como
-          han cambiado estas causas a lo largo de tiempo?
-        </p>
-
-        <p>
-          Para responder las preguntas anteriores se usaron los
-          <a href="https://www.inegi.org.mx/programas/mortalidad/#Microdatos"
-            >microdatos de mortalidad de INEGI</a
-          >
-          y las
-          <a
-            href="https://datos.gob.mx/busca/dataset/proyecciones-de-la-poblacion-de-mexico-y-de-las-entidades-federativas-2016-2050/resource/353817d4-ac9d-4709-bbd9-52936fe0423f"
-            >proyecciones de población de CONAPO a mitad de año</a> para hacer el cálculo de las tasas y reducir sesgos poblacionales.
-          Con las visualizaciones que se muestran a continuación se pretende dar
-          a la persona usuaria las herramientas para responder las preguntas
-          anteriores. Puedes modificar los controles para obtener información
-          del grupo poblacional de tu interés.
-        </p>
-      </div>
-    </div>
+    
     <router-view class="vista-router-view" />
     <div class="ancho-maxi">
       <p><b>Repositorio del proyecto</b></p>
diff --git a/src/assets/data/catalogo_en.json b/src/assets/data/catalogo_en.json
new file mode 100644
index 0000000..6fbe508
--- /dev/null
+++ b/src/assets/data/catalogo_en.json
@@ -0,0 +1 @@
+[{"CVE_CAPGPO":1701,"CAPGPO":"Congenital Malformations of the Nervous System"},{"CVE_CAPGPO":1605,"CAPGPO":"Specific infections of the perinatal period"},{"CVE_CAPGPO":1604,"CAPGPO":"Specific respiratory and cardiovascular disorders of the perinatal period"},{"CVE_CAPGPO":1703,"CAPGPO":"Congenital malformations of the circulatory system"},{"CVE_CAPGPO":111,"CAPGPO":"Viral infections characterized by skin lesions and mucous membranes"},{"CVE_CAPGPO":1706,"CAPGPO":"Other congenital malformations of the digestive system"},{"CVE_CAPGPO":1711,"CAPGPO":"Chromosomal anomalies, not classified elsewhere"},{"CVE_CAPGPO":1709,"CAPGPO":"Congenital malformations and deformities of the osteomuscular system"},{"CVE_CAPGPO":611,"CAPGPO":"Other nervous system disorders"},{"CVE_CAPGPO":1606,"CAPGPO":"Hemorrhagic and hematological disorders of the fetus and newborn"},{"CVE_CAPGPO":1006,"CAPGPO":"Lung diseases due to external agents (J60-J70)"},{"CVE_CAPGPO":405,"CAPGPO":"Malnutrition"},{"CVE_CAPGPO":1002,"CAPGPO":"Influenza (flu)"},{"CVE_CAPGPO":1603,"CAPGPO":"Birth trauma"},{"CVE_CAPGPO":906,"CAPGPO":"Other forms of heart disease"},{"CVE_CAPGPO":1602,"CAPGPO":"Disorders related to the duration of pregnancy and fetal growth"},{"CVE_CAPGPO":214,"CAPGPO":"Tumors (neoplasms) malignant lymphatic tissue, hematopoietic organs and related tissues"},{"CVE_CAPGPO":2017,"CAPGPO":"Other accidents that obstruct breathing"},{"CVE_CAPGPO":1608,"CAPGPO":"Digestive system disorders of the fetus and newborn (P75-P78)"},{"CVE_CAPGPO":1813,"CAPGPO":"Causes of poorly defined and unknown mortality"},{"CVE_CAPGPO":903,"CAPGPO":"Hypertensive diseases"},{"CVE_CAPGPO":604,"CAPGPO":"Other degenerative diseases of the nervous system"},{"CVE_CAPGPO":101,"CAPGPO":"Infectious intestinal diseases"},{"CVE_CAPGPO":1610,"CAPGPO":"Other disorders originated in the perinatal period"},{"CVE_CAPGPO":1007,"CAPGPO":"Other respiratory diseases that mainly affect the interstitium"},{"CVE_CAPGPO":708,"CAPGPO":"Optical nerve disorders and optical pathways"},{"CVE_CAPGPO":610,"CAPGPO":"Cerebral palsy and other paralitic syndromes"},{"CVE_CAPGPO":1710,"CAPGPO":"Other congenital malformations"},{"CVE_CAPGPO":1704,"CAPGPO":"Congenital Malformations of the Respiratory System"},{"CVE_CAPGPO":104,"CAPGPO":"Other bacterial diseases"},{"CVE_CAPGPO":1601,"CAPGPO":"Fetus and newborn affected by maternal factors and complications of pregnancy, labor and childbirth"},{"CVE_CAPGPO":907,"CAPGPO":"Cerebrovascular diseases"},{"CVE_CAPGPO":408,"CAPGPO":"Metabolic disorders"},{"CVE_CAPGPO":1403,"CAPGPO":"Renal insufficiency"},{"CVE_CAPGPO":115,"CAPGPO":"Mycosis"},{"CVE_CAPGPO":1106,"CAPGPO":"Other intestine diseases"},{"CVE_CAPGPO":1008,"CAPGPO":"Suppurative and necrotic conditions of the lower respiratory tract (J85-J86)"},{"CVE_CAPGPO":1808,"CAPGPO":"Symptoms and general signs (R50-R69)"},{"CVE_CAPGPO":1708,"CAPGPO":"Congenital malformations of the urinary system"},{"CVE_CAPGPO":109,"CAPGPO":"Viral infections of the central nervous system"},{"CVE_CAPGPO":1102,"CAPGPO":"Esophagus, stomach and duodenum diseases"},{"CVE_CAPGPO":303,"CAPGPO":"Aplastic anemias and other anemias"},{"CVE_CAPGPO":211,"CAPGPO":"Malignant eye, brain tumors and other parts of the central nervous system"},{"CVE_CAPGPO":204,"CAPGPO":"Malignant bones and joint cartilage tumors (C40-C41)"},{"CVE_CAPGPO":608,"CAPGPO":"Polyneuropathies and other peripheral nervous system disorders (G60-G64)"},{"CVE_CAPGPO":1305,"CAPGPO":"Systemic conjunctive tissue disorders (M30-M36)"},{"CVE_CAPGPO":209,"CAPGPO":"Malignant tumors of male genital organs (C60-C63)"},{"CVE_CAPGPO":1406,"CAPGPO":"Other urinary system diseases (N30-N39)"},{"CVE_CAPGPO":2009,"CAPGPO":"Other land transport accidents (V80-V89)"},{"CVE_CAPGPO":2001,"CAPGPO":"Pedestrian injured in transport accident (V01-V09)"},{"CVE_CAPGPO":2016,"CAPGPO":"Accidental drowning and submersion (W65-W74)"},{"CVE_CAPGPO":2013,"CAPGPO":"Falls (W00-W19)"},{"CVE_CAPGPO":1010,"CAPGPO":"Other respiratory system diseases"},{"CVE_CAPGPO":1405,"CAPGPO":"Other kidney and ureter disorders"},{"CVE_CAPGPO":2026,"CAPGPO":"Intentionally self -inflicted injuries"},{"CVE_CAPGPO":2014,"CAPGPO":"Exposure to inanimate mechanical forces"},{"CVE_CAPGPO":601,"CAPGPO":"Inflammatory diseases of the central nervous system"},{"CVE_CAPGPO":1005,"CAPGPO":"Chronic diseases of the lower respiratory tract"},{"CVE_CAPGPO":905,"CAPGPO":"Cardiopulmonary disease and pulmonary circulation diseases"},{"CVE_CAPGPO":105,"CAPGPO":"Infections with predominantly sexual transmission mode"},{"CVE_CAPGPO":218,"CAPGPO":"Tumors (neoplasms) of uncertain or unknown behavior"},{"CVE_CAPGPO":213,"CAPGPO":"Malignant tumors (neoplasia) of poorly defined, secondary and non -specified sites"},{"CVE_CAPGPO":606,"CAPGPO":"Episodic and paroxysmal disorders"},{"CVE_CAPGPO":1104,"CAPGPO":"Hernia"},{"CVE_CAPGPO":1110,"CAPGPO":"Other Digestive System diseases"},{"CVE_CAPGPO":113,"CAPGPO":"Human immunodeficiency virus (HIV) disease"},{"CVE_CAPGPO":1609,"CAPGPO":"Conditions associated with the tegumentary regulation and the temperature of the fetus and the newborn"},{"CVE_CAPGPO":404,"CAPGPO":"Disorders of other endocrine glands"},{"CVE_CAPGPO":910,"CAPGPO":"Other disorders and the non -specified circulatory system"},{"CVE_CAPGPO":203,"CAPGPO":"Malignant tumors of respiratory and intrathoracic organs"},{"CVE_CAPGPO":206,"CAPGPO":"Malignant tumors of mesothelial tissues and soft tissues"},{"CVE_CAPGPO":1409,"CAPGPO":"Inflammatory diseases of female pelvic organs"},{"CVE_CAPGPO":212,"CAPGPO":"Malignant tumors of the thyroid gland and other endocrine glands"},{"CVE_CAPGPO":1705,"CAPGPO":"Leporino palate and lip fissure"},{"CVE_CAPGPO":304,"CAPGPO":"Coagulation, purple and other hemorrhagic conditions (D65-D69)"},{"CVE_CAPGPO":217,"CAPGPO":"Benign tumors (neoplasms)"},{"CVE_CAPGPO":1103,"CAPGPO":"Appendix diseases"},{"CVE_CAPGPO":108,"CAPGPO":"Rickettsiosis"},{"CVE_CAPGPO":1109,"CAPGPO":"Biliary gallbladder, bile and pancreas roads (K80-K87)"},{"CVE_CAPGPO":1108,"CAPGPO":"Liver diseases"},{"CVE_CAPGPO":402,"CAPGPO":"Mellitus diabetes"},{"CVE_CAPGPO":112,"CAPGPO":"Viral hepatitis (B15-B19)"},{"CVE_CAPGPO":609,"CAPGPO":"Muscle and neuromuscular union diseases"},{"CVE_CAPGPO":210,"CAPGPO":"Malignant tumors of the urinary tract"},{"CVE_CAPGPO":1508,"CAPGPO":"Other obstetric conditions not classified elsewhere (O95-O99)"},{"CVE_CAPGPO":2025,"CAPGPO":"Accidental exhibition to other factors and those not specified (X58-X59)"},{"CVE_CAPGPO":2027,"CAPGPO":"Aggressions"},{"CVE_CAPGPO":2028,"CAPGPO":"Not determined intention events"},{"CVE_CAPGPO":2018,"CAPGPO":"Exposure to electric current, radiation and temperature, and extreme environmental air pressure"},{"CVE_CAPGPO":2005,"CAPGPO":"Car occupant injured in transport accident (V40-V49)"},{"CVE_CAPGPO":2019,"CAPGPO":"Exposure to smoke, fire and flames"},{"CVE_CAPGPO":2023,"CAPGPO":"Accidental poisoning by, and exposure to harmful substances (X40-X49)"},{"CVE_CAPGPO":2007,"CAPGPO":"Heavy transport vehicle occupant in transport accident (V60-V69)"},{"CVE_CAPGPO":2003,"CAPGPO":"Motorcyclist injured in transport accident (V20-V29)"},{"CVE_CAPGPO":1607,"CAPGPO":"Specific endocrine and metabolic disorders of the fetus and newborn (P70-P74)"},{"CVE_CAPGPO":904,"CAPGPO":"Ischemic diseases of the heart (i20-i25)"},{"CVE_CAPGPO":504,"CAPGPO":"Humor disorders (affective) (F30-F39)"},{"CVE_CAPGPO":1004,"CAPGPO":"Other diseases of the upper respiratory tract (J30-J39)"},{"CVE_CAPGPO":2002,"CAPGPO":"Cyclist injured in transport accident (V10-V19)"},{"CVE_CAPGPO":2022,"CAPGPO":"Exposure to forces of nature (X30 -X39)"},{"CVE_CAPGPO":202,"CAPGPO":"Malignant tumors of digestive organs (C15-C26)"},{"CVE_CAPGPO":908,"CAPGPO":"Diseases of arteries, arterioles and hair vessels (i70-i79)"},{"CVE_CAPGPO":1402,"CAPGPO":"Renal Tubulointersticial disease (N10-N16)"},{"CVE_CAPGPO":205,"CAPGPO":"Melanoma and other malignant skin tumors (C43-C44)"},{"CVE_CAPGPO":602,"CAPGPO":"Systemic atrophy that mainly affect the central nervous system (G10-G13)"},{"CVE_CAPGPO":2006,"CAPGPO":"Truck occupant or injured van in transport accident (V50-V59)"},{"CVE_CAPGPO":1107,"CAPGPO":"Peritoneum diseases (K65-K67)"},{"CVE_CAPGPO":1003,"CAPGPO":"Other acute infections of the lower respiratory tract (J20-J22)"},{"CVE_CAPGPO":116,"CAPGPO":"Diseases due to protozoa (B50-B64)"},{"CVE_CAPGPO":2033,"CAPGPO":"Surgical procedures and other medical procedures such as the abnormal reaction of the patient or subsequent complication, without mention of incident at the time of carrying out the procedure (Y34-Y84)"},{"CVE_CAPGPO":1001,"CAPGPO":"Acute infections of the upper respiratory tract (J00-J06)"},{"CVE_CAPGPO":1401,"CAPGPO":"Glomerular diseases (N00-N08)"},{"CVE_CAPGPO":1009,"CAPGPO":"Other pleura diseases (J90-J94)"},{"CVE_CAPGPO":306,"CAPGPO":"Certain disorders that affect the mechanism of immunity (D80-D89)"},{"CVE_CAPGPO":301,"CAPGPO":"Nutritional anemias (D50-D53)"},{"CVE_CAPGPO":215,"CAPGPO":"Malignant (primary) tumors (primary) of multiple independent sites (C97)"},{"CVE_CAPGPO":1801,"CAPGPO":"Symptoms and signs that involve circulatory and respiratory systems (R00-R09)"},{"CVE_CAPGPO":110,"CAPGPO":"Viral fevers transmitted by arthropods and hemorrhagic viral fevers (A90-A99)"},{"CVE_CAPGPO":102,"CAPGPO":"Tuberculosis (A15-A19)"},{"CVE_CAPGPO":1804,"CAPGPO":"Symptoms and signs that involve nervous and osteomuscular systems (R25-R29)"},{"CVE_CAPGPO":1802,"CAPGPO":"Symptoms and signs that involve the digestive system and abdomen (R10-R19)"},{"CVE_CAPGPO":401,"CAPGPO":"Thyroid gland disorders (E00-E07)"},{"CVE_CAPGPO":119,"CAPGPO":"Sequelae of infectious and parasitic diseases (B90-B94)"},{"CVE_CAPGPO":909,"CAPGPO":"Venas and lymph ganglia diseases, not classified elsewhere (i80-i89)"},{"CVE_CAPGPO":302,"CAPGPO":"Hemolytic anemias (D55-D59)"},{"CVE_CAPGPO":1503,"CAPGPO":"Other maternal disorders mainly related to pregnancy (O20-O29)"},{"CVE_CAPGPO":2034,"CAPGPO":"Sequelae of external causes of morbidity and mortality (Y85-Y89)"},{"CVE_CAPGPO":1301,"CAPGPO":"Infectious arthropathies (M00-M03)"},{"CVE_CAPGPO":118,"CAPGPO":"Pediculosis, acadeosis and other infestations (B85-B89)"},{"CVE_CAPGPO":2020,"CAPGPO":"Heat contact and hot substances (X10-X19)"},{"CVE_CAPGPO":2021,"CAPGPO":"Traumatic contact with animals and poisonous plants (x 20-x 29)"},{"CVE_CAPGPO":305,"CAPGPO":"Other blood diseases and hematopoietic organs (D70-D77)"},{"CVE_CAPGPO":208,"CAPGPO":"Malignant tumors of female genital organs (C51-C58)"},{"CVE_CAPGPO":1208,"CAPGPO":"Other skin disorders and subcutaneous tissue (L80-L99)"},{"CVE_CAPGPO":902,"CAPGPO":"Chronic rheumatic heart disease (I05-I09)"},{"CVE_CAPGPO":407,"CAPGPO":"Obesity and other types of hyperalimentation (E65-E68)"},{"CVE_CAPGPO":605,"CAPGPO":"Demonicizing diseases of the central nervous system (G35-G37)"},{"CVE_CAPGPO":1507,"CAPGPO":"Complications mainly related to the puerperium (O85-O92)"},{"CVE_CAPGPO":1501,"CAPGPO":"Pregnancy finished in abortion"},{"CVE_CAPGPO":802,"CAPGPO":"Middle -ear diseases and mastoid"},{"CVE_CAPGPO":1309,"CAPGPO":"Muscles disorders"},{"CVE_CAPGPO":2015,"CAPGPO":"Exposure to animated mechanical forces"},{"CVE_CAPGPO":1502,"CAPGPO":"Edema, proteinuria and hypertensive disorders in pregnancy, childbirth and puerperium"},{"CVE_CAPGPO":114,"CAPGPO":"Other viral diseases"},{"CVE_CAPGPO":702,"CAPGPO":"Conjunctiva disorders"},{"CVE_CAPGPO":1311,"CAPGPO":"Other soft tissue disorders"},{"CVE_CAPGPO":1407,"CAPGPO":"Male genital organ diseases"},{"CVE_CAPGPO":1707,"CAPGPO":"Congenital malformations of the genital organs"},{"CVE_CAPGPO":1203,"CAPGPO":"Dermatitis and eczema"},{"CVE_CAPGPO":2030,"CAPGPO":"Drugs, medications and biological substances causing adverse effects on their therapeutic use"},{"CVE_CAPGPO":502,"CAPGPO":"Mental and behavioral disorders due to the use of psychoactive substances"},{"CVE_CAPGPO":509,"CAPGPO":"Psychological development disorders"},{"CVE_CAPGPO":1505,"CAPGPO":"Complications of labor and childbirth"},{"CVE_CAPGPO":2008,"CAPGPO":"Bus occupant injured in transport accident"},{"CVE_CAPGPO":117,"CAPGPO":"Helmintiasis"},{"CVE_CAPGPO":207,"CAPGPO":"Malignant breast tumor"},{"CVE_CAPGPO":121,"CAPGPO":"Other infectious diseases"},{"CVE_CAPGPO":1201,"CAPGPO":"Skin and subcutaneous tissue infections"},{"CVE_CAPGPO":1314,"CAPGPO":"Condropathies"},{"CVE_CAPGPO":403,"CAPGPO":"Other disorders of glucose regulation and internal secretion of the pancreas"},{"CVE_CAPGPO":1105,"CAPGPO":"Non -infectious enteritis and colitis"},{"CVE_CAPGPO":2004,"CAPGPO":"Three -wheeled motor vehicle occupant injured in transport accident"},{"CVE_CAPGPO":2031,"CAPGPO":"Incidents that occurred to the patient during medical and surgical care"},{"CVE_CAPGPO":1307,"CAPGPO":"Spondylopathies"},{"CVE_CAPGPO":503,"CAPGPO":"Schizophrenia, schizotypal disorders and delusional disorders"},{"CVE_CAPGPO":603,"CAPGPO":"Extrapyramidal and movement disorders"},{"CVE_CAPGPO":103,"CAPGPO":"Certain bacterial zoonoses (A20-A28)"},{"CVE_CAPGPO":2010,"CAPGPO":"Water transport accidents"},{"CVE_CAPGPO":406,"CAPGPO":"Other nutritional deficiencies"},{"CVE_CAPGPO":705,"CAPGPO":"Choroid and retina disorders"},{"CVE_CAPGPO":501,"CAPGPO":"Organic mental disorders, including symptomatic disorders"},{"CVE_CAPGPO":2029,"CAPGPO":"Legal intervention and war operations"},{"CVE_CAPGPO":505,"CAPGPO":"Neurotic disorders, stress -related disorders and somatomorphic disorders"},{"CVE_CAPGPO":1504,"CAPGPO":"Maternal care related to the fetus and amniotic cavity and with possible problems of childbirth"},{"CVE_CAPGPO":1205,"CAPGPO":"Urticaria and erythema"},{"CVE_CAPGPO":1101,"CAPGPO":"Diseases of the oral cavity, the salivary and maxillary glands"},{"CVE_CAPGPO":1312,"CAPGPO":"Density and bone structure disorders"},{"CVE_CAPGPO":2011,"CAPGPO":"Air and space transport accidents"},{"CVE_CAPGPO":201,"CAPGPO":"Malignant tumors of the lip, oral cavity and pharynx"},{"CVE_CAPGPO":1410,"CAPGPO":"Non -inflammatory disorders of female genital organs"},{"CVE_CAPGPO":1806,"CAPGPO":"Symptoms and signs that involve knowledge, perception, emotional state and behavior"},{"CVE_CAPGPO":607,"CAPGPO":"Nerve disorders, roots and nerve plexus"},{"CVE_CAPGPO":1702,"CAPGPO":"Congenital malformations of the eye, ear, face and neck"},{"CVE_CAPGPO":701,"CAPGPO":"Eyelid disorders, tear and orbit apparatus"},{"CVE_CAPGPO":1313,"CAPGPO":"Other osteopathies"},{"CVE_CAPGPO":2024,"CAPGPO":"Excess effort, trips and deprivation"},{"CVE_CAPGPO":1404,"CAPGPO":"Urinary lithiasis"},{"CVE_CAPGPO":1302,"CAPGPO":"Inflammatory polyartropathies"},{"CVE_CAPGPO":508,"CAPGPO":"Mental retardation"},{"CVE_CAPGPO":1308,"CAPGPO":"Other dorsopathies"},{"CVE_CAPGPO":1306,"CAPGPO":"Deforming dorsopathies"},{"CVE_CAPGPO":1207,"CAPGPO":"Faneras disorders"},{"CVE_CAPGPO":709,"CAPGPO":"Disorders of the eye muscles, binocular movement, accommodation and refraction"},{"CVE_CAPGPO":506,"CAPGPO":"Behavior syndromes associated with physiological alterations and physical factors"},{"CVE_CAPGPO":803,"CAPGPO":"Internal ear diseases"},{"CVE_CAPGPO":1106,"CAPGPO":"Other intestine diseases"},{"CVE_CAPGPO":602,"CAPGPO":"Systemic atrophy that mainly affect the central nervous system"},{"CVE_CAPGPO":510,"CAPGPO":"Emotional and behavior disorders that usually appear in childhood and adolescence"},{"CVE_CAPGPO":1303,"CAPGPO":"Osteoarthritis (M15-M19)"},{"CVE_CAPGPO":901,"CAPGPO":"Acute rheumatic fever"},{"CVE_CAPGPO":1803,"CAPGPO":"Symptoms and signs that involve skin and subcutaneous tissue"},{"CVE_CAPGPO":106,"CAPGPO":"Other diseases due to spirochetes"},{"CVE_CAPGPO":2032,"CAPGPO":"Medical devices for diagnostic and therapeutic use associated with adverse incidents"},{"CVE_CAPGPO":2201,"CAPGPO":"Provisional assignment of new affections of uncertain or emerging use etiology"},{"CVE_CAPGPO":511,"CAPGPO":"Mental disorder not specified"},{"CVE_CAPGPO":1202,"CAPGPO":"Flictenular disorders"},{"CVE_CAPGPO":1812,"CAPGPO":"Abnormal findings in diagnosis by images and functional studies, without diagnosis"},{"CVE_CAPGPO":707,"CAPGPO":"Vitreous body disorders and eyeball"},{"CVE_CAPGPO":703,"CAPGPO":"Sclerotic, cornea, iris and ciliary disorders"},{"CVE_CAPGPO":1809,"CAPGPO":"Abnormal findings in the blood test, without diagnosis"},{"CVE_CAPGPO":1310,"CAPGPO":"Tendons and synovia disorders"}]
\ No newline at end of file
diff --git a/src/components/Huevo.vue b/src/components/Huevo.vue
index 236447d..c760dcc 100644
--- a/src/components/Huevo.vue
+++ b/src/components/Huevo.vue
@@ -66,18 +66,18 @@ export default {
       parseDate: d3.timeParse("%d/%m/%Y"),
       descripcion: "",
       meses: [
-        "Enero",
-        "Febrero",
-        "Marzo",
-        "Abril",
-        "Mayo",
-        "Junio",
-        "Julio",
-        "Agosto",
-        "Septiembre",
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
         "Oct.",
-        "Noviembre",
-        "Diciembre",
+        "November",
+        "Dicember",
       ],
       alto:0
     };
@@ -241,7 +241,7 @@ export default {
             .attr("class", "radial-escala")
             .style("fill", "#000")
             .attr("text-anchor","middle")
-            .text("Defunciones")
+            .text("Deaths")
         )
         .call((g) =>
           g
@@ -339,11 +339,15 @@ export default {
       this.tooltip
         .style("visibility", "visible")
         .style(
-          "left",
+          "left",window.innerWidth> 768 ?
           `${
             angulo < Math.PI
               ? evento.layerX - this.ancho_tooltip - 15
               : evento.layerX + 15
+          }px`:`${
+            angulo < Math.PI
+              ? (evento.layerX - this.ancho_tooltip - 15<0?0:  evento.layerX - this.ancho_tooltip - 15)
+              : (evento.layerX + 15 + this.ancho_tooltip > this.ancho ? this.ancho - this.ancho_tooltip : evento.layerX + 15)
           }px`
         )
         .attr("width", this.ancho_tooltip)
diff --git a/src/components/StreamGraph.vue b/src/components/StreamGraph.vue
index 151173a..6208cc3 100644
--- a/src/components/StreamGraph.vue
+++ b/src/components/StreamGraph.vue
@@ -514,6 +514,9 @@ export default {
                     evento.layerX -
                     this.ancho_tooltip +
                     this.ancho_leyenda_y -
+                    20< 0 ?  0 : evento.layerX -
+                    this.ancho_tooltip +
+                    this.ancho_leyenda_y -
                     20
                   }px`
                 : `${evento.layerX + this.ancho_leyenda_y + 20}px`
diff --git a/src/router/index.js b/src/router/index.js
index 716d9c4..02d585a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import DefuncionesTemporales from '../views/DefuncionesTemporales.vue'
+import DefuncionesTemporalesEn from '../views/DefuncionesTemporalesEn.vue'
 
 
 Vue.use(VueRouter)
@@ -12,6 +13,11 @@ const routes = [
     name: 'DefuncionesTemporales',
     component: DefuncionesTemporales
   },
+  {
+    path: '/en',
+    name: 'DefuncionesTemporalesEn',
+    component: DefuncionesTemporalesEn
+  },
 
 ]
 
diff --git a/src/views/DefuncionesTemporales.vue b/src/views/DefuncionesTemporales.vue
index f16940a..62f85f7 100644
--- a/src/views/DefuncionesTemporales.vue
+++ b/src/views/DefuncionesTemporales.vue
@@ -1,5 +1,51 @@
 <template>
   <div id="vista-defunciones-temporales">
+    <div class="contenedor-flex">
+      <div class="contenedor-texto">
+        <h1>Mortalidad de niñas, niños y adolescentes en México</h1>
+        <p>
+          Este proyecto surge a partir del
+          <i> Datatón sobre la niñez y adolescencia en México 2023</i>. La
+          herramienta está dirigida a personas investigadoras, tomadoras de
+          decisiones y a la ciudadania con interés en obtener información
+          preventiva para las infancias.
+        </p>
+        <p>
+          A partir de una exploración de la base de datos
+          <a
+            href="https://datamx.io/dataset/mortalidad-de-ninas-ninos-y-adolescentes-en-chiapas-2021"
+            ><i>Mortalidad de Niñas, Niños y Adolescentes en Chiapas 2021</i></a
+          >
+          proporcionada por <a href="https://redias.org/">REDIAS</a> se encontró
+          que para el rango de edad entre 14 y 15 años, una de las principales
+          causas de muerte son las lesiones autoinflingidas intencionalmente,
+          así como las agresiones fueron la principal causa de muerte de
+          personas de 16 años. A partir de ello surgen varias preguntas ¿cómo ha
+          impactado la pandemia en las causas de muerte de la población
+          adolescente e infantil?, ¿existe alguna estacionalidad anual en la
+          cual ciertas causas de defunción incrementen? y ¿Cúales son las
+          principales causas de mortalidad para cualquier grupo de edad y como
+          han cambiado estas causas a lo largo de tiempo?
+        </p>
+
+        <p>
+          Para responder las preguntas anteriores se usaron los
+          <a href="https://www.inegi.org.mx/programas/mortalidad/#Microdatos"
+            >microdatos de mortalidad de INEGI</a
+          >
+          y las
+          <a
+            href="https://datos.gob.mx/busca/dataset/proyecciones-de-la-poblacion-de-mexico-y-de-las-entidades-federativas-2016-2050/resource/353817d4-ac9d-4709-bbd9-52936fe0423f"
+            >proyecciones de población de CONAPO a mitad de año</a
+          >
+          para hacer el cálculo de las tasas y reducir sesgos poblacionales. Con
+          las visualizaciones que se muestran a continuación se pretende dar a
+          la persona usuaria las herramientas para responder las preguntas
+          anteriores. Puedes modificar los controles para obtener información
+          del grupo poblacional de tu interés.
+        </p>
+      </div>
+    </div>
     <div class="tablero">
       <div class="col-controles">
         <h2>Controles</h2>
@@ -175,16 +221,26 @@
           }}
           de 2012 a 2021 del top 10 de causas de defunción
         </h2>
-        Esta visualización de areas apiladas radial muestra el número de
-        defunciones por cada causa que han ocurrido desde 2012 a 2021 según el
-        mes. Permite identificar en cuales periodos alguna de estas causas ha
-        cobrado mayor relevancia.
+        <p>
+          Esta visualización de areas apiladas radial muestra el número de
+          defunciones por cada causa que han ocurrido desde 2012 a 2021 según el
+          mes. Permite identificar en cuales periodos alguna de estas causas ha
+          cobrado mayor relevancia.
+        </p>
+
         <Huevo
           id_stream_circular="huevo"
-          :variables='totales.slice(0, 10).map((d) => ( { cve: d.cve, color: d.color , causa: catalogo[d.cve]}))'
+          :variables="
+            totales
+              .slice(0, 10)
+              .map((d) => ({
+                cve: d.cve,
+                color: d.color,
+                causa: catalogo[d.cve],
+              }))
+          "
           :datos="casos_mensuales_agrupados"
-          
-          >
+        >
         </Huevo>
       </div>
     </div>
@@ -327,8 +383,8 @@ export default {
       casos_mensuales_agrupados: [{ data: [] }],
     };
   },
-  mounted(){
-    this.$ga.page('/');
+  mounted() {
+    this.$ga.page("/");
   },
   beforeMount() {
     d3.csv("data/poblaciones_conapo.csv").then((data_conapo) => {
@@ -421,7 +477,7 @@ export default {
               conapo_2021.get(this.entidades[i].cve)),
           defunciones: estatales_2021.get(this.entidades[i].cve),
           poblacion: conapo_2021.get(this.entidades[i].cve),
-          clave:this.entidades[i].cve
+          clave: this.entidades[i].cve,
         });
       }
       this.data_estatal_2021 = data_estatal_2021;
@@ -584,13 +640,13 @@ export default {
     @media (max-width: 768px) {
       display: inline-block;
       .col-controles {
-        top:0;
-        position:relative;
-        width: 100%;;
+        top: 0;
+        position: relative;
+        width: 100%;
       }
       .col-visualizaciones {
-      width: 100%;
-    }
+        width: 100%;
+      }
     }
   }
 
diff --git a/src/views/DefuncionesTemporalesEn.vue b/src/views/DefuncionesTemporalesEn.vue
new file mode 100644
index 0000000..6b29ea9
--- /dev/null
+++ b/src/views/DefuncionesTemporalesEn.vue
@@ -0,0 +1,672 @@
+<template>
+  <div id="vista-defunciones-temporales">
+    <div class="contenedor-flex">
+      <div class="contenedor-texto">
+        <h1>Child and Adolescents Mortality in Mexico</h1>
+        <p>
+          This project emerged from the
+          <i> Datatón sobre la niñez y adolescencia en México 2023</i>. The
+          tool is aimed at researchers, decision-makers, and citizens interested
+          in obtaining preventive information for children.
+        </p>
+        <p>
+          Based on an exploration of the Mortality Database
+          <a
+            href="https://datamx.io/dataset/mortalidad-de-ninas-ninos-y-adolescentes-en-chiapas-2021"
+            ><i>Mortalidad de Niñas, Niños y Adolescentes en Chiapas 2021</i></a
+          >
+          provided by <a href="https://redias.org/">REDIAS</a> it was found that
+          for the age range between 14 and 15 years old, one of the main causes
+          of death is intentionally self-inflicted injuries, and assaults were
+          the leading cause of death for 16-year-olds. From this, several
+          questions arise: How has the pandemic impacted the causes of death for
+          the adolescent and child population? Is there an annual seasonality in
+          which certain causes of death increase? And what are the main causes
+          of mortality for any age group, and how have these causes changed over
+          time?
+        </p>
+
+        <p>
+          To answer the aforementioned questions, microdata from
+          <a href="https://www.inegi.org.mx/programas/mortalidad/#Microdatos"
+            >microdata from INEGI on mortality
+          </a>
+          and
+          <a
+            href="https://datos.gob.mx/busca/dataset/proyecciones-de-la-poblacion-de-mexico-y-de-las-entidades-federativas-2016-2050/resource/353817d4-ac9d-4709-bbd9-52936fe0423f"
+            >mid-year population projections from CONAPO
+          </a>
+          were used to calculate rates and reduce population biases. The
+          visualizations presented below aim to provide users with the tools to
+          answer the aforementioned questions. You can adjust the controls to
+          obtain information on the specific population group of your interest.
+        </p>
+      </div>
+    </div>
+    <div class="tablero">
+      <div class="col-controles">
+        <h2>Controls</h2>
+        <div class="contenedor-selectores">
+          <div class="contenedor-selector">
+            <p>State</p>
+            <select
+              name="selector-entidad"
+              id="selector-entidad"
+              v-model="estado_seleccionado"
+            >
+              <option
+                v-for="(entidad, i) in entidades"
+                :value="entidad.cve"
+                :key="i"
+              >
+                {{ entidad.estado }}
+              </option>
+            </select>
+          </div>
+          <div class="contenedor-selector">
+            <p>Gender</p>
+            <select
+              name="selector-sexo"
+              id="selector-sexo"
+              v-model="sexo_seleccionado"
+            >
+              <option v-for="(sexo, i) in sexos" :value="sexo.cve" :key="i">
+                {{ sexo.sexo }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <p>Please select an age range (years).</p>
+
+        <OrdinalBrush :getter_store="'cambiaRangoEdadPrincipal'"></OrdinalBrush>
+        <div class="contenedor-barras">
+          <h3>
+            Mortality Rate in 2021 by State for Individuals Aged
+            {{
+              ` ${
+                rango_edad_principal.length > 1
+                  ? rango_edad_principal[0] +
+                    " to " +
+                    rango_edad_principal.slice(-1)
+                  : rango_edad_principal[0]
+              }`
+            }}
+            ,
+            {{
+              ` ${
+                sexo_seleccionado == 0
+                  ? " Both Genders"
+                  : sexo_seleccionado == 1
+                  ? " Male Gender"
+                  : " Female Gender"
+              }`
+            }}
+          </h3>
+          <Barras
+            :barras_id="'id-barras'"
+            :datos="data_estatal_2021"
+            :variables="[
+              { id: 'tasa', nombre_colores: 'rate', color: '#ffffcc' },
+            ]"
+            :nombre_barra="'entidad'"
+            :nombre_color="'nombre_colores'"
+            titulo_eje_y="States"
+            titulo_eje_x="Mortality rate "
+            orientacion="horizontal"
+            :seleccionada="estado_seleccionado"
+            :margen="{ arriba: 10, abajo: 30, izquierda: 54, derecha: 0 }"
+            :alto_vis="400"
+          >
+          </Barras>
+        </div>
+      </div>
+      <div class="col-visualizaciones">
+        <h2>
+          {{
+            `Annual Death Rate ${
+              estado_seleccionado == "00"
+                ? " Nationwide "
+                : " in " + claves_estatales[estado_seleccionado]
+            }`
+          }}
+          for Individuals Aged
+          {{
+            ` ${
+              rango_edad_principal.length > 1
+                ? rango_edad_principal[0] +
+                  " to " +
+                  rango_edad_principal.slice(-1)
+                : rango_edad_principal[0]
+            }`
+          }},
+          {{
+            ` ${
+              sexo_seleccionado == 0
+                ? " Both Genders"
+                : sexo_seleccionado == 1
+                ? " Male Gender"
+                : " Female Gender"
+            }`
+          }}
+        </h2>
+        <p>
+          The ordered stacked area chart displays, using the thickness of each
+          stripe, the death rate per year and by cause. Additionally, these
+          stripes are reordered from bottom to top in an ascending manner,
+          allowing the identification of the top 10 causes per year by hovering
+          your cursor over a year, which triggers an information tooltip.
+        </p>
+        <StreamGraph
+          :stream_graph_id="'streamgraph1'"
+          :datos="datos"
+          :variables="variables"
+          nombre_columna_horizontal="ANIO_OCUR"
+          titulo_eje_y="Death rate per 100,000 inhabitants *"
+          titulo_eje_x="Year"
+          :class="{ cargando: esta_cargando }"
+          :hover_activo="!esta_cargando"
+        >
+        </StreamGraph>
+
+        <p>
+          * Population with the selected annual characteristics in the age,
+          gender, and state or nationwide filters. <br/>
+          ** The diseases were translated into English using the python library googletrans.
+        </p>
+        <div class="nomenclatura">
+          <div
+            v-for="(variable, i) in totales.slice(0, 10)"
+            :key="i"
+            class="variable"
+          >
+            <span :style="{ background: variable.color }"></span>
+            <b>{{ i + 1 }}<sup>{{ i==0? "st": i==1?"nd": i==2?"rd": "th" }}</sup> cause:</b> {{ catalogo[variable.cve] }}
+          </div>
+        </div>
+        <h2>
+          Monthly Cumulative Deaths
+          {{
+            ` ${
+              estado_seleccionado == "00"
+                ? " Nationwide"
+                : " in " + claves_estatales[estado_seleccionado]
+            }`
+          }}
+          for Individuals Aged
+          {{
+            ` ${
+              rango_edad_principal.length > 1
+                ? rango_edad_principal[0] +
+                  " to " +
+                  rango_edad_principal.slice(-1)
+                : rango_edad_principal[0]
+            }`
+          }}
+          , for
+          {{
+            ` ${
+              sexo_seleccionado == 0
+                ? "Both Genders"
+                : sexo_seleccionado == 1
+                ? "Male Genders"
+                : "Female Genders"
+            }`
+          }}
+          , from 2012 to 2021, for the Top 10 Causes of Death
+        </h2>
+        <p>
+          This radial stacked area visualization displays the number of deaths
+          for each cause that have occurred from 2012 to 2021, according to the
+          month. It allows you to identify periods in which any of these causes
+          have become more prominent.
+        </p>
+        <Huevo
+          id_stream_circular="huevo"
+          :variables="
+            totales.slice(0, 10).map((d) => ({
+              cve: d.cve,
+              color: d.color,
+              causa: catalogo[d.cve],
+            }))
+          "
+          :datos="casos_mensuales_agrupados"
+        >
+        </Huevo>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as d3 from "d3";
+import StreamGraph from "../components/StreamGraph.vue";
+import Barras from "../components/Barras.vue";
+import Huevo from "../components/Huevo.vue";
+
+import catalogo from "@/assets/data/catalogo_en.json";
+import OrdinalBrush from "@/components/OrdinalBrush.vue";
+import { mapState } from "vuex";
+var claves_estatales = {
+  "00": "National",
+  "01": "Aguascalientes",
+  "02": "Baja California",
+  "03": "Baja California Sur",
+  "04": "Campeche",
+  "05": "Coahuila",
+  "06": "Colima",
+  "07": "Chiapas",
+  "08": "Chihuahua",
+  "09": "Ciudad de México",
+  10: "Durango",
+  11: "Guanajuato",
+  12: "Guerrero",
+  13: "Hidalgo",
+  14: "Jalisco",
+  15: "México",
+  16: "Michoacán",
+  17: "Morelos",
+  18: "Nayarit",
+  19: "Nuevo León",
+  20: "Oaxaca",
+  21: "Puebla",
+  22: "Querétaro",
+  23: "Quintana Roo",
+  24: "San Luis Potosí",
+  25: "Sinaloa",
+  26: "Sonora",
+  27: "Tabasco",
+  28: "Tamaulipas",
+  29: "Tlaxcala",
+  30: "Veracruz",
+  31: "Yucatán",
+  32: "Zacatecas",
+};
+var claves_estatales_abr = {
+  "00": "Nal.",
+  "01": "Ags",
+  "02": "BC",
+  "03": "BCS",
+  "04": "Camp",
+  "05": "Coah",
+  "06": "Col",
+  "07": "Chis",
+  "08": "Chih",
+  "09": "CDMX",
+  10: "Dur",
+  11: "Gto",
+  12: "Gro",
+  13: "Hgo",
+  14: "Jal",
+  15: "Edo. Mex.",
+  16: "Mich",
+  17: "Mor",
+  18: "Nay",
+  19: "NL",
+  20: "Oax",
+  21: "Pue",
+  22: "Qro",
+  23: "Q. Roo",
+  24: "SLP",
+  25: "Sin",
+  26: "Son",
+  27: "Tab",
+  28: "Tamps",
+  29: "Tlax",
+  30: "Ver",
+  31: "Yuc",
+  32: "Zac",
+};
+const diccionario_causas = {};
+catalogo.map((d) => (diccionario_causas[d.CVE_CAPGPO] = d.CAPGPO));
+export default {
+  name: "DefuncionesTemporales",
+  components: {
+    StreamGraph,
+    OrdinalBrush,
+    Barras,
+    Huevo,
+  },
+  data() {
+    return {
+      claves_estatales: claves_estatales,
+      modal_visible: false,
+      catalogo: diccionario_causas,
+      datos: [],
+      data_completa: [],
+      data_conapo_completa: [],
+      variables: Object.keys(diccionario_causas).map((d, i) => {
+        return {
+          id: d,
+          nombre: diccionario_causas[d],
+          color: "rgba(0,0,0)",
+        };
+      }),
+      colores_top_10: [
+        "#002642",
+        "#840032",
+        "#E59500",
+        "#6F1DAE",
+        "#20A4F3",
+        "#82A407",
+        "#CB45DA",
+        "#F75C03",
+        "#0077DF",
+        "#00955e",
+      ],
+      entidades: Object.keys(claves_estatales)
+        .sort((a, b) => a - b)
+        .map((d) => {
+          return {
+            cve: d,
+            estado: claves_estatales[d],
+          };
+        }),
+      estado_seleccionado: "00",
+      sexos: [
+        { cve: 1, sexo: "Masculino" },
+        { cve: 2, sexo: "Femenino" },
+        { cve: 0, sexo: "Both" },
+      ],
+      totales: [],
+      esta_cargando: true,
+      sexo_seleccionado: 0,
+      data_estatal_2021: [{ tasa: 0 }],
+      casos_mensuales_agrupados: [{ data: [] }],
+    };
+  },
+  mounted() {
+    this.$ga.page("/");
+  },
+  beforeMount() {
+    d3.csv("data/poblaciones_conapo.csv").then((data_conapo) => {
+      data_conapo.forEach((d) => {
+        d.EDAD = +d.EDAD;
+        d.POBLACION = +d.POBLACION;
+      });
+      this.data_conapo_completa = data_conapo;
+      d3.csv("data/datos_2012_2021.csv").then((data) => {
+        this.data_completa = data;
+        this.procesamientoDatos(
+          this.data_completa.filter((d) =>
+            this.rango_edad_principal.includes(d.EDAD)
+          )
+        );
+
+        //this.datos = data;
+      });
+    });
+  },
+  methods: {
+    procesamientoDatos() {
+      let data_filtrada = this.data_completa.filter((d) =>
+        this.rango_edad_principal.includes(+d.EDAD)
+      );
+
+      if (this.sexo_seleccionado != 0) {
+        data_filtrada = data_filtrada.filter(
+          (d) => d.SEXO == this.sexo_seleccionado
+        );
+      }
+      let estatales_2021 = d3.rollup(
+        [...data_filtrada].filter((d) => d.ANIO_OCUR == 2021),
+        (v) => v.length,
+        (d) => d.ENT_OCURR
+      );
+      if (this.estado_seleccionado != "00") {
+        data_filtrada = data_filtrada.filter(
+          (d) => d.ENT_OCURR == this.estado_seleccionado
+        );
+      }
+      var data_filtrada_agrupada = d3.rollup(
+        data_filtrada,
+        (v) => v.length,
+        (d) => d.ANIO_OCUR,
+        (d) => d.CVE_CAPGPO
+      );
+      var datum = [];
+      let anios = [...data_filtrada_agrupada.keys()];
+      let causas_def = Object.keys(this.catalogo);
+
+      /**
+       * conapo
+       */
+      let poblaciones_conapo = this.data_conapo_completa.filter((d) =>
+        this.rango_edad_principal.includes(d.EDAD)
+      );
+      let conapo_2021 = [...poblaciones_conapo].filter((d) => d.ANIO == 2021);
+      poblaciones_conapo = poblaciones_conapo.filter(
+        (d) => d.CVE_GEO == this.estado_seleccionado
+      );
+
+      if (this.sexo_seleccionado != 0) {
+        poblaciones_conapo = poblaciones_conapo.filter(
+          (d) => d.SEXO == this.sexo_seleccionado
+        );
+        conapo_2021 = conapo_2021.filter(
+          (d) => d.SEXO == this.sexo_seleccionado
+        );
+      }
+      poblaciones_conapo = d3.rollup(
+        poblaciones_conapo,
+        (v) => d3.sum(v.map((dd) => dd.POBLACION)),
+        (d) => d.ANIO
+      );
+
+      conapo_2021 = d3.rollup(
+        conapo_2021,
+        (v) => d3.sum(v.map((dd) => dd.POBLACION)),
+        (d) => d.CVE_GEO
+      );
+      let data_estatal_2021 = [];
+      estatales_2021.set("00", d3.sum(Array.from(estatales_2021.values())));
+      for (var i = 0; i < this.entidades.length; i++) {
+        data_estatal_2021.push({
+          entidad: claves_estatales_abr[this.entidades[i].cve],
+          tasa:
+            100000 *
+            (estatales_2021.get(this.entidades[i].cve) /
+              conapo_2021.get(this.entidades[i].cve)),
+          defunciones: estatales_2021.get(this.entidades[i].cve),
+          poblacion: conapo_2021.get(this.entidades[i].cve),
+          clave: this.entidades[i].cve,
+        });
+      }
+      this.data_estatal_2021 = data_estatal_2021;
+
+      //
+      for (var i = 0; i < anios.length; i++) {
+        let objeto = {};
+        objeto.ANIO_OCUR = anios[i];
+        objeto.POBLACION = poblaciones_conapo.get(anios[i]);
+
+        for (var j = 0; j < causas_def.length; j++) {
+          objeto[causas_def[j]] =
+            (100000 *
+              (data_filtrada_agrupada.get(anios[i]).get(causas_def[j])
+                ? data_filtrada_agrupada.get(anios[i]).get(causas_def[j])
+                : 0)) /
+            objeto.POBLACION;
+          objeto[causas_def[j] + "_absoluto"] = data_filtrada_agrupada
+            .get(anios[i])
+            .get(causas_def[j])
+            ? data_filtrada_agrupada.get(anios[i]).get(causas_def[j])
+            : 0;
+        }
+
+        datum.push(objeto);
+      }
+
+      this.datos = datum;
+
+      this.totales = causas_def
+        .map((d) => {
+          return {
+            cve: d,
+            total: d3.sum(datum.map((dd) => dd[d + "_absoluto"])),
+          };
+        })
+        .sort((a, b) => b.total - a.total);
+
+      let dict_col = {};
+      this.totales.forEach((d, i) => {
+        d.color = i < 10 ? this.colores_top_10[i] : "#858585";
+        dict_col[d.cve] = i < 10 ? this.colores_top_10[i] : "#858585";
+      });
+      /**
+       * meses
+       */
+      let casos_mensuales_agrupados = [];
+      let casos_mensuales = data_filtrada.filter((d) =>
+        this.totales
+          .slice(0, 10)
+          .map((dd) => dd.cve)
+          .includes(d.CVE_CAPGPO)
+      );
+      casos_mensuales = d3.rollup(
+        casos_mensuales,
+        (v) => v.length,
+        (d) => d.MES_OCUR,
+        (d) => d.CVE_CAPGPO
+      );
+      /*for(var i = 0; i<10; i++){
+        let ef_dict = {}
+        ef_dict.cve_capgpo = this.totales[i].cve
+        ef_dict.causa = this.catalogo[ this.totales[i].cve]
+        let base_meses = [];
+        for(var mes =1; mes <= 12; mes ++){
+          base_meses.push({
+            "mes": mes,
+            "cantidad": casos_mensuales.get(this.totales[i].cve).get(String(mes)) ? casos_mensuales.get(this.totales[i].cve).get(String(mes)) : 0
+          })
+        }
+        ef_dict.data = base_meses
+
+        casos_mensuales_agrupados.push(ef_dict)
+
+      }*/
+      for (var mes = 1; mes <= 12; mes++) {
+        let ef_dict = {};
+        ef_dict.mes = mes;
+        for (var i = 0; i < 10; i++) {
+          ef_dict[this.totales[i].cve] = casos_mensuales
+            .get(String(mes))
+            .get(this.totales[i].cve)
+            ? casos_mensuales.get(String(mes)).get(this.totales[i].cve)
+            : 0;
+        }
+        casos_mensuales_agrupados.push(ef_dict);
+      }
+
+      this.casos_mensuales_agrupados = casos_mensuales_agrupados;
+
+      this.variables = Object.keys(this.catalogo).map((d, i) => {
+        return {
+          id: d,
+          nombre: this.catalogo[d],
+          color: dict_col[d],
+        };
+      });
+      setTimeout(() => {
+        this.esta_cargando = false;
+      }, 1500);
+    },
+  },
+  computed: {
+    ...mapState(["rango_edad_principal"]),
+  },
+  watch: {
+    rango_edad_principal(nv) {
+      this.esta_cargando = true;
+
+      this.procesamientoDatos();
+    },
+    estado_seleccionado(nv) {
+      this.esta_cargando = true;
+
+      this.procesamientoDatos();
+    },
+    sexo_seleccionado(nv) {
+      this.esta_cargando = true;
+
+      this.procesamientoDatos();
+    },
+  },
+};
+</script>
+<style lang="scss">
+#vista-defunciones-temporales {
+  margin-top: 100px;
+  .tablero {
+    display: flex;
+    gap: 30px;
+
+    position: relative;
+    .col-controles {
+      top: 50px;
+      position: sticky;
+      position: -webkit-sticky;
+      align-self: flex-start;
+      .contenedor-selectores {
+        display: flex;
+        width: 100%;
+        gap: 8px;
+        .contenedor-selector {
+          width: 50%;
+          select {
+            width: 100%;
+            padding: 8px;
+            background: transparent;
+            border-radius: 4px;
+          }
+        }
+      }
+      width: 300px;
+      .contenedor-brush {
+        max-width: 600px;
+      }
+    }
+    .col-visualizaciones {
+      width: calc(100% - 300px);
+    }
+    @media (max-width: 768px) {
+      display: inline-block;
+      .col-controles {
+        top: 0;
+        position: relative;
+        width: 100%;
+      }
+      .col-visualizaciones {
+        width: 100%;
+      }
+    }
+  }
+
+  #streamgraph1.cargando {
+    .cargador {
+      width: 100%;
+      height: 520px;
+      position: absolute;
+      z-index: 1;
+    }
+  }
+}
+
+.nomenclatura {
+  font-size: 14px;
+  display: block;
+
+  .variable {
+    span {
+      transform: translateY(2px);
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      border-radius: 5px;
+      margin-right: 5px;
+      @media (max-width: 768px) {
+        width: 16px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file