animalplanet

forked from anonymous's block: animalplanet

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body{
	font-family: 'Noto Sans', sans-serif;
}
.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
  color:#000;
}

.names {
  stroke: #fff;
  fill:#fff;
  font-size:20px;
}

.user-form{
	width:450px;
	position:absolute;
}

.list{
	padding:10px;
}

</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
<body>
<h1>Will You Be Around When These Pets Die?</h1>
  <div class="user-form">
    <p>
      <select id="Human">
        <option value="Male" selected="">Male</option>
        <option value="Female" selected="">Female</option>
      </select>
      <form>
      	<span>Animal: <input type="text" id="animalinput" name="animal"><span id="error"></span></span>
      </form>
      <button id="submit">Submit</button>  
    </p>
    <p class="category">
    Stuck? Search for animals by category: 
    <br>
    <button id="Birds">Birds</button>
    <button id="Mammal">Mammal</button>
    <button id="Reptiles">Reptiles</button>
    <button id="Fish">Fish</button>
    </p>
    <div class="list"></div>
    <h2 class="moreinfo"></h2>
    <h2 class="human2animal"></h2>
    <i><a href="https://tpwd.texas.gov/publications/nonpwdpubs/young_naturalist/animals/animal_life_spans/">Data</a> is from Texas Wildlife and Parks on Animals Held in Cavity</i>
  </div>
<script>

var width = 1500,
    height = 500,
    radius = Math.min(width, height) / 2;

var caption = d3.select("#error")

var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius-150);

var labelArc = d3.arc()
	.outerRadius(radius-110)
    .innerRadius(radius-50);

HumanMale = {"Animal":"Male","Life":76}

HumanFemale = {"Animal":"Female","Life":83}

var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.Life_Span; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 1.38 + "," + height / 2 + ")");

$('.category button').click(function(){
	var typeofAnimal = $(this).text();
	d3.csv("animalplanet.csv", type, function(error, data) {
		var list = '';
		data.forEach(function(element,index){if (element.Type==typeofAnimal){
			list += element.Animal + "/";
		}})
		d3.select('.list').text(list)
	})

})
d3.select('button#submit').on("click",function(){
d3.csv("animalplanet.csv", type, function(error, data) {
d3.select('.moreinfo').html("")
var newdata = [];//add objects here
  
  var Human = document.getElementById("Human").value; //female or male, use to access HumanSelect object
  var animalName = document.getElementById("animalinput").value.toUpperCase()
  
function findAnimal(animal){
	return animal.Animal.toUpperCase()==animalName
}
 animal = data.find(findAnimal)
console.log(animal)
if (Human=="Male"){
	var age = HumanMale.Life; 
}
else {
	var age= HumanFemale.Life; 
	}

try{var newage = age - animal.Life_Span; caption.text("");} //new variable avoids mutation
catch(err){if (animalName == ''){caption.text('   Oops, you didnt select an animal')} else {caption.text("  Sorry we dont have that animal")}; return}

newObject = {
	Animal: Human,
	Life_Span: newage
};

newdata.push(newObject)
newdata.push(animal)

console.log(newdata)
//enter remove selections
  var animal2human = age/newdata[1].Life_Span

var path = svg.selectAll("path")
      .data(pie(newdata))

var text = svg.selectAll(".names").data(pie(newdata))

var entertext = text.enter() 
	.append("text")
	.merge(text)
	.attr("class","names")
	.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; }) 
	.attr("dy", ".35em") .text(function(d) { return d.data.Animal; })
document.getElementById("animalinput").value = "";	 
d3.select('.human2animal').html("One Human Year is <span style='color:red'>" + animal2human.toFixed(2) + "</span> <span style='color:red'>" + newdata[1].Animal + "</span> years");
;});
})

function type(d) {
  d.Life_Span = +d.Life_Span;
  return d;
}
</script>

https://d3js.org/d3.v4.min.js

https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js