MariellaCC/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Maladies rares par pays</title>
		<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<script src="//d3js.org/topojson.v1.min.js"></script>
		<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
		<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
			<style type="text/css">

			body {
					font-family: Verdana, Arial, sans-serif;
					font-size: 14px;
					background-color: white;

			}

			p a {
				color: grey;

			}

			p a:hover {
				opacity: 0.6;
			}


			svg {
				background-color: white;

			}

			h1 {
				color: rgb(115, 115, 115);
				font-size: 18px;
				font-weight: bold;
				margin: 0;
				padding-bottom: 10px;

			}

				#container {
				width: 800px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				padding: 20px;
				background-color: white;
				box-shadow: 1px 1px 1px 2px rgb(217, 217, 217);
				position: relative;
			}


			div.tooltip {

       	 		font-size: 11px;
        		width: auto;
        		height: auto;
        		padding: 10px;
        		background-color: white;
        		/*
        		-webkit-border-radius: 10px;
        		-moz-border-radius: 10px;
        		border-radius: 10px;
        		-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        		-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        		box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); */
        		pointer-events: none;
			}

			.pays:hover {
				opacity: 0.8;
				cursor: pointer;
			}

			.source {
				font-size: 12px;
			}

			select {
				width: 300px;
			}

			.background {
  			fill: none;
  			pointer-events: all;
				}

			#formulaire {
				float: right;
			}


		</style>
	</head>
	<body>


	<div id="container">
	<h1>Les maladies orphelines dans le monde</h1>
	<div class="texte">
	Sélectionnez une maladie dans la liste déroulante afin de voir sur la carte le nombre de cas et les pays dans lesquels cette maladie a été recensée.<br />
	Passez votre souris sur un pays où une maladie est présente, pour voir les informations s'afficher, et cliquez sur un pays pour faire un zoom sur la carte.<br/>
	(Source des données: Orphanet)
</div>
<div id="tooltip"></div>

	<div id="formulaire">
<script type="text/javascript">
$(document).ready(function() {
  $(".js-example-basic-single").select2();
});
</script>


		<select id="form_orphaviz" class="js-example-basic-single" onchange="genererCarte()">
  <option value="Maladie de Hirschsprung">Maladie de Hirschsprung</option>
