I looked up several tutorials on how to get the image next to the title, however, they are for small datasets that are manually inputted. Having almost 3,000 rows of data, there has to be a better way.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" SameSite=None; Secure>
<title>Document</title>
<script
type="text/javascript"
src="https://d3js.org/d3.v3.js"
></script>
<style id="compiled-css" type="text/css">
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="static/js/app.js"></script>
<script></script>
</body>
</html>
I edited the code and data. I am not receiving any errors in the vs code console, nor the http console. Yet, the text appears in the drop-menu, but not the images.
d3.csv("https://raw.githubusercontent.com/Shannon-Goddard/grow_data/main/Resources/csv/ALL_data.csv", function(error, data) {
var select = d3.select("body")
.append("div")
.append("select")
select
.on("change", function(d) {
$("#idselector").select2();
var value = d3.select(this).property("value");
alert(value);
});
select.selectAll("option")
.data(data)
.enter()
.append("option")
.text(function (d) { return d.strain; })
.append(function(d) {
const logo = document.createElement('img');
logo.src = d.logo;
return logo;
});
});
There are no errors in my vs code console, nor the http console...
