<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
padding:6px;
text-align: center;
vertical-align: middle;
display: flex;
justify-content: center;
width: fit-content;
margin-top: 2px;
height: 20px;
}
</style>
<body>
<h2>D3.interpolateSpectral(t) </h2>
<div class="box1">
<span>d3.interpolateSpectral(0.5)</span>
</div>
<div class="box2">
<span>d3.interpolateSpectral(0.4)</span>
</div>
<div class="box3">
<span>d3.interpolateSpectral(0.3)</span>
</div>
<div class="box4">
<span>d3.interpolateSpectral(0.2)</span>
</div>
<div class="box5">
<span>d3.interpolateSpectral(0.1)</span>
</div>
<script src =
</script>
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script>
// creating different colors for different value of k
let color1=
d3.interpolateSpectral(0.5);
let color2=
d3.interpolateSpectral(0.4);
let color3=
d3.interpolateSpectral(0.3);
let color4=
d3.interpolateSpectral(0.2);
let color5=
d3.interpolateSpectral(0.1);
// Selecting Div using query selector
let box1=document.querySelector(".box1");
let box2=document.querySelector(".box2");
let box3=document.querySelector(".box3");
let box4=document.querySelector(".box4");
let box5=document.querySelector(".box5");
// Setting style and BG color of the particular DIVs
box1.style.backgroundColor=color1;
box2.style.backgroundColor=color2;
box3.style.backgroundColor=color3;
box4.style.backgroundColor=color4;
box5.style.backgroundColor=color5;
</script>
</body>
</html>