</select>
	</div>

	</div>


		<script type="text/javascript">

		var maladies = ["Achondrogenèse",
"Achondroplasie",
"Acidémie isovalérique",
"Acidémie propionique",
"Acidurie 3-hydroxy-3-méthylglutarique",
"Acidurie argininosuccinique",
"Acrodermatite entéropathique",
"Adrénoleucodystrophie liée à l'X",
"Adrénoleucodystrophie néonatale",
"Albinisme oculaire récessif lié à l'X",
"Alcaptonurie",
"Alpha-mannosidose",
"Anémie de Blackfan-Diamond",
"Anomalie du développement sexuel 46,XY par déficit en 17-bêta-hydroxystéroïde déshydrogénase 3",
"Argininémie",
"Aspartylglucosaminurie",
"Ataxie cérébelleuse précoce avec conservation des réflexes tendineux",
"Ataxie de Friedreich",
"Ataxie-télangiectasie",
"Bêta-mannosidose",
"Bronchiectasie idiopathique",
"Céroïde-lipofuscinose neuronale infantile",
"Céroïde-lipofuscinose neuronale infantile tardive",
"Céroïde-lipofuscinose neuronale juvénile",
"Chylothorax congénital",
"Citrullinémie type I",
"Cystathioninurie",
"Cystinose",
"Cystinurie",
"Déficit en 3-hydroxyacyl-CoA déshydrogénase des acides gras à chaîne longue",
"Déficit en acyl-CoA déshydrogénase des acides gras à chaîne courte",
"Déficit en acyl-CoA déshydrogénase des acides gras à chaîne moyenne",
"Déficit en acyl-CoA déshydrogénase des acides gras à chaîne moyenne",
"Déficit en acyl-CoA déshydrogénase des acides gras à chaîne très longue",
"Déficit en alpha-1-antitrypsine",
"Déficit en bêta-cétothiolase",
"Déficit en biotinidase",
"Déficit en carbamoyl-phosphate synthétase 1",
"Déficit en carnitine palmitoyltransférase II",
"Déficit en fructose-1,6 diphosphatase",
"Déficit en glutaryl-CoA déshydrogénase",
"Déficit en lipase acide lysosomale",
"Déficit en ornithine transcarbamylase",
"Déficit en prolidase",
"Déficit isolé en 3-méthylcrotonyl-CoA carboxylase",
"Déficit multiple en acyl-CoA déshydrogénases",
"Déficit systémique primaire en carnitine",
"Diabète néonatal permanent",
"Diarrhée syndromique",
"Drépanocytose",
"Dysplasie alvéolo-capillaire congénitale",
"Dysplasie thanatophore",
"Dystonie généralisée à début précoce par les membres",
"Dystrophie maculaire vitelliforme de Best",
"Dystrophie musculaire congénitale type Fukuyama",
"Dystrophie musculaire de Becker",
"Dystrophie musculaire de Duchenne",
"Encéphalopathie glycinique",
"Epidermolyse bulleuse jonctionnelle type Herlitz",
"Epilepsie pyridoxino-dépendante",
"Fibrodysplasie ossifiante progressive",
"Flutter auriculaire idiopathique du nouveau-né",
"Galactosémie classique",
"Gangliosidose à GM1",
"Glaucome congénital",
"Glycogénose par déficit en enzyme débranchante",
"Glycogénose par déficit en maltase acide",
"Granulomatose chronique",
"Hamartome musculaire lisse congénital",
"Hémoglobinose C",
"Histidinémie",
"Homocystinurie classique",
"Hyperphénylalaninémie",
"Hyperplasie congénitale des surrénales par déficit en 21-hydroxylase classique",
"Hypophosphatasie",
"Intolérance au fructose héréditaire",
"Intolérance aux protéines dibasiques avec lysinurie",
"Leucodystrophie métachromatique",
"Lupus érythémateux néonatal",
"Lymphohistiocytose familiale",
"Malabsorption du glucose-galactose",
"Maladie de Fabry",
"Maladie de Gaucher",
"Maladie de Hartnup",
"Maladie de Hirschsprung",
"Maladie de Kennedy",
"Maladie de Krabbe",
"Maladie de Menkes",
"Maladie de Milroy",
"Maladie de Niemann-Pick type C",
"Maladie de Pelizaeus-Merzbacher",
"Maladie de Sandhoff",
"Maladie de Tay-Sachs",
"Maladie de von Hippel-Lindau",
"Maladie de Wilson",
"Maladie du sirop d'érable",
"Méningiome",
"Mucolipidose type II",
"Mucolipidose type III",
"Mucopolysaccharidose type 1",
"Mucopolysaccharidose type 2",
"Mucopolysaccharidose type 3",
"Mucopolysaccharidose type 4",
"Mucopolysaccharidose type 6",
"Mucopolysaccharidose type 7",
"Mucoviscidose",
"Myélome multiple",
"Myocardiopathie gravidique primitive",
"Myopathie centronucléaire liée à l'X",
"Néphronophtise",
"Neuroblastome",
"Neurofibromatose type 1",
"Neurofibromatose type 2",
"Ostéogenèse imparfaite",
"Phénylcétonurie",
"PMM2-CDG",
"Polypose adénomateuse familiale",
"Porencéphalie",
"Rétinoblastome",
"Sarcosinémie",
"Schizencéphalie",
"Sclérose tubéreuse de Bourneville",
"Syndrome d'Aicardi",
"Syndrome d'Alport",
"Syndrome de Barth",
"Syndrome de Bartter",
"Syndrome de Blau",
"Syndrome de Cockayne",
"Syndrome de Dravet",
"Syndrome de Lesch-Nyhan",
"Syndrome de Marfan",
"Syndrome de Moebius",
"Syndrome de persistance familiale de l'hémoglobine foetale-drépanocytose",
"Syndrome de Prader-Willi",
"Syndrome de Rett",
"Syndrome de rubéole congénitale",
"Syndrome de Shwachman-Diamond",
"Syndrome de Silver-Russell",
"Syndrome de Sjögren-Larsson",
"Syndrome de Stickler",
"Syndrome de Waardenburg",
"Syndrome de Walker-Warburg",
"Syndrome de Wiskott-Aldrich",
"Syndrome d'Ondine",
"Syndrome GRACILE",
"Syndrome néphrotique congénital type finlandais",
"Syndrome WHIM",
"Tachycardie ventriculaire incessante du nouveau-né",
"Thrombocytopénie amégacaryocytaire congénitale",
"Toxoplasmose congénitale",
"Tyrosinémie type 1",
"Xeroderma pigmentosum" ]


			//Width and height
			var w = 800;
			var h = 400;
			active = d3.select(null);

			//Define map projection


			var projection = d3.geo.mercator() //utiliser une projection standard pour aplatir les pôles, voir D3 projection plugin
								   .center([ 10, 51 ]) //comment centrer la carte, longitude, latitude
								   .translate([ w/2, h/2 ]) // centrer l'image obtenue dans le svg
								   .scale([ w/6 ]); // zoom, plus la valeur est petite plus le zoom est gros

			//Define path generator
			var path = d3.geo.path()
							 .projection(projection);

			//Define quantize scale to sort data values into buckets of color
			//Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
			var color = d3.scale.quantize()
								.range([ "rgb(252,197,192)", "rgb(250,159,181)", "rgb(247,104,161)", "rgb(221,52,151)", "rgb(174,1,126)"," rgb(122,1,119)" ]);

			//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("id", "svg")
						.attr("width", w)
						.attr("height", h);

			svg.append("rect")
    			.attr("class", "background")
    			.attr("width", w)
    			.attr("height", h)
    			.on("click", reset);

    		var g = svg.append("g");


  			var tooltip = d3.select("#tooltip").append("div")
  			.attr("class", "tooltip")
  			.style("opacity", 0);

			//Load in earnings data
			d3.csv("orphadata_v2.csv", function(data) {

				//Set input domain for color scale
				color.domain([
					d3.min(data, function(d) { return +d.NbCas; }), //attribue la couleur selon la valeur
					d3.max(data, function(d) { return +d.NbCas; })
				]);

					//Load in GeoJSON data
					d3.json("ne_50m_admin_0_countries_simplified.json", function(json) {

					var listeDer = document.getElementById("form_orphaviz");


					for (var i = 0; i < maladies.length; i++) {
						var option = document.createElement("option");
						option.text = maladies[i];
						listeDer.add(option);

						}


						var x = document.getElementById("form_orphaviz");

						var y = x.selectedIndex;

					for (var i = 0; i < data.length; i++) {

						 if (data[i].Name == x.options[y].text) {

						//Grab country name
						var dataCountryCode = data[i].CountryCode;

						//Grab data value, and convert from string to float
						var dataValue = +data[i].NbCas;
						var Country = data[i].Country;
						var maladieName = data[i].Name;

						//Find the corresponding country inside the GeoJSON
						for (var j = 0; j < json.features.length; j++) {


							//We'll check the official ISO country code
							var jsonCountryCode = json.features[j].properties.iso_a2;

							if (dataCountryCode == jsonCountryCode) {

								//Copy the data value into the GeoJSON
								json.features[j].properties.NbCas = dataValue;
								json.features[j].properties.maladieName = maladieName;
								json.features[j].properties.Country = Country;


								//Stop looking through the JSON
								break;

							}
						}
					}}

						//Bind data and create one path per GeoJSON feature


						g.selectAll("path")
						   .data(json.features)
						   .enter()
						   .append("path")
						   .attr("d", path)
						   .on("click", clicked)
						   .attr("stroke", "rgba(255, 255, 255, 0.5)")
						   .style("fill", function(d) {

							//Get data value
							var value = d.properties.NbCas;

							if (value) {
								//If value exists…
								return color(value);
							} else {
								//If value is undefined…
								return "rgba(209,209,201,0.4)";
							}

						})

						   .attr("class", function(d) {

							//Get data value
							var value = d.properties.NbCas;

							if (value) {
								//If value exists…
								return d.properties.Country;
							}
						})


  						.on("mouseover", function(d) {
  						var value = d.properties.NbCas;

  						if (value) {

    						if (value == 1)
    							nbCas = "Nombre de cas: < 1 / 1 000 000";
    						if (value == 2)
    							nbCas = " Nombre de cas: 1-9 / 1 000 000";
    						if (value == 3)
    							nbCas = " Nombre de cas: 1-9 / 100 000";
    						if (value == 4)
    							nbCas = " Nombre de cas: 1-5 / 10 000";
    						if (value == 5)
    							nbCas = " Nombre de cas: 6-9 / 10 000";
    						if (value == 6)
    							nbCas = " Nombre de cas: < 1 / 1 000";


    					d3.select(this);

   						tooltip.transition().duration(300)
    						.style("opacity", 1)

    					tooltip.html("<strong>" + d.properties.maladieName + "</strong><br />"+ d.properties.Country + ": " + nbCas)

  							}})

  						.on("mouseout", function() {
    					d3.select(this);
    					tooltip.transition().duration(300)
    					.style("opacity", 0);
 						 	});


			});
		});


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 = .8 / Math.max(dx / w, dy / h),
      translate = [w / 2 - scale * x, h / 2 - scale * y];

  g.transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}

