Last active
November 8, 2017 05:57
-
-
Save MattTriano/536b8bcb089ea511873afce7ea59b9f9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Causes of Mortality</title> | |
| <link href="style.css" rel="stylesheet" type="text/css"> | |
| <link href="http://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" type="text/css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class='row'> | |
| <h3>Causes of Mortality</h3> | |
| <select id="select_key"> | |
| <option value="All_Causes" selected="selected">All Causes</option> | |
| <option value="Communicable_maternal_perinatal_and_nutritional_conditions"> Communicable, maternal, perinatal and nutritional conditions</option> | |
| <option value="Infectious_and_parasitic_diseases">  Infectious and parasitic diseases</option> | |
| <option value="Tuberculosis">   Tuberculosis</option> | |
| <option value="STDs_excluding_HIV">   STDs excluding HIV</option> | |
| <option value="Syphilis">    Syphilis</option> | |
| <option value="Chlamydia">    Chlamydia</option> | |
| <option value="Gonorrhoea">    Gonorrhoea</option> | |
| <option value="Trichomoniasis">    Trichomoniasis</option> | |
| <option value="Genital_herpes">    Genital herpes</option> | |
| <option value="Other_STDs">    Other STDs</option> | |
| <option value="HIV/AIDS">   HIV/AIDS</option> | |
| <option value="Diarrhoeal_diseases">   Diarrhoeal diseases</option> | |
| <option value="Childhood-cluster_diseases">   Childhood-cluster diseases</option> | |
| <option value="Whooping_cough">    Whooping cough</option> | |
| <option value="Diphtheria">    Diphtheria</option> | |
| <option value="Measles">    Measles</option> | |
| <option value="Tetanus">    Tetanus</option> | |
| <option value="Meningitis">   Meningitis</option> | |
| <option value="Encephalitis">   Encephalitis</option> | |
| <option value="Hepatitis">   Hepatitis</option> | |
| <option value="Acute_hepatitis_A">    Acute hepatitis A</option> | |
| <option value="Acute_hepatitis_B">    Acute hepatitis B</option> | |
| <option value="Acute_hepatitis_C">    Acute hepatitis C</option> | |
| <option value="Acute_hepatitis_E">    Acute hepatitis E</option> | |
| <option value="Cirrhosis_due_to_hepatitis_B">    Cirrhosis due to hepatitis B</option> | |
| <option value="Cirrhosis_due_to_hepatitis_C">    Cirrhosis due to hepatitis C</option> | |
| <option value="Liver_cancer_secondary_to_hepatitis_B">    Liver cancer secondary to hepatitis B</option> | |
| <option value="Liver_cancer_secondary_to_hepatitis_C">    Liver cancer secondary to hepatitis C</option> | |
| <option value="Parasitic_and_vector_diseases">   Parasitic and vector diseases</option> | |
| <option value="Malaria">    Malaria</option> | |
| <option value="African_trypanosomiasis">    African trypanosomiasis</option> | |
| <option value="Chagas_disease">    Chagas disease</option> | |
| <option value="Schistosomiasis">    Schistosomiasis</option> | |
| <option value="Leishmaniasis">    Leishmaniasis</option> | |
| <option value="Lymphatic_filariasis">    Lymphatic filariasis</option> | |
| <option value="Onchocerciasis">    Onchocerciasis</option> | |
| <option value="Cysticercosis">    Cysticercosis</option> | |
| <option value="Echinococcosis">    Echinococcosis</option> | |
| <option value="Dengue">    Dengue</option> | |
| <option value="Trachoma">    Trachoma</option> | |
| <option value="Yellow_fever">    Yellow fever</option> | |
| <option value="Rabies">    Rabies</option> | |
| <option value="Intestinal_nematode_infections">   Intestinal nematode infections</option> | |
| <option value="Ascariasis">    Ascariasis</option> | |
| <option value="Trichuriasis">    Trichuriasis</option> | |
| <option value="Hookworm_disease">    Hookworm disease</option> | |
| <option value="Food-bourne_trematodes">    Food-bourne trematodes</option> | |
| <option value="Leprosy">   Leprosy</option> | |
| <option value="Other_infectious_diseases">   Other infectious diseases</option> | |
| <option value="Respiratory_infections_">  Respiratory infections </option> | |
| <option value="Lower_respiratory_infections">   Lower respiratory infections</option> | |
| <option value="Upper_respiratory_infections">   Upper respiratory infections</option> | |
| <option value="Otitis_media">   Otitis media</option> | |
| <option value="Maternal_conditions">  Maternal conditions</option> | |
| <option value="Neonatal_conditions">  Neonatal conditions</option> | |
| <option value="Preterm_birth_complications">   Preterm birth complications</option> | |
| <option value="Birth_asphyxia_and_birth_trauma">   Birth asphyxia and birth trauma</option> | |
| <option value="Neonatal_sepsis_and_infections">   Neonatal sepsis and infections</option> | |
| <option value="Other_neonatal_conditions">   Other neonatal conditions</option> | |
| <option value="Nutritional_deficiencies">  Nutritional deficiencies</option> | |
| <option value="Protein-energy_malnutrition">   Protein-energy malnutrition</option> | |
| <option value="Iodine_deficiency">   Iodine deficiency</option> | |
| <option value="Vitamin_A_deficiency">   Vitamin A deficiency</option> | |
| <option value="Iron-deficiency_anaemia">   Iron-deficiency anaemia</option> | |
| <option value="Other_nutritional_deficiencies">   Other nutritional deficiencies</option> | |
| <option value="Noncommunicable_diseases"> Noncommunicable diseases</option> | |
| <option value="Malignant_neoplasms">  Malignant neoplasms</option> | |
| <option value="Mouth_and_oropharynx_cancers">   Mouth and oropharynx cancers</option> | |
| <option value="Lip_and_oral_cavity">    Lip and oral cavity</option> | |
| <option value="Nasopharynx">    Nasopharynx</option> | |
| <option value="Other_pharynx">    Other pharynx</option> | |
| <option value="Oesophagus_cancer">   Oesophagus cancer</option> | |
| <option value="Stomach_cancer">   Stomach cancer</option> | |
| <option value="Colon_and_rectum_cancers">   Colon and rectum cancers</option> | |
| <option value="Liver_cancer">   Liver cancer</option> | |
| <option value="Other_liver_cancer">    Other liver cancer</option> | |
| <option value="Pancreas_cancer">   Pancreas cancer</option> | |
| <option value="Trachea_bronchus_lung_cancers">   Trachea, bronchus, lung cancers</option> | |
| <option value="Melanoma_and_other_skin_cancers">   Melanoma and other skin cancers</option> | |
| <option value="Malignant_skin_melanoma">    Malignant skin melanoma</option> | |
| <option value="Non-melanoma_skin_cancer">    Non-melanoma skin cancer</option> | |
| <option value="Breast_cancer">   Breast cancer</option> | |
| <option value="Cervix_uteri_cancer">   Cervix uteri cancer</option> | |
| <option value="Corpus_uteri_cancer">   Corpus uteri cancer</option> | |
| <option value="Ovary_cancer">   Ovary cancer</option> | |
| <option value="Prostate_cancer">   Prostate cancer</option> | |
| <option value="Testicular_cancer">   Testicular cancer</option> | |
| <option value="Kidney_cancer">   Kidney cancer</option> | |
| <option value="Bladder_cancer">   Bladder cancer</option> | |
| <option value="Brain_and_nervous_system_cancers">   Brain and nervous system cancers</option> | |
| <option value="Gallbladder_and_biliary_tract_cancer">   Gallbladder and biliary tract cancer</option> | |
| <option value="Larynx_cancer">   Larynx cancer</option> | |
| <option value="Thyroid_cancer">   Thyroid cancer</option> | |
| <option value="Mesothelioma">   Mesothelioma</option> | |
| <option value="Lymphomas_multiple_myeloma">   Lymphomas, multiple myeloma</option> | |
| <option value="Hodgkin_lymphoma">    Hodgkin lymphoma</option> | |
| <option value="Non-Hodgkin_lymphoma">    Non-Hodgkin lymphoma</option> | |
| <option value="Multiple_myeloma">    Multiple myeloma</option> | |
| <option value="Leukaemia">   Leukaemia</option> | |
| <option value="Other_malignant_neoplasms">   Other malignant neoplasms</option> | |
| <option value="Other_neoplasms">  Other neoplasms</option> | |
| <option value="Diabetes_mellitus">  Diabetes mellitus</option> | |
| <option value="Endocrine_blood_immune_disorders">Endocrine, blood, immune disorders</option> | |
| <option value="Thalassaemias">   Thalassaemias</option> | |
| <option value="Sickle_cell_disorders_and_trai">   Sickle cell disorders and trait</option> | |
| <option value="Other_haemoglobinopathies_and_haemolytic_anaemias">   Other haemoglobinopathies and haemolytic anaemias</option> | |
| <option value="Other_endocrine_blood_and_immune_disorders">   Other endocrine, blood and immune disorders</option> | |
| <option value="Mental_and_substance_use_disorders">  Mental and substance use disorders</option> | |
| <option value="Depressive_disorders">   Depressive disorders</option> | |
| <option value="Major_depressive_disorder">    Major depressive disorder</option> | |
| <option value="Dysthymia">    Dysthymia</option> | |
| <option value="Bipolar_disorder">   Bipolar disorder</option> | |
| <option value="Schizophrenia">   Schizophrenia</option> | |
| <option value="Alcohol_use_disorders">   Alcohol use disorders</option> | |
| <option value="Liver_cancer_secondary_to_alcohol_use">    Liver cancer secondary to alcohol use</option> | |
| <option value="Cirrhosis_due_to_alcohol_use">    Cirrhosis due to alcohol use</option> | |
| <option value="Drug_use_disorders">   Drug use disorders</option> | |
| <option value="Opioid_use_disorders">    Opioid use disorders</option> | |
| <option value="Cocaine_use_disorders">    Cocaine use disorders</option> | |
| <option value="Amphetamine_use_disorders">    Amphetamine use disorders</option> | |
| <option value="Cannabis_use_disorders">    Cannabis use disorders</option> | |
| <option value="Other_drug_use_disorders">    Other drug use disorders</option> | |
| <option value="Anxiety_disorders">   Anxiety disorders</option> | |
| <option value="Eating_disorders">   Eating disorders</option> | |
| <option value="Autism_and_Asperger_syndrome">   Autism and Asperger syndrome</option> | |
| <option value="Childhood_behavioural_disorders">   Childhood behavioural disorders</option> | |
| <option value="Attention_deficit/hyperactivity_syndrome">    Attention deficit/hyperactivity syndrome</option> | |
| <option value="Conduct_disorder">    Conduct disorder</option> | |
| <option value="Idiopathic_intellectual_disability">   Idiopathic intellectual disability</option> | |
| <option value="Other_mental_and_behavioural_disorders">   Other mental and behavioural disorders</option> | |
| <option value="Neurological_conditions">  Neurological conditions</option> | |
| <option value="Alzheimer_disease_and_other_dementias">   Alzheimer disease and other dementias</option> | |
| <option value="Parkinson_disease">   Parkinson disease</option> | |
| <option value="Epilepsy">   Epilepsy</option> | |
| <option value="Multiple_sclerosis">   Multiple sclerosis</option> | |
| <option value="Migraine">   Migraine</option> | |
| <option value="Non-migraine_headache">   Non-migraine headache</option> | |
| <option value="Other_neurological_conditions">   Other neurological conditions</option> | |
| <option value="Sense_organt_diseases">  Sense organ diseases</option> | |
| <option value="Glaucoma">   Glaucoma</option> | |
| <option value="Cataracts">   Cataracts</option> | |
| <option value="Uncorrected_refractive_errors">   Uncorrected refractive errors</option> | |
| <option value="Macular_degeneration">   Macular degeneration</option> | |
| <option value="Other_vision_loss">   Other vision loss</option> | |
| <option value="Other_hearing_loss">   Other hearing loss</option> | |
| <option value="Other_sense_organ_disorders">   Other sense organ disorders</option> | |
| <option value="Cardiovascular_diseases">  Cardiovascular diseases</option> | |
| <option value="Rheumatic_heart_disease">   Rheumatic heart disease</option> | |
| <option value="Hypertensive_heart_disease">   Hypertensive heart disease</option> | |
| <option value="Ischaemic_heart_disease">   Ischaemic heart disease</option> | |
| <option value="Stroke">   Stroke</option> | |
| <option value="Haemorrhagic_stroke">   Haemorrhagic stroke</option> | |
| <option value="Ischaemic_stroke">   Ischaemic stroke</option> | |
| <option value="Cardiomyopathy_myocarditis_endocarditis">   Cardiomyopathy, myocarditis, endocarditis</option> | |
| <option value="Other_circulatory_diseases">   Other circulatory diseases</option> | |
| <option value="Respiratory_diseases">  Respiratory diseases</option> | |
| <option value="Chronic_obstructive_pulmonary_disease">   Chronic obstructive pulmonary disease</option> | |
| <option value="Asthma">   Asthma</option> | |
| <option value="Other_respiratory_diseases">   Other respiratory diseases</option> | |
| <option value="Digestive_diseases">  Digestive diseases</option> | |
| <option value="Peptic_ulcer_disease">   Peptic ulcer disease</option> | |
| <option value="Cirrhosis_of_the_liver">   Cirrhosis of the liver</option> | |
| <option value="Other_liver_cirrhosis">   Other liver cirrhosis</option> | |
| <option value="Appendicitis">   Appendicitis</option> | |
| <option value="Gastritis_and_duodenitis">   Gastritis and duodenitis</option> | |
| <option value="Paralytic_ileus_and_intestinal_obstruction">   Paralytic ileus and intestinal obstruction</option> | |
| <option value="Inflammatory_bowel_disease">   Inflammatory bowel disease</option> | |
| <option value="Gallbladder_and_biliary_diseases">   Gallbladder and biliary diseases</option> | |
| <option value="Pancreatitis">   Pancreatitis</option> | |
| <option value="Other_digestive_diseases">   Other digestive diseases</option> | |
| <option value="Genitourinary_diseases">  Genitourinary diseases</option> | |
| <option value="Kidney_diseases">   Kidney diseases</option> | |
| <option value="Acute_glomerulonephritis">    Acute glomerulonephritis</option> | |
| <option value="Chronic_kidney_disease_due_to_diabetes">    Chronic kidney disease due to diabetes</option> | |
| <option value="Other_chronic_kidney_disease">    Other chronic kidney disease</option> | |
| <option value="Benign_prostatic_hyperplasia">   Benign prostatic hyperplasia</option> | |
| <option value="Urolithiasis">   Urolithiasis</option> | |
| <option value="Other_urinary_diseases">   Other urinary diseases</option> | |
| <option value="Infertility">   Infertility</option> | |
| <option value="Gynecological_diseases">   Gynecological diseases</option> | |
| <option value="Skin_diseases">  Skin diseases</option> | |
| <option value="Musculoskeletal_diseases">  Musculoskeletal diseases</option> | |
| <option value="Rheumatoid_arthritis">   Rheumatoid arthritis</option> | |
| <option value="Osteoarthritis">   Osteoarthritis</option> | |
| <option value="Gout">   Gout</option> | |
| <option value="Back_and_neck_pain">   Back and neck pain</option> | |
| <option value="Other_musculoskeletal_disorders">   Other musculoskeletal disorders</option> | |
| <option value="Congenital_anomalies">  Congenital anomalies</option> | |
| <option value="Neural_tube_defects">   Neural tube defects</option> | |
| <option value="Cleft_lip_and_cleft_palate">   Cleft lip and cleft palate</option> | |
| <option value="Down_syndrome">   Down syndrome</option> | |
| <option value="Congenital_heart_anomalies">   Congenital heart anomalies</option> | |
| <option value="Other_chromosomal_anomalies">   Other chromosomal anomalies</option> | |
| <option value="Other_congenital_anomalies">   Other congenital anomalies</option> | |
| <option value="Oral_conditions">  Oral conditions</option> | |
| <option value="Dental_caries">   Dental caries</option> | |
| <option value="Periodontal_disease">   Periodontal disease</option> | |
| <option value="Edentulism">   Edentulism</option> | |
| <option value="Other_oral_disorders">   Other oral disorders</option> | |
| <option value="Sudden_infant_death_syndrome">  Sudden infant death syndrome</option> | |
| <option value="Injuries"> Injuries</option> | |
| <option value="Unintentional_injuries">  Unintentional injuries</option> | |
| <option value="Road_injury">   Road injury</option> | |
| <option value="Poisonings">   Poisonings</option> | |
| <option value="Falls">   Falls</option> | |
| <option value="Fire_heat_and_hot_substances">   Fire, heat and hot substances</option> | |
| <option value="Drowning">   Drowning</option> | |
| <option value="Exposure_to_mechanical_forces">   Exposure to mechanical forces</option> | |
| <option value="Natural_disasters">   Natural disasters</option> | |
| <option value="Other_unintentional_injuries">   Other unintentional injuries</option> | |
| <option value="Intentional_injuries">  Intentional injuries</option> | |
| <option value="Self-harm">   Self-harm</option> | |
| <option value="Interpersonal_violence">   Interpersonal violence</option> | |
| <option value="Collective_violence_and_legal_intervention">   Collective violence and legal intervention</option> | |
| </select> | |
| <select id='select_year'> | |
| <option value='2000'>2000</option> | |
| <option value='2001'>2001</option> | |
| <option value='2002'>2002</option> | |
| <option value='2003'>2003</option> | |
| <option value='2004'>2004</option> | |
| <option value='2005'>2005</option> | |
| <option value='2006'>2006</option> | |
| <option value='2007'>2007</option> | |
| <option value='2008'>2008</option> | |
| <option value='2009'>2009</option> | |
| <option value='2010'>2010</option> | |
| <option value='2011'>2011</option> | |
| <option value='2012'>2012</option> | |
| <option value='2013'>2013</option> | |
| <option value='2014'>2014</option> | |
| <option value='2015'>2015</option> | |
| </select> | |
| </div> | |
| <div id="choropleth"></div> | |
| <div id="legend"></div> | |
| <div id="chart_titles" class="hidden row"></div> | |
| <div id="supplemental_graphs" class="hidden row"> | |
| <div id="sup_graph1" class="hidden six columns"> | |
| <div id="sg1_legend" class="hidden"></div> | |
| </div> | |
| <div id="data_table" class="hidden six columns"> | |
| <script id="template" type="x-tmpl-mustache"> | |
| <table> | |
| <tr> | |
| <th> Cause Name </th> | |
| <td> Avg Deaths per 100k Pop</td> | |
| </tr> | |
| {{ #.}} | |
| <tr> | |
| <th> {{ key }}</th> | |
| <td>{{ value }}</td> | |
| </tr> | |
| {{/.}} | |
| </table> | |
| </script> | |
| </div> | |
| </div> | |
| <div id="initial"> | |
| <h5>Instructions</h5> | |
| <ul> | |
| <li>Change the Mortality Cause using the dropdown above the map.</li> | |
| <li>Click a Country to see Death Rates over Time and Top Causes of Death</li> | |
| </ul> | |
| </div> | |
| <div class="footer"> | |
| <strong>Data Sources:</strong>Data from the World Health Organization and normalized by World Bank Population Data. More details available in Repo | |
| </div> | |
| </div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="//d3js.org/d3-geo-projection.v1.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script> | |
| <script src="mort_map.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Useful reading | |
| // On accessing nested data: https://bost.ocks.org/mike/nest/ | |
| // On making a legend: https://bl.ocks.org/mbostock/4573883 | |
| // Setting height and width (should match the CSS) | |
| var w = 1100; | |
| var h = 580; | |
| var active = d3.select(null); | |
| var ctry_color; | |
| // Initializing a default key, and (temporarily, until I figure out a smart | |
| // way to handle time series data) year. | |
| var current_key = 'All_Causes'; | |
| var current_year = '2000'; | |
| var template = d3.select('#template').html(); | |
| Mustache.parse(template); | |
| var year_data = [ | |
| { | |
| year: '2000', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2001', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2002', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2003', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2004', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2005', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2006', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2007', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2008', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2009', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2010', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2011', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2012', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2013', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2014', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| }, | |
| { | |
| year: '2015', | |
| all_cause_datum: -1, | |
| key_cause_datum: -1 | |
| } | |
| ] | |
| var svg = d3.select('#choropleth').append('svg') | |
| .attr('preserveAspectRatio', 'xMidYMid') | |
| .attr('viewBox', '0 0 ' + w + ' ' + h); | |
| var tooltip = d3.select("#choropleth") | |
| .append("div") | |
| .attr("class", "tooltip hidden"); | |
| // Setting the map projection | |
| var projection = d3.geoNaturalEarth() | |
| .scale(1); | |
| // Setting a path object and applying our projection | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| // Innitializing a grouping on the SVG | |
| var map_features = svg.append('g') | |
| .attr('class', 'features.id'); | |
| var color_fill = d3.scaleQuantize() | |
| .range(['#feedde','#fdd0a2','#fdae6b','#fd8d3c','#f16913','#d94801','#8c2d04']); | |
| // Initializing an object to store data broken down by country | |
| var data_by_country = d3.map(); | |
| // Initializing a variable to hold CSV (mort_data) and geojson data | |
| var mort_data; | |
| var geojson_data; | |
| d3.select('#select_key').on('change', function(a) { | |
| // Change the current key and call the function to update the colors. | |
| current_key = d3.select(this).property('value'); | |
| update_map_colors(); | |
| }); | |
| d3.select('#select_year').on('change', function(a) { | |
| // Change the current key and call the function to update the colors. | |
| current_year = d3.select(this).property('value'); | |
| update_map_colors(); | |
| }); | |
| // Code to prepare the legend | |
| var format_value = d3.format('.0f'); | |
| var legend_scale = d3.scaleLinear(); | |
| var legend_x_axis = d3.axisBottom(legend_scale) | |
| .tickSize(13) | |
| .tickFormat( function(d) { return format_value(d); }); | |
| var legend_svg = d3.select('#legend') | |
| .append('svg') | |
| .attr('width', '100%') | |
| .attr('height', '50'); | |
| var g = legend_svg.append('g') | |
| .attr('transform', 'translate(' + 20 + ',' + 20 + ')'); | |
| g.selectAll('rect') | |
| .data(color_fill.range() | |
| .map(function(d) { | |
| return color_fill.invertExtent(d); | |
| })) | |
| .enter() | |
| .append('rect'); | |
| g.append('text') | |
| .attr('class', 'legend_text') | |
| .attr('fill', '#000') | |
| .attr('font-weight', 'bold') | |
| .attr('text-anchor', 'start') | |
| .attr('y', -6); | |
| // This listens to a window-resizing event and resizes the legend on event | |
| window.onresize = update_legend; | |
| function update_legend() { | |
| var legend_w = d3.select('#choropleth').node() | |
| .getBoundingClientRect().width - 50; | |
| // This sets evenly sized domain-spans to map the data to a color | |
| var legend_domain = color_fill.range().map( function(d) { | |
| var color_range = color_fill.invertExtent(d); | |
| return color_range[1]; | |
| }); | |
| // This sets the lower end of the domain to the lowest observed value | |
| legend_domain.unshift(color_fill.domain()[0]); | |
| // This sets the domain and range for the legend bin widths | |
| legend_scale.domain(color_fill.domain()) | |
| .range([0, legend_w]); | |
| // This sets positions and widths for the rectangles in the legend | |
| g.selectAll('rect') | |
| .data(color_fill.range().map( function(d) { | |
| return color_fill.invertExtent(d); | |
| })) | |
| .attr("height", 8) | |
| .attr('x', function(d) { return legend_scale(d[0]); }) | |
| .attr('width', function(d) { | |
| return legend_scale(d[1]) - legend_scale(d[0]); | |
| }) | |
| .attr('fill', function(d, i) { | |
| return color_fill.range()[i]; | |
| }); | |
| var dropdown_keys = d3.select('#select_key').node(); | |
| var selected_key = dropdown_keys.options[dropdown_keys.selectedIndex]; | |
| g.selectAll('text.legend_text').text(selected_key.text + ' [deaths per 100k pop. in ' + current_year +']'); | |
| legend_x_axis.tickValues(legend_domain); | |
| g.call(legend_x_axis); | |
| } | |
| // For this Gist, rather than include massive data files, I'll just reference them | |
| var csv_datafile = 'https://raw.githubusercontent.com/MattTriano/csc595_final_project/master/WHO_mortality_data/mort_by_cause_per_capita_allages_btsx_avg.csv'; | |
| var geojson_file = 'https://raw.githubusercontent.com/MattTriano/csc595_final_project/master/countries_geo.json'; | |
| d3.json(geojson_file, function(geojson) { | |
| // console.log(geojson); | |
| var map_scale = map_scaler(geojson); | |
| geojson_data = geojson; | |
| projection.scale(map_scale.scale) | |
| .center(map_scale.center) | |
| .translate([w/2, h/2]); | |
| d3.csv(csv_datafile, function(data) { | |
| data_by_country = d3.nest() | |
| .key( function(d) { return d.iso3; }) | |
| .key( function(d) { return d.causename; }) | |
| .rollup( function(d) { return d[0]; }) | |
| .map(data); | |
| console.log(data_by_country); // this is the core data structure I use | |
| // I'm working on making this object to facilitate sortin | |
| cause_by_country = d3.nest() | |
| .key( function(d) { return d.iso3; }) | |
| .key( function(d) { return d.causename}) | |
| .rollup( function(d) { return parseFloat(d['2000']) + parseFloat(d['2001'])}) | |
| .map(data); | |
| console.log(cause_by_country); | |
| mort_data = data_by_country; | |
| map_features.selectAll('path') | |
| .data(geojson.features) | |
| .enter().append('path') | |
| .attr('d', path) | |
| .on("click", clicked) | |
| .on('mousemove', show_tooltip) | |
| .on('mouseout', hide_tooltip); | |
| update_map_colors(); | |
| }); | |
| }); | |
| function update_map_colors() { | |
| color_fill.domain([ | |
| d3.min(geojson_data.features, function(d) { | |
| return +(get_value_of_datum(data_by_country['$'.concat(d.id)])); }), | |
| d3.max(geojson_data.features, function(d) { | |
| return +(get_value_of_datum(data_by_country['$'.concat(d.id)])); }) | |
| ]); | |
| map_features.selectAll('path') | |
| .attr('fill', function(d) { | |
| ctry_color = (get_value_of_datum(data_by_country['$'.concat(d.id)])); | |
| if (typeof ctry_color != 'undefined') { | |
| return color_fill(ctry_color); | |
| } else { | |
| return '#808080'; // Returns grey if the color is undefined (ie no data) | |
| }; | |
| }); | |
| update_legend(); | |
| } | |
| function clicked(d) { | |
| if (active.node() === this) return reset(); | |
| active.classed("active", false); | |
| active = d3.select(this).classed("active", true); | |
| var bounds = path.bounds(d), | |
| dx = bounds[1][0] - bounds[0][0], | |
| dy = bounds[1][1] - bounds[0][1], | |
| x = (bounds[0][0] + bounds[1][0]) / 2, | |
| y = (bounds[0][1] + bounds[1][1]) / 2, | |
| scale = .9 / Math.max(dx / w, dy / h), | |
| translate = [w / 2 - scale * x, h / 2 - scale * y]; | |
| map_features.transition() | |
| .duration(750) | |
| .style("stroke-width", 1.5 / scale + "px") | |
| .attr("transform", "translate(" + translate + ")scale(" + scale + ")"); | |
| get_year_data_for_cause(d); | |
| mort_line_plot(d, year_data, graph1_svg); | |
| show_top_causes(d.id); | |
| d3.select('#initial').classed("hidden", true); | |
| d3.select('#chart_titles').classed("hidden", false); | |
| d3.select('#supplemental_graphs').classed("hidden", false); | |
| d3.select('#sup_graph1').classed("hidden", false); | |
| d3.select('#sg1_legend').classed("hidden", false); | |
| d3.select('#data_table').classed("hidden", false); | |
| } | |
| function show_top_causes(f) { | |
| var sorted_data = get_sorted_ctry_data(f); | |
| var sorted_slice = sorted_data.slice(0,5); | |
| console.log(sorted_data); | |
| console.log(sorted_slice); | |
| var detailsHtml = Mustache.render(template, sorted_slice); | |
| d3.select('#data_table').html(detailsHtml); | |
| } | |
| function get_sorted_ctry_data(f) { | |
| var sortable = []; | |
| var local_sort = mort_data['$'.concat(f)].entries(); | |
| for (i = 0; i < local_sort.length; i++) { | |
| sortable.push({key: local_sort[i].key, value: +local_sort[i].value.avg_death_rate}); | |
| } | |
| local_sort = sortable.sort(function(a,b) { return b.value - a.value;}); | |
| return local_sort; | |
| } | |
| function reset() { | |
| active.classed("active", false); | |
| active = d3.select(null); | |
| map_features.transition() | |
| .duration(750) | |
| .style("stroke-width", "1.5px") | |
| .attr("transform", ""); | |
| } | |
| function show_tooltip(f) { | |
| var id = f.id; // Get the ID of the feature. | |
| var d = data_by_country['$'.concat(id)]; // Use the ID to get the data entry | |
| var mouse = d3.mouse(d3.select('#choropleth').node()).map( | |
| function(d) { return parseInt(d); | |
| }); | |
| var ctry_name = get_country_name(f) | |
| var left = Math.min( w - 4 * ctry_name.length, mouse[0] + 5); | |
| var top = mouse[1] + 25; | |
| // Show the tooltip (unhide it) and set the name of the data entry. | |
| tooltip.classed('hidden', false) | |
| .attr("style", "left:" + left + "px; top:" + top + "px") | |
| .html(ctry_name); | |
| } | |
| function hide_tooltip() { | |
| tooltip.classed('hidden', true); | |
| } | |
| function get_country_name(f) { | |
| this_ctry_name = f.properties.name; | |
| if (typeof this_ctry_name !== 'undefined') { | |
| return this_ctry_name; | |
| } else { | |
| return 'Data Not Available'; | |
| } | |
| } | |
| // this redundent '&&' pattern prevents missing values from throwing errors | |
| // when data produces an 'undefined' result (eg. Palestine isn't in this dataset | |
| // but it is on the map, so it throws an error if we try to select deaths in | |
| // Palestine in year 2000, for example) | |
| function get_value_of_datum(d, yr=current_year) { | |
| return d && d['$'.concat(current_key)][yr]; | |
| } | |
| function get_value_of_year_datum(f, yr, ck=current_key) { | |
| yr = parseInt(yr); | |
| return mort_data['$'.concat(f)] && mort_data['$'.concat(f)]['$'.concat(ck)][yr]; | |
| } | |
| // This functiion updates the year_data object for the current cause | |
| // f: a geojson features object, used to get a location id | |
| function get_year_data_for_cause(f) { | |
| this_ctry_id = f.id; | |
| if (typeof mort_data['$'.concat(f.id)] !== 'undefined') { | |
| for (yd in year_data) { | |
| year_data[yd].key_cause_datum = +get_value_of_year_datum(this_ctry_id, year_data[yd].year); | |
| year_data[yd].all_cause_datum = +get_value_of_year_datum(this_ctry_id, year_data[yd].year, 'All_Causes'); | |
| } | |
| } else { | |
| for (yr in year_data) { | |
| year_data[yr].key_cause_datum = -1; | |
| year_data[yr].all_cause_datum = -1; | |
| } | |
| } | |
| } | |
| var left_pad = 35; | |
| var top_pad = 20; | |
| var bot_pad = 30; | |
| var right_pad = 30; | |
| var graph1_svg = d3.select('#sup_graph1') | |
| .append('svg') | |
| .attr('width', '100%') | |
| .attr('height', '200'); | |
| // .attr('preserveAspectRatio', 'xMinYMin'); | |
| var parse_year = d3.timeParse("%Y"); | |
| var format_year = d3.timeFormat('%Y') | |
| var time_scale = d3.scaleTime(); | |
| var death_scale = d3.scaleLinear(); | |
| function mort_line_plot(f, data, graph_svg) { | |
| local_data = data; | |
| graph_svg.selectAll('*').remove(); | |
| var frame_h = get_svg_height(); | |
| var frame_w = get_svg_width(); | |
| var this_w = 0.5 * get_svg_width(); | |
| // var this_h = 0.25 * get_svg_height(); | |
| var this_h = 200; | |
| time_scale.domain([new Date(2000,0), new Date(2015,0)]) | |
| .range([left_pad, this_w-right_pad]); | |
| death_scale.domain([0, 2250]) | |
| .range([this_h-bot_pad, right_pad]); | |
| var time_axis = d3.axisBottom() | |
| .scale(time_scale) | |
| .ticks(16) | |
| .tickFormat(format_year); | |
| var death_axis = d3.axisLeft() | |
| .scale(death_scale) | |
| .ticks(6); | |
| var all_cause_line = d3.line() | |
| .x( function(d) { return time_scale(parse_year(String(d.year))); }) | |
| .y( function(d) { return death_scale(parseInt(d.all_cause_datum));}); | |
| var key_cause_line = d3.line() | |
| .x( function(d) { return time_scale(parse_year(String(d.year))); }) | |
| .y( function(d) { return death_scale(parseInt(d.key_cause_datum));}); | |
| graph_svg.append('text').text('hi'); | |
| console.log(function(d) { return extent(d.year);}); | |
| graph_svg.append('path') | |
| .datum(local_data) | |
| .attr('class', 'line') | |
| .attr('d', all_cause_line) | |
| .style('stroke', '#fc8d62'); | |
| graph_svg.append('path') | |
| .datum(local_data) | |
| .attr('class', 'line') | |
| .attr('d', key_cause_line) | |
| .style('stroke', '#66c2a5'); | |
| graph_svg.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(0," + (this_h - bot_pad) + ")") | |
| .call(time_axis) | |
| .selectAll("text") | |
| .style("text-anchor", "end") | |
| .attr("dx", "-.8em") | |
| .attr("dy", ".1em") | |
| .attr("transform", "rotate(-60)"); | |
| graph_svg.append('g') | |
| .attr('class', 'axis') | |
| .attr('transform', 'translate ('+left_pad+',0)') | |
| .call(death_axis); | |
| console.log(f.properties); | |
| graph_svg.append('text') | |
| .attr('x', this_w/2) | |
| .attr('y', top_pad*4/5) | |
| .attr('text-anchor', 'middle') | |
| .text('Deaths from All Causes and from '+current_key+ ' for '+f.properties.name); | |
| var legend_labels = [{ label: 'All Causes', color: '#fc8d62'}, | |
| { label: 'Selected Cause', color: '#66c2a5'}]; | |
| var svg_legend = graph_svg.append('svg') | |
| .attr('width', this_w*.15) | |
| .attr('height', 40); | |
| console.log(this_w*8); | |
| var this_legend = svg_legend.selectAll('#sg1_legend') | |
| .data(legend_labels) | |
| .enter().append('g') | |
| .attr('id','sg1_legend') | |
| .attr('transform', function(d, i) { | |
| { | |
| return 'translate(0,' + i*15 + ')' | |
| } | |
| }); | |
| var fant = 10; | |
| graph_svg.append('rect') | |
| .datum(legend_labels) | |
| .attr('x',this_w*0.75) | |
| .attr('y',30) | |
| .attr('width',10) | |
| .attr('height',2) | |
| .style('fill', function(d) { return d[0].color; }); | |
| graph_svg.append('text') | |
| .datum(legend_labels) | |
| .attr('x',this_w*0.78) | |
| .attr('y',35) | |
| .text(function(d) { return d[0].label; }) | |
| .style('font-size',fant); | |
| graph_svg.append('rect') | |
| .datum(legend_labels) | |
| .attr('x',this_w*0.75) | |
| .attr('y',45) | |
| .attr('width',10) | |
| .attr('height',2) | |
| .style('fill', function(d) { return d[1].color; }); | |
| graph_svg.append('text') | |
| .datum(legend_labels) | |
| .attr('x',this_w*0.78) | |
| .attr('y',50) | |
| .text(function(d) { return d[1].label; }) | |
| .style('font-size',fant); | |
| // this is just a test object to confirm an image appears | |
| // graph_svg.append('circle').attr('cx',30).attr('cy',30).attr('r',20); | |
| } | |
| function get_svg_width() { | |
| return d3.select(svg).node()._groups[0][0].width.animVal.value; | |
| } | |
| function get_svg_height() { | |
| return d3.select(svg).node()._groups[0][0].width.animVal.value; | |
| } | |
| // This function takes a geojson object and determines appropriate | |
| // scale and center coordinates based on the extents of the geojson | |
| // paths (ie the country boundaries) and the size of the SVG frame. | |
| // Returns: an object containing the 'scale' and 'center' | |
| function map_scaler(geojson) { | |
| var path_bounds = path.bounds(geojson), | |
| scale = 1/ Math.max( | |
| (path_bounds[1][0] - path_bounds[0][0]) / w, | |
| (path_bounds[1][1] - path_bounds[0][1]) / h | |
| ); | |
| var feature_bounds = d3.geoBounds(geojson), | |
| center = [ | |
| (feature_bounds[1][0] + feature_bounds[0][0]) / 2, | |
| (feature_bounds[1][1] + feature_bounds[0][1]) / 2 | |
| ]; | |
| return { | |
| 'scale' : scale, | |
| 'center': center | |
| }; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 25px; | |
| } | |
| path { | |
| stroke: #000; | |
| stroke-width: 0.3px; | |
| } | |
| g.features { | |
| stroke: #d8d8d8; | |
| stroke-width: 0.5; | |
| } | |
| g.features path:hover { | |
| opacity: 0.5; | |
| } | |
| #data_table { | |
| margin-top: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| font-size: 1.1rem; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: black; | |
| stroke-width: 1; | |
| } | |
| #legend { | |
| border: 1px solid silver; | |
| border-top: 0; | |
| } | |
| .legend-key path { | |
| display: none; | |
| } | |
| .legend-key text { | |
| font-size: 1rem; | |
| } | |
| .legend-key line { | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .chart-legend { | |
| shape-rendering: | |
| } | |
| .tooltip { | |
| font-weight: bold; | |
| font-size: 1.5rem; | |
| padding: 0.5rem; | |
| border: 1px solid silver; | |
| color: #222; | |
| background: #fff; | |
| border-radius: 5px; | |
| box-shadow: 0px 0px 5px 0px #a6a6a6; | |
| opacity: 0.9; | |
| position: absolute; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .container { | |
| width: 100%; | |
| } | |
| #details, #initial { | |
| margin-top: 2rem; | |
| } | |
| table { | |
| margin-bottom: 0; | |
| } | |
| td, th { | |
| padding: 6px 9px; | |
| } | |
| td { | |
| text-align: right; | |
| } | |
| #choropleth { | |
| font-size: 0; /* to prevent margin at bottom of map container */ | |
| border: 1px solid silver; | |
| background: #E6E6E6; | |
| background-color: #a7cdf2; | |
| } | |
| /*svg { | |
| background-color: #a7cdf2; | |
| }*/ | |
| .feature.active { | |
| border: 3px black; | |
| } | |
| /*.axis path, .axis line { | |
| fill: none; | |
| stroke: none; | |
| }*/ | |
| .Oranges .q0-7{fill:rgb(254,237,222)} | |
| .Oranges .q1-7{fill:rgb(253,208,162)} | |
| .Oranges .q2-7{fill:rgb(253,174,107)} | |
| .Oranges .q3-7{fill:rgb(253,141,60)} | |
| .Oranges .q4-7{fill:rgb(241,105,19)} | |
| .Oranges .q5-7{fill:rgb(217,72,1)} | |
| .Oranges .q6-7{fill:rgb(140,45,4)} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment