-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (134 loc) · 6.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link rel="icon" href="../favicon.png">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="build/tailwind.css">
<link rel="stylesheet" href="https://use.typekit.net/ggk0vlq.css">
<script src="js/dendrogram.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" integrity="sha256-x8PYmLKD83R9T/sYmJn1j3is/chhJdySyhet/JuHnfY=" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700;900&display=swap" rel="stylesheet">
</head>
<!---- BODY start --->
<body class="text-brown-500">
<div class="bg-brown-100 w-full h-32 py-4 text-white border border-brown-200 ">
<a href="/"><h1 style="font-weight: 500" class=" text-5xl p-4 d-inline w-1/2 text-brown-700 float-left"> Plant Encylopedia </h1> </a>
<div class="w-1/4 d-inline float-left pt-5" id="search-box">
<input class="bg-brown-150 appearance-none border-2 border-brown-300 rounded py-2 px-4 text-brown-700 leading-tight focus:outline-none focus:bg-white focus:border-green-500" placeholder="search for a plant by scientific name" type="text"></input>
</div>
</div>
<div class="rest-container d-block pt-5">
<div id="left-page-container">
<h1 class="text-3xl font-regular text-brown-700 float-left" id="common-name"> Oregano </h1>
<h2 class="text-3xl font-light pl-3"id="scientific-name"> Origanum Vulgare </h2>
<img class="w-full" src="img/argemone.jpg" id="plant-picture"/>
</div>
<div id="right-page-container">
<h2 class="text-2xl font-semibold text-brown-700" > Description </h2>
<p id="plant-description" class="w-full pr-20 text-xl text-brown-700"> Oregano (scientific name Origanum vulgare) is a common species of Origanum, a genus of the mint family (Lamiaceae). It is native to temperate western and southwestern Eurasia and the Mediterranean region.
Oregano is a perennial herb, growing from 20–80 cm (7.9–31.5 in) tall, with opposite leaves 1–4 cm (0.39–1.57 in) long. Oregano will grow in a pH range between 6.0 (mildly acidic) and 9.0 (strongly alkaline),
with a preferred range between 6.0 and 8.0. The flowers are purple, 3–4 mm (0.12–0.16 in) long, produced in erect spikes. It is sometimes called wild marjoram, and its close relative O. majorana is known as sweet marjoram.
</p>
<h2 class="text-2xl font-semibold text-brown-700" id="taxonomy"> Taxonomy</h2>
<div class="bg-brown-100 w-32 text-xl "id="dendrogram-container" > </div>
</div>
</div>
</div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
/// ///////////////////////// SECTION 1: PARSING CSV ////////////////////////////
let csvData
let plantName
let plantImg
let plantDescription
// taxonomy variables
let plantOrder
let plantFamily
let plantGenus
let plantSpecies
// An array of strings; list of all plant names
let plantNames = []
function drawFromCSV (plantIndex) {
d3.csv('plantOutput.csv', function (error, rows) {
if (error) { console.log(error.stack) }
// populate variables with data from CSV
csvData = rows
plantName = csvData[plantIndex].name
plantImg = csvData[plantIndex].image
plantDescription = csvData[plantIndex].paragraph
plantOrder = csvData[plantIndex].order
plantFamily = csvData[plantIndex].family
plantGenus = csvData[plantIndex].genus
plantSpecies = csvData[plantIndex].species
// html container definition
let commonName = document.getElementById('common-name')
let scientificName = document.getElementById('scientific-name')
let plantPicture = document.getElementById('plant-picture')
let plantParagraph = document.getElementById('plant-description')
// populate HTML containers with data from CSV
commonName.innerHTML = plantName
scientificName.innerHTML = plantSpecies
plantPicture.setAttribute('src', plantImg)
plantParagraph.innerHTML = plantDescription.replace(/(<([^>]+)>)/ig, '')
// create a list of all plantNames
for (let i = 0; i < csvData.length; i++) { plantNames.push(csvData[i].name) }
// draw a taxonomy dendrogram from the relevant plant data, and append
// it to the html document in the #dendrogram-container div
drawDendrogram(plantOrder, plantFamily, plantGenus, plantSpecies)
function appendDendro () {
let dendroContainer = document.getElementById('dendrogram-container')
let viz = document.getElementsByTagName('svg')[0]
dendroContainer.appendChild(viz)
}
appendDendro()
})
}
drawFromCSV(341)
/// //////////////////// SECTION 2: SEARCH & AUTOCOMPLETE //////////////////////
let searchBar = document.body.getElementsByTagName('input')[0]
let searchitems = document.body.getElementsByClassName('search-item')
// return (boolean) if the plant string includes the search query
function plantMatch (plant) {
return plant.toLowerCase().includes(searchBar.value.toLowerCase())
}
/* Delete the autcomplete divs when no search query (.search-item) */
function deleteBoxes () {
while (searchitems[0]) {
console.log('deleting search boxes')
let searchContainer = document.getElementById('search-box')
searchContainer.removeChild(searchitems[0])
}
}
// Remove the old dendrogram when updating the view with new plant data
function removeOldDendro () {
let dendroContainer = document.getElementById('dendrogram-container')
let oldSVG = document.getElementsByTagName('svg')[0]
dendroContainer.removeChild(oldSVG)
}
/// // Search Bar Key Event :: Autocomplete Functionality
searchBar.addEventListener('keyup', function (event) {
/* delete the previously recommended autocomplete */
deleteBoxes()
if (searchBar.value.length > 1) {
let plantMatches = plantNames.filter(plantMatch)
let uniquePlants = plantMatches.filter(function (item, index) {
return plantMatches.indexOf(item) >= index
})
console.log('plantmatches:', uniquePlants)
for (let i = 0; i < uniquePlants.length; i++) {
let autocompleteItem = document.createElement('div')
let searchbox = document.getElementById('search-box')
searchbox.appendChild(autocompleteItem)
autocompleteItem.setAttribute('class', 'search-item')
autocompleteItem.innerHTML = uniquePlants[i]
/// // Click Event: Select a new plant from the autocomplete list
autocompleteItem.onclick = function () {
removeOldDendro()
drawFromCSV(plantNames.indexOf(autocompleteItem.innerHTML))
deleteBoxes()
searchBar.value = ''
}
}
}
}, 1000)
</script>