function reset() {
  active.classed("active", false);
  active = d3.select(null);

  g.transition()
      .duration(750)
      .attr("transform", "");
}

function genererCarte() {

	var x = document.getElementById("svg");
	x.remove();

		//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("id", "svg")
						.attr("width", w)
						.attr("height", h);

			svg.append("rect")
    			.attr("class", "background")
    			.attr("width", w)
    			.attr("height", h)
    			.on("click", reset);

    		var g = svg.append("g");


  			var tooltip = d3.select("#tooltip").append("div")
  			.attr("class", "tooltip")
  			.style("opacity", 0);

			//Load in earnings data
			d3.csv("orphadata_v2.csv", function(data) {

				//Set input domain for color scale
				color.domain([
					d3.min(data, function(d) { return +d.NbCas; }), //attribue la couleur selon la valeur
					d3.max(data, function(d) { return +d.NbCas; })
				]);

					//Load in GeoJSON data
					d3.json("ne_50m_admin_0_countries_simplified.json", function(json) {

					var listeDer = document.getElementById("form_orphaviz");


					for (var i = 0; i < maladies.length; i++) {
						var option = document.createElement("option");
						option.text = maladies[i];
						listeDer.add(option);

						}


						var x = document.getElementById("form_orphaviz");

						var y = x.selectedIndex;

					for (var i = 0; i < data.length; i++) {

						 if (data[i].Name == x.options[y].text) {

						//Grab country name
						var dataCountryCode = data[i].CountryCode;

						//Grab data value, and convert from string to float
						var dataValue = +data[i].NbCas;
						var Country = data[i].Country;
						var maladieName = data[i].Name;

						//Find the corresponding country inside the GeoJSON
						for (var j = 0; j < json.features.length; j++) {


							//We'll check the official ISO country code
							var jsonCountryCode = json.features[j].properties.iso_a2;

							if (dataCountryCode == jsonCountryCode) {

								//Copy the data value into the GeoJSON
								json.features[j].properties.NbCas = dataValue;
								json.features[j].properties.maladieName = maladieName;
								json.features[j].properties.Country = Country;


								//Stop looking through the JSON
								break;

							}
						}
					}}

						//Bind data and create one path per GeoJSON feature


						g.selectAll("path")
						   .data(json.features)
						   .enter()
						   .append("path")
						   .attr("d", path)
						   .on("click", clicked)
						   .attr("stroke", "rgba(255, 255, 255, 0.5)")
						   .style("fill", function(d) {

							//Get data value
							var value = d.properties.NbCas;

							if (value) {
								//If value exists…
								return color(value);
							} else {
								//If value is undefined…
								return "rgba(209,209,201,0.4)"
							}

						})

						   .attr("class", function(d) {

							//Get data value
							var value = d.properties.NbCas;

							if (value) {
								//If value exists…
								return d.properties.Country;
							}
						})


  						.on("mouseover", function(d) {
  						var value = d.properties.NbCas;

  						if (value) {

    						if (value == 1)
    							nbCas = "Nombre de cas: < 1 / 1 000 000";
    						if (value == 2)
    							nbCas = " Nombre de cas: 1-9 / 1 000 000";
    						if (value == 3)
    							nbCas = " Nombre de cas: 1-9 / 100 000";
    						if (value == 4)
    							nbCas = " Nombre de cas: 1-5 / 10 000";
    						if (value == 5)
    							nbCas = " Nombre de cas: 6-9 / 10 000";
    						if (value == 6)
    							nbCas = " Nombre de cas: < 1 / 1 000";


    					d3.select(this);

   						tooltip.transition().duration(300)
    						.style("opacity", 1)

    					tooltip.html("<strong>" + d.properties.maladieName + "</strong><br />"+ d.properties.Country + " " + "<br />" + nbCas)

  							}})

  						.on("mouseout", function() {
    					d3.select(this);
    					tooltip.transition().duration(300)
    					.style("opacity", 0);
 						 	});


			});
		});


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];

  g.transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}

