xxxxxxxxxx
<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 enterdata =
path.enter()
.append("path")
.merge(path)
.attr("fill", (d,i) => i ? "teal" : "brown")
.transition()
.attrTween('d', function(d) {console.log(d);
var i = d3.interpolate(d.startAngle+0.0001, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d);}
});
d3.selectAll('path').on("mouseover",function(d) {
var age = d.data.Life_Span;
var animal = d.data.Animal
if (animal=='Female'){var age = 83} else if (animal == 'Male'){var age = 76}
d3.select('.moreinfo').html("The Lifespan of a <span style='color:red'>" + animal + "</span> is <span style='color:red'>" + age + " </span> years")
});
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