function reset() {
  active.classed("active", false);
  active = d3.select(null);

  g.transition()
      .duration(750)
      .style("stroke-width", "1.5px")
      .attr("transform", "");
}


}

		</script>
	</body>
</html>

## ne_50m_admin_0_countries_simplified.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ne_50m_admin_0_countries_simplified.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## orphadata_v2.csv

      
    Raw
  

              orphadata_v2.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Maladies rares par pays</title>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
	<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
	<style type="text/css">

	body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 14px;
	background-color: white;

	}

	p a {
	color: grey;

	}

	p a:hover {
	opacity: 0.6;
	}


	svg {
	background-color: white;

	}

	h1 {
	color: rgb(115, 115, 115);
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	padding-bottom: 10px;

	}

	#container {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	padding: 20px;
	background-color: white;
	box-shadow: 1px 1px 1px 2px rgb(217, 217, 217);
	position: relative;
	}


	div.tooltip {

	font-size: 11px;
	width: auto;
	height: auto;
	padding: 10px;
	background-color: white;
	/*
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); */
	pointer-events: none;
	}

	.pays:hover {
	opacity: 0.8;
	cursor: pointer;
	}

	.source {
	font-size: 12px;
	}

	select {
	width: 300px;
	}

	.background {
	fill: none;
	pointer-events: all;
	}

	#formulaire {
	float: right;
	}





	</style>
	</head>
	<body>


	<div id="container">
	<h1>Les maladies orphelines dans le monde</h1>
	<div class="texte">
	Sélectionnez une maladie dans la liste déroulante afin de voir sur la carte le nombre de cas et les pays dans lesquels cette maladie a été recensée.<br />
	Passez votre souris sur un pays où une maladie est présente, pour voir les informations s'afficher, et cliquez sur un pays pour faire un zoom sur la carte.<br/>
	(Source des données: Orphanet)
	</div>
	<div id="tooltip"></div>

	<div id="formulaire">
	<script type="text/javascript">
	$(document).ready(function() {
	$(".js-example-basic-single").select2();
	});
	</script>



	<select id="form_orphaviz" class="js-example-basic-single" onchange="genererCarte()">
	<option value="Maladie de Hirschsprung">Maladie de Hirschsprung</option>
	</select>
	</div>

	</div>



	<script type="text/javascript">

	var maladies = ["Achondrogenèse",
	"Achondroplasie",
	"Acidémie isovalérique",
	"Acidémie propionique",
	"Acidurie 3-hydroxy-3-méthylglutarique",
	"Acidurie argininosuccinique",
	"Acrodermatite entéropathique",
	"Adrénoleucodystrophie liée à l'X",
	"Adrénoleucodystrophie néonatale",
	"Albinisme oculaire récessif lié à l'X",
	"Alcaptonurie",
	"Alpha-mannosidose",
	"Anémie de Blackfan-Diamond",
	"Anomalie du développement sexuel 46,XY par déficit en 17-bêta-hydroxystéroïde déshydrogénase 3",
	"Argininémie",
	"Aspartylglucosaminurie",
	"Ataxie cérébelleuse précoce avec conservation des réflexes tendineux",
	"Ataxie de Friedreich",
	"Ataxie-télangiectasie",
	"Bêta-mannosidose",
	"Bronchiectasie idiopathique",
	"Céroïde-lipofuscinose neuronale infantile",
	"Céroïde-lipofuscinose neuronale infantile tardive",
	"Céroïde-lipofuscinose neuronale juvénile",
	"Chylothorax congénital",
	"Citrullinémie type I",
	"Cystathioninurie",
	"Cystinose",
	"Cystinurie",
	"Déficit en 3-hydroxyacyl-CoA déshydrogénase des acides gras à chaîne longue",
	"Déficit en acyl-CoA déshydrogénase des acides gras à chaîne courte",
	"Déficit en acyl-CoA déshydrogénase des acides gras à chaîne moyenne",
	"Déficit en acyl-CoA déshydrogénase des acides gras à chaîne moyenne",
	"Déficit en acyl-CoA déshydrogénase des acides gras à chaîne très longue",
	"Déficit en alpha-1-antitrypsine",
	"Déficit en bêta-cétothiolase",
	"Déficit en biotinidase",
	"Déficit en carbamoyl-phosphate synthétase 1",
	"Déficit en carnitine palmitoyltransférase II",
	"Déficit en fructose-1,6 diphosphatase",
	"Déficit en glutaryl-CoA déshydrogénase",
	"Déficit en lipase acide lysosomale",
	"Déficit en ornithine transcarbamylase",
	"Déficit en prolidase",
	"Déficit isolé en 3-méthylcrotonyl-CoA carboxylase",
	"Déficit multiple en acyl-CoA déshydrogénases",
	"Déficit systémique primaire en carnitine",
	"Diabète néonatal permanent",
	"Diarrhée syndromique",
	"Drépanocytose",
	"Dysplasie alvéolo-capillaire congénitale",
	"Dysplasie thanatophore",
	"Dystonie généralisée à début précoce par les membres",
	"Dystrophie maculaire vitelliforme de Best",
	"Dystrophie musculaire congénitale type Fukuyama",
	"Dystrophie musculaire de Becker",
	"Dystrophie musculaire de Duchenne",
	"Encéphalopathie glycinique",
	"Epidermolyse bulleuse jonctionnelle type Herlitz",
	"Epilepsie pyridoxino-dépendante",
	"Fibrodysplasie ossifiante progressive",
	"Flutter auriculaire idiopathique du nouveau-né",
	"Galactosémie classique",
	"Gangliosidose à GM1",
	"Glaucome congénital",
	"Glycogénose par déficit en enzyme débranchante",
	"Glycogénose par déficit en maltase acide",
	"Granulomatose chronique",
	"Hamartome musculaire lisse congénital",
	"Hémoglobinose C",
	"Histidinémie",
	"Homocystinurie classique",
	"Hyperphénylalaninémie",
	"Hyperplasie congénitale des surrénales par déficit en 21-hydroxylase classique",
	"Hypophosphatasie",
	"Intolérance au fructose héréditaire",
	"Intolérance aux protéines dibasiques avec lysinurie",
	"Leucodystrophie métachromatique",
	"Lupus érythémateux néonatal",
	"Lymphohistiocytose familiale",
	"Malabsorption du glucose-galactose",
	"Maladie de Fabry",
	"Maladie de Gaucher",
	"Maladie de Hartnup",
	"Maladie de Hirschsprung",
	"Maladie de Kennedy",
	"Maladie de Krabbe",
	"Maladie de Menkes",
	"Maladie de Milroy",
	"Maladie de Niemann-Pick type C",
	"Maladie de Pelizaeus-Merzbacher",
	"Maladie de Sandhoff",
	"Maladie de Tay-Sachs",
	"Maladie de von Hippel-Lindau",
	"Maladie de Wilson",
	"Maladie du sirop d'érable",
	"Méningiome",
	"Mucolipidose type II",
	"Mucolipidose type III",
	"Mucopolysaccharidose type 1",
	"Mucopolysaccharidose type 2",
	"Mucopolysaccharidose type 3",
	"Mucopolysaccharidose type 4",
	"Mucopolysaccharidose type 6",
	"Mucopolysaccharidose type 7",
	"Mucoviscidose",
	"Myélome multiple",
	"Myocardiopathie gravidique primitive",
	"Myopathie centronucléaire liée à l'X",
	"Néphronophtise",
	"Neuroblastome",
	"Neurofibromatose type 1",
	"Neurofibromatose type 2",
	"Ostéogenèse imparfaite",
	"Phénylcétonurie",
	"PMM2-CDG",
	"Polypose adénomateuse familiale",
	"Porencéphalie",
	"Rétinoblastome",
	"Sarcosinémie",
	"Schizencéphalie",
	"Sclérose tubéreuse de Bourneville",
	"Syndrome d'Aicardi",
	"Syndrome d'Alport",
	"Syndrome de Barth",
	"Syndrome de Bartter",
	"Syndrome de Blau",
	"Syndrome de Cockayne",
	"Syndrome de Dravet",
	"Syndrome de Lesch-Nyhan",
	"Syndrome de Marfan",
	"Syndrome de Moebius",
	"Syndrome de persistance familiale de l'hémoglobine foetale-drépanocytose",
	"Syndrome de Prader-Willi",
	"Syndrome de Rett",
	"Syndrome de rubéole congénitale",
	"Syndrome de Shwachman-Diamond",
	"Syndrome de Silver-Russell",
	"Syndrome de Sjögren-Larsson",
	"Syndrome de Stickler",
	"Syndrome de Waardenburg",
	"Syndrome de Walker-Warburg",
	"Syndrome de Wiskott-Aldrich",
	"Syndrome d'Ondine",
	"Syndrome GRACILE",
	"Syndrome néphrotique congénital type finlandais",
	"Syndrome WHIM",
	"Tachycardie ventriculaire incessante du nouveau-né",
	"Thrombocytopénie amégacaryocytaire congénitale",
	"Toxoplasmose congénitale",
	"Tyrosinémie type 1",
	"Xeroderma pigmentosum" ]



	//Width and height
	var w = 800;
	var h = 400;
	active = d3.select(null);

	//Define map projection


	var projection = d3.geo.mercator() //utiliser une projection standard pour aplatir les pôles, voir D3 projection plugin
	.center([ 10, 51 ]) //comment centrer la carte, longitude, latitude
	.translate([ w/2, h/2 ]) // centrer l'image obtenue dans le svg
	.scale([ w/6 ]); // zoom, plus la valeur est petite plus le zoom est gros

	//Define path generator
	var path = d3.geo.path()
	.projection(projection);

	//Define quantize scale to sort data values into buckets of color
	//Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
	var color = d3.scale.quantize()
	.range([ "rgb(252,197,192)", "rgb(250,159,181)", "rgb(247,104,161)", "rgb(221,52,151)", "rgb(174,1,126)"," rgb(122,1,119)" ]);

	//Create SVG
	var svg = d3.select("#container")
	.append("svg")
	.attr("id", "svg")
	.attr("width", w)
	.attr("height", h);

	svg.append("rect")
	.attr("class", "background")
	.attr("width", w)
	.attr("height", h)
	.on("click", reset);

	var g = svg.append("g");


	var tooltip = d3.select("#tooltip").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	//Load in earnings data
	d3.csv("orphadata_v2.csv", function(data) {

	//Set input domain for color scale
	color.domain([
	d3.min(data, function(d) { return +d.NbCas; }), //attribue la couleur selon la valeur
	d3.max(data, function(d) { return +d.NbCas; })
	]);

	//Load in GeoJSON data
	d3.json("ne_50m_admin_0_countries_simplified.json", function(json) {

	var listeDer = document.getElementById("form_orphaviz");


	for (var i = 0; i < maladies.length; i++) {
	var option = document.createElement("option");
	option.text = maladies[i];
	listeDer.add(option);

	}


	var x = document.getElementById("form_orphaviz");

	var y = x.selectedIndex;

	for (var i = 0; i < data.length; i++) {

	if (data[i].Name == x.options[y].text) {

	//Grab country name
	var dataCountryCode = data[i].CountryCode;

	//Grab data value, and convert from string to float
	var dataValue = +data[i].NbCas;
	var Country = data[i].Country;
	var maladieName = data[i].Name;

	//Find the corresponding country inside the GeoJSON
	for (var j = 0; j < json.features.length; j++) {



	//We'll check the official ISO country code
	var jsonCountryCode = json.features[j].properties.iso_a2;

	if (dataCountryCode == jsonCountryCode) {

	//Copy the data value into the GeoJSON
	json.features[j].properties.NbCas = dataValue;
	json.features[j].properties.maladieName = maladieName;
	json.features[j].properties.Country = Country;




	//Stop looking through the JSON
	break;

	}
	}
	}}

	//Bind data and create one path per GeoJSON feature



	g.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.on("click", clicked)
	.attr("stroke", "rgba(255, 255, 255, 0.5)")
	.style("fill", function(d) {

	//Get data value
	var value = d.properties.NbCas;

	if (value) {
	//If value exists…
	return color(value);
	} else {
	//If value is undefined…
	return "rgba(209,209,201,0.4)";
	}

	})

	.attr("class", function(d) {

	//Get data value
	var value = d.properties.NbCas;

	if (value) {
	//If value exists…
	return d.properties.Country;
	}
	})



	.on("mouseover", function(d) {
	var value = d.properties.NbCas;

	if (value) {

	if (value == 1)
	nbCas = "Nombre de cas: < 1 / 1 000 000";
	if (value == 2)
	nbCas = " Nombre de cas: 1-9 / 1 000 000";
	if (value == 3)
	nbCas = " Nombre de cas: 1-9 / 100 000";
	if (value == 4)
	nbCas = " Nombre de cas: 1-5 / 10 000";
	if (value == 5)
	nbCas = " Nombre de cas: 6-9 / 10 000";
	if (value == 6)
	nbCas = " Nombre de cas: < 1 / 1 000";



	d3.select(this);

	tooltip.transition().duration(300)
	.style("opacity", 1)

	tooltip.html("<strong>" + d.properties.maladieName + "</strong><br />"+ d.properties.Country + ": " + nbCas)

	}})

	.on("mouseout", function() {
	d3.select(this);
	tooltip.transition().duration(300)
	.style("opacity", 0);
	});



	});
	});


	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 = .8 / Math.max(dx / w, dy / h),
	translate = [w / 2 - scale * x, h / 2 - scale * y];

	g.transition()
	.duration(750)
	.style("stroke-width", 1.5 / scale + "px")
	.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
	}

	function reset() {
	active.classed("active", false);
	active = d3.select(null);

	g.transition()
	.duration(750)
	.attr("transform", "");
	}

	function genererCarte() {

	var x = document.getElementById("svg");
	x.remove();

	//Create SVG
	var svg = d3.select("#container")
	.append("svg")
	.attr("id", "svg")
	.attr("width", w)
	.attr("height", h);

	svg.append("rect")
	.attr("class", "background")
	.attr("width", w)
	.attr("height", h)
	.on("click", reset);

	var g = svg.append("g");


	var tooltip = d3.select("#tooltip").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	//Load in earnings data
	d3.csv("orphadata_v2.csv", function(data) {

	//Set input domain for color scale
	color.domain([
	d3.min(data, function(d) { return +d.NbCas; }), //attribue la couleur selon la valeur
	d3.max(data, function(d) { return +d.NbCas; })
	]);

	//Load in GeoJSON data
	d3.json("ne_50m_admin_0_countries_simplified.json", function(json) {

	var listeDer = document.getElementById("form_orphaviz");


	for (var i = 0; i < maladies.length; i++) {
	var option = document.createElement("option");
	option.text = maladies[i];
	listeDer.add(option);

	}


	var x = document.getElementById("form_orphaviz");

	var y = x.selectedIndex;

	for (var i = 0; i < data.length; i++) {

	if (data[i].Name == x.options[y].text) {

	//Grab country name
	var dataCountryCode = data[i].CountryCode;

	//Grab data value, and convert from string to float
	var dataValue = +data[i].NbCas;
	var Country = data[i].Country;
	var maladieName = data[i].Name;

	//Find the corresponding country inside the GeoJSON
	for (var j = 0; j < json.features.length; j++) {



	//We'll check the official ISO country code
	var jsonCountryCode = json.features[j].properties.iso_a2;

	if (dataCountryCode == jsonCountryCode) {

	//Copy the data value into the GeoJSON
	json.features[j].properties.NbCas = dataValue;
	json.features[j].properties.maladieName = maladieName;
	json.features[j].properties.Country = Country;




	//Stop looking through the JSON
	break;

	}
	}
	}}

	//Bind data and create one path per GeoJSON feature



	g.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.on("click", clicked)
	.attr("stroke", "rgba(255, 255, 255, 0.5)")
	.style("fill", function(d) {

	//Get data value
	var value = d.properties.NbCas;

	if (value) {
	//If value exists…
	return color(value);
	} else {
	//If value is undefined…
	return "rgba(209,209,201,0.4)"
	}

	})

	.attr("class", function(d) {

	//Get data value
	var value = d.properties.NbCas;

	if (value) {
	//If value exists…
	return d.properties.Country;
	}
	})



	.on("mouseover", function(d) {
	var value = d.properties.NbCas;

	if (value) {

	if (value == 1)
	nbCas = "Nombre de cas: < 1 / 1 000 000";
	if (value == 2)
	nbCas = " Nombre de cas: 1-9 / 1 000 000";
	if (value == 3)
	nbCas = " Nombre de cas: 1-9 / 100 000";
	if (value == 4)
	nbCas = " Nombre de cas: 1-5 / 10 000";
	if (value == 5)
	nbCas = " Nombre de cas: 6-9 / 10 000";
	if (value == 6)
	nbCas = " Nombre de cas: < 1 / 1 000";



	d3.select(this);

	tooltip.transition().duration(300)
	.style("opacity", 1)

	tooltip.html("<strong>" + d.properties.maladieName + "</strong><br />"+ d.properties.Country + " " + "<br />" + nbCas)

	}})

	.on("mouseout", function() {
	d3.select(this);
	tooltip.transition().duration(300)
	.style("opacity", 0);
	});



	});
	});


	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];

	g.transition()
	.duration(750)
	.style("stroke-width", 1.5 / scale + "px")
	.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
	}

	function reset() {
	active.classed("active", false);
	active = d3.select(null);

	g.transition()
	.duration(750)
	.style("stroke-width", "1.5px")
	.attr("transform", "");
	}


	}

	</script>
	</body>
	</html>