spectrum = {
const svg = html `<svg width="${width}" height="${height}" />`
var buttonPress = 1;
var click = [0, 0, 0, 0, 0, 0, 0]
var specOp = 1;
var smallVisPos = [(width - margin.left - margin.right) * .41,
(width - margin.left - margin.right) * .41 + 3,
(width - margin.left - margin.right) * .41 + 7,
(width - margin.left - margin.right) * .41 + 11,
(width - margin.left - margin.right) * .41 + 15,
(width - margin.left - margin.right) * .41 + 18,
(width - margin.left - margin.right) * .41 + 22
]
d3.select(svg)
.append("rect")
.attr("id", "background")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.style("fill", "white")
//Visible Spectrum _____________________________________________________________________________
console.log(specOp)
for (var i = 0; i < 59; i++) { //violet to indigo
var color = "rgb(" + (135 - 2* i) + ", " + i + ", " + (255 - 3 * i) + ")";
d3.select(svg)
.append("rect")
.attr("id", "visibleSpec")
.attr("y", 375)
.attr("x", 132 + i)
.attr("width", 1)
.attr("height", 100)
.style("fill", color)
.attr("opacity", 0.6 * specOp)
}
for (var i = 0; i < 59; i++) { //indigo to blue
var color = "rgb(" + (45-i) + ", " + (45-i) + ", " + (100 + 3 * i) + ")";
d3.select(svg)
.append("rect")
.attr("id", "visibleSpec")
.attr("y", 375)
.attr("x", 191 + i)
.attr("width", 1)
.attr("height", 100)
.style("fill", color)
.attr("opacity", 0.6 * specOp)
}
for (var i = 0; i < 166; i++) { //blue to green
var color = "rgb(0, " + (2*i) + ", " + (255 - 2*i) + ")";
d3.select(svg)
.append("rect")
.attr("id", "visibleSpec")
.attr("y", 375)
.attr("x", 250 + i)
.attr("width", 1)
.attr("height", 100)
.style("fill", color)
.attr("opacity", 0.6 * specOp)
}
for (var i = 0; i < 166; i++) { //green to yellow
var color = "rgb(" + (2*i) + ", 255, 0)";
d3.select(svg)
.append("rect")
.attr("id", "visibleSpec")
.attr("y", 375)
.attr("x",416 + i)
.attr("width", 1)
.attr("height", 100)
.style("fill", color)
.attr("opacity", 0.6 * specOp)
}
for (var i = 0; i < 166; i++) { //yellow to red
var color = "rgb(255, " + (255-2*i) + ", 0)";
d3.select(svg)
.append("rect")
.attr("id", "visibleSpec")
.attr("y", 375)
.attr("x", 582 + i)
.attr("width", 1)
.attr("height", 100)
.style("fill", color)
.attr("opacity", 0.6 * specOp)
}
d3.select(svg)
.append("line")
.attr("id", "line1")
.attr("x1", 132)
.attr("y1", 375)
.attr("x2", 360)
.attr("y2", 210)
.style("stroke", "black")
.style("stroke-width", 5)
.attr("opacity", 0.5)
d3.select(svg)
.append("line")
.attr("id", "line2")
.attr("x1", 748)
.attr("y1", 375)
.attr("x2", 385)
.attr("y2", 210)
.style("stroke", "black")
.style("stroke-width", 5)
.attr("opacity", 0.5)
d3.select(svg)
.append("rect")
.attr("id", "specRect")
.attr("x", 132)
.attr("y", 375)
.attr("height", 100)
.attr("width", 616)
.style("fill", "none")
.style("stroke", "black")
.style("stroke-width", 5)
.attr("opacity", 0.5)
d3.select(svg) //small violet
.append("rect")
.attr("class", "visibleRectColor")
.attr("id", "visibleRectColor1")
.attr("x", smallVisPos[0])
.attr("y", margin.top + 100)
.attr("width", 3)
.attr("height", 100)
.style("fill", "#9400D3")
.attr("opacity", 0.5)
d3.select(svg) //small indigo
.append("rect")
.attr("class", "visibleRectColor")
.attr("id", "visibleRectColor2")
.attr("x", smallVisPos[1])
.attr("y", margin.top + 100)
.attr("width", 4)
.attr("height", 100)
.style("fill", "#4B0082")
.attr("opacity", 0.5)
d3.select(svg) //small blue
.append("rect")
.attr("class", "visibleRectColor")
.attr("id", "visibleRectColor3")
.attr("x", smallVisPos[2])
.attr("y", margin.top + 100)
.attr("width", 4)
.attr("height", 100)
.style("fill", "#0000FF")
.attr("opacity", 0.5)
d3.select(svg) //small green
.append("rect")
.attr("class", "visibleRectColor")
.attr("id", "visibleRectColor4")
.attr("x", smallVisPos[3])
.attr("y", margin.top + 100)
.attr("width", 4)
.attr("height", 100)
.style("fill", "#00FF00")
.attr("opacity", 0.5)
d3.select(svg) //small yellow
.append("rect")
.attr("class", "visibleRectColor")
.attr("id", "visibleRectColor5")
.attr("x", smallVisPos[4])
.attr("y", margin.top + 100)
.attr("width", 3)
.attr("height", 100)
.style("fill", "#FFFF00")
.attr("opacity", 0.5)
d3.select(svg) //small orange
.append("rect")
.attr("class", "visibleRectColor")
.attr("id", "visibleRectColor6")
.attr("x", smallVisPos[5])
.attr("y", margin.top + 100)
.attr("width", 4)
.attr("height", 100)
.style("fill", "#FF7F00")
.attr("opacity", 0.5)
d3.select(svg) //small red
.append("rect")
.attr("class", "visibleRectColor")
.attr("id", "visibleRectColor7")
.attr("x", smallVisPos[6])
.attr("y", margin.top + 100)
.attr("width", 4)
.attr("height", 100)
.style("fill", "#FF0000")
.attr("opacity", 0.5)
//Functions ___________________________________________________________________________________
function xrays() {
if (click[1] == 0) {
click[1] = 1;
specOp = 0;
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#gamma")
.attr("opacity", 0);
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("x", 0.05 * (width - margin.left - margin.right))
.attr("width", 0.7 * (width - margin.left - margin.right));
d3.select("#uvRect")
.transition()
.duration(500)
.attr("x", 0.76 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#uv")
.attr("opacity", 0);
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#line1")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#line2")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("opacity", 0)
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("width", 0.04 * (width - margin.left - margin.right))
.attr("x", 0.81 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor1")
.transition()
.duration(500)
.attr("x", smallVisPos[0] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor2")
.transition()
.duration(500)
.attr("x", smallVisPos[1] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor3")
.transition()
.duration(500)
.attr("x", smallVisPos[2] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor4")
.transition()
.duration(500)
.attr("x", smallVisPos[3] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor5")
.transition()
.duration(500)
.attr("x", smallVisPos[4] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor6")
.transition()
.duration(500)
.attr("x", smallVisPos[5] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor7")
.transition()
.duration(500)
.attr("x", smallVisPos[6] + .40 * (width - margin.left - margin.right))
d3.select("#visible")
.attr("opacity", 0)
d3.select("#irRect")
.transition()
.duration(500)
.attr("x", 0.86 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#ir")
.attr("opacity", 0);
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("x", 0.91 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#microwave")
.attr("opacity", 0);
d3.select("#radioRect")
.transition()
.duration(500)
.attr("x", 0.96 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#radio")
.attr("opacity", 0);
}
else {
click[1] = 0;
specOp = 1;
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", .21 * (width - margin.left - margin.right))
d3.select("#gamma")
.attr("opacity", 1)
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .22)
d3.select("#uvRect")
.transition()
.duration(500)
.attr("width", 0.06 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .34)
d3.select("#uv")
.attr("opacity", 1)
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("opacity", 0.6)
d3.selectAll("#line1")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.selectAll("#line2")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("width", 0.03 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .41)
d3.selectAll("#visibleRectColor1")
.transition()
.duration(500)
.attr("x", smallVisPos[0])
d3.selectAll("#visibleRectColor2")
.transition()
.duration(500)
.attr("x", smallVisPos[1])
d3.selectAll("#visibleRectColor3")
.transition()
.duration(500)
.attr("x", smallVisPos[2])
d3.selectAll("#visibleRectColor4")
.transition()
.duration(500)
.attr("x", smallVisPos[3])
d3.selectAll("#visibleRectColor5")
.transition()
.duration(500)
.attr("x", smallVisPos[4])
d3.selectAll("#visibleRectColor6")
.transition()
.duration(500)
.attr("x", smallVisPos[5])
d3.selectAll("#visibleRectColor7")
.transition()
.duration(500)
.attr("x", smallVisPos[6])
d3.select("#visible")
.attr("opacity", 1)
d3.select("#irRect")
.transition()
.duration(500)
.attr("width", 0.12 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .45)
d3.select("#ir")
.attr("opacity", 1)
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .58)
d3.select("#microwave")
.attr("opacity", 1)
d3.select("#radioRect")
.transition()
.duration(500)
.attr("width", 0.3 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .70)
d3.select("#radio")
.attr("opacity", 1)
}
}
function uv() {
if (click[2] == 0) {
click[2] = 1;
specOp = 0;
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#gamma")
.attr("opacity", 0);
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("x", 0.05 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#xrays")
.attr("opacity", 0);
d3.select("#uvRect")
.transition()
.duration(500)
.attr("x", 0.1 * (width - margin.left - margin.right))
.attr("width", 0.7 * (width - margin.left - margin.right));
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#line1")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#line2")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("opacity", 0)
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("width", 0.04 * (width - margin.left - margin.right))
.attr("x", 0.81 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor1")
.transition()
.duration(500)
.attr("x", smallVisPos[0] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor2")
.transition()
.duration(500)
.attr("x", smallVisPos[1] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor3")
.transition()
.duration(500)
.attr("x", smallVisPos[2] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor4")
.transition()
.duration(500)
.attr("x", smallVisPos[3] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor5")
.transition()
.duration(500)
.attr("x", smallVisPos[4] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor6")
.transition()
.duration(500)
.attr("x", smallVisPos[5] + .40 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor7")
.transition()
.duration(500)
.attr("x", smallVisPos[6] + .40 * (width - margin.left - margin.right))
d3.select("#visible")
.attr("opacity", 0)
d3.select("#irRect")
.transition()
.duration(500)
.attr("x", 0.86 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#ir")
.attr("opacity", 0);
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("x", 0.91 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#microwave")
.attr("opacity", 0);
d3.select("#radioRect")
.transition()
.duration(500)
.attr("x", 0.96 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#radio")
.attr("opacity", 0);
}
else {
click[2] = 0;
specOp = 1;
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", .21 * (width - margin.left - margin.right))
d3.select("#gamma")
.attr("opacity", 1)
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .22)
d3.select("#xrays")
.attr("opacity", 1)
d3.select("#uvRect")
.transition()
.duration(500)
.attr("width", 0.06 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .34)
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("opacity", 0.6)
d3.selectAll("#line1")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.selectAll("#line2")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("width", 0.03 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .41)
d3.selectAll("#visibleRectColor1")
.transition()
.duration(500)
.attr("x", smallVisPos[0])
d3.selectAll("#visibleRectColor2")
.transition()
.duration(500)
.attr("x", smallVisPos[1])
d3.selectAll("#visibleRectColor3")
.transition()
.duration(500)
.attr("x", smallVisPos[2])
d3.selectAll("#visibleRectColor4")
.transition()
.duration(500)
.attr("x", smallVisPos[3])
d3.selectAll("#visibleRectColor5")
.transition()
.duration(500)
.attr("x", smallVisPos[4])
d3.selectAll("#visibleRectColor6")
.transition()
.duration(500)
.attr("x", smallVisPos[5])
d3.selectAll("#visibleRectColor7")
.transition()
.duration(500)
.attr("x", smallVisPos[6])
d3.select("#visible")
.attr("opacity", 1)
d3.select("#irRect")
.transition()
.duration(500)
.attr("width", 0.12 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .45)
d3.select("#ir")
.attr("opacity", 1)
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .58)
d3.select("#microwave")
.attr("opacity", 1)
d3.select("#radioRect")
.transition()
.duration(500)
.attr("width", 0.3 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .70)
d3.select("#radio")
.attr("opacity", 1)
}
}
function visible() {
if (click[2] == 0) {
click[2] = 1;
specOp = 0;
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("y", margin.top + 100);
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("y", margin.top + 100)
d3.select("#line1")
.transition()
.duration(500)
.attr("x2", 372.5)
.attr("y1", 110)
.attr("y2", 110)
d3.select("#line2")
.transition()
.duration(500)
.attr("x2", 372.5)
.attr("y1", 110)
.attr("y2", 110)
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#gamma")
.attr("opacity", 0);
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("x", 0.05 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#xrays")
.attr("opacity", 0);
d3.select("#uvRect")
.transition()
.duration(500)
.attr("x", 0.1 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#uv")
.attr("opacity", 0);
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("x", 0.15 * (width - margin.left - margin.right))
.attr("width", 0.7 * (width - margin.left - margin.right));
d3.selectAll(".visibleRectColor")
.transition()
.duration (500)
.attr("opacity", 0)
d3.select("#irRect")
.transition()
.duration(500)
.attr("x", 0.86 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#ir")
.attr("opacity", 0);
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("x", 0.91 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#microwave")
.attr("opacity", 0);
d3.select("#radioRect")
.transition()
.duration(500)
.attr("x", 0.96 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#radio")
.attr("opacity", 0);
}
else {
click[2] = 0;
specOp = 1;
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("y", 375)
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("y", 375)
d3.select("#line1")
.transition()
.duration(500)
.attr("x2", 360)
.attr("y1", 375)
.attr("y2", 210)
d3.select("#line2")
.transition()
.duration(500)
.attr("x2", 385)
.attr("y1", 375)
.attr("y2", 210)
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", .21 * (width - margin.left - margin.right))
d3.select("#gamma")
.attr("opacity", 1)
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .22)
d3.select("#xrays")
.attr("opacity", 1)
d3.select("#uvRect")
.transition()
.duration(500)
.attr("width", 0.06 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .34)
d3.select("#uv")
.attr("opacity", 1);
d3.selectAll(".visibleRectColor")
.transition()
.duration (500)
.attr("opacity", 0.5)
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("width", 0.03 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .41)
d3.select("#visible")
.attr("opacity", 1)
d3.select("#irRect")
.transition()
.duration(500)
.attr("width", 0.12 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .45)
d3.select("#ir")
.attr("opacity", 1)
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .58)
d3.select("#microwave")
.attr("opacity", 1)
d3.select("#radioRect")
.transition()
.duration(500)
.attr("width", 0.3 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .70)
d3.select("#radio")
.attr("opacity", 1)
}
}
function ir() {
if (click[3] == 0) {
click[3] = 1;
specOp = 0;
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#gamma")
.attr("opacity", 0);
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("x", 0.05 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#xrays")
.attr("opacity", 0);
d3.select("#uvRect")
.transition()
.duration(500)
.attr("x", 0.1 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#uv")
.attr("opacity", 0);
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#line1")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#line2")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("opacity", 0)
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("width", 0.04 * (width - margin.left - margin.right))
.attr("x", 0.15 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor1")
.transition()
.duration(500)
.attr("x", smallVisPos[0] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor2")
.transition()
.duration(500)
.attr("x", smallVisPos[1] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor3")
.transition()
.duration(500)
.attr("x", smallVisPos[2] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor4")
.transition()
.duration(500)
.attr("x", smallVisPos[3] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor5")
.transition()
.duration(500)
.attr("x", smallVisPos[4] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor6")
.transition()
.duration(500)
.attr("x", smallVisPos[5] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor7")
.transition()
.duration(500)
.attr("x", smallVisPos[6] - 0.26 * (width - margin.left - margin.right))
d3.select("#visible")
.attr("opacity", 0)
d3.select("#irRect")
.transition()
.duration(500)
.attr("x", 0.20 * (width - margin.left - margin.right))
.attr("width", 0.7 * (width - margin.left - margin.right));
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("x", 0.91 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#microwave")
.attr("opacity", 0);
d3.select("#radioRect")
.transition()
.duration(500)
.attr("x", 0.96 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#radio")
.attr("opacity", 0);
}
else {
click[3] = 0;
specOp = 1;
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", .21 * (width - margin.left - margin.right))
d3.select("#gamma")
.attr("opacity", 1)
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .22)
d3.select("#xrays")
.attr("opacity", 1)
d3.select("#uvRect")
.transition()
.duration(500)
.attr("width", 0.06 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .34)
d3.select("#uv")
.attr("opacity", 1);
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("opacity", 0.6)
d3.selectAll("#line1")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.selectAll("#line2")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("width", 0.03 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .41)
d3.selectAll("#visibleRectColor1")
.transition()
.duration(500)
.attr("x", smallVisPos[0])
d3.selectAll("#visibleRectColor2")
.transition()
.duration(500)
.attr("x", smallVisPos[1])
d3.selectAll("#visibleRectColor3")
.transition()
.duration(500)
.attr("x", smallVisPos[2])
d3.selectAll("#visibleRectColor4")
.transition()
.duration(500)
.attr("x", smallVisPos[3])
d3.selectAll("#visibleRectColor5")
.transition()
.duration(500)
.attr("x", smallVisPos[4])
d3.selectAll("#visibleRectColor6")
.transition()
.duration(500)
.attr("x", smallVisPos[5])
d3.selectAll("#visibleRectColor7")
.transition()
.duration(500)
.attr("x", smallVisPos[6])
d3.select("#visible")
.attr("opacity", 1)
d3.select("#irRect")
.transition()
.duration(500)
.attr("width", 0.12 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .45)
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .58)
d3.select("#microwave")
.attr("opacity", 1)
d3.select("#radioRect")
.transition()
.duration(500)
.attr("width", 0.3 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .70)
d3.select("#radio")
.attr("opacity", 1)
}
}
function microwave() {
if (click[4] == 0) {
click[4] = 1;
specOp = 0;
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#gamma")
.attr("opacity", 0);
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("x", 0.05 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#xrays")
.attr("opacity", 0);
d3.select("#uvRect")
.transition()
.duration(500)
.attr("x", 0.1 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#uv")
.attr("opacity", 0);
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#line1")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#line2")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("opacity", 0)
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("width", 0.04 * (width - margin.left - margin.right))
.attr("x", 0.15 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor1")
.transition()
.duration(500)
.attr("x", smallVisPos[0] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor2")
.transition()
.duration(500)
.attr("x", smallVisPos[1] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor3")
.transition()
.duration(500)
.attr("x", smallVisPos[2] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor4")
.transition()
.duration(500)
.attr("x", smallVisPos[3] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor5")
.transition()
.duration(500)
.attr("x", smallVisPos[4] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor6")
.transition()
.duration(500)
.attr("x", smallVisPos[5] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor7")
.transition()
.duration(500)
.attr("x", smallVisPos[6] - 0.26 * (width - margin.left - margin.right))
.attr("x", 0.15 * (width - margin.left - margin.right))
d3.select("#visible")
.attr("opacity", 0)
d3.select("#irRect")
.transition()
.duration(500)
.attr("x", 0.20 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#ir")
.attr("opacity", 0);
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("x", 0.25 * (width - margin.left - margin.right))
.attr("width", 0.7 * (width - margin.left - margin.right));
d3.select("#radioRect")
.transition()
.duration(500)
.attr("x", 0.96 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#radio")
.attr("opacity", 0);
}
else {
click[4] = 0;
specOp = 1;
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", .21 * (width - margin.left - margin.right))
d3.select("#gamma")
.attr("opacity", 1)
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .22)
d3.select("#xrays")
.attr("opacity", 1)
d3.select("#uvRect")
.transition()
.duration(500)
.attr("width", 0.06 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .34)
d3.select("#uv")
.attr("opacity", 1);
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("opacity", 0.6)
d3.selectAll("#line1")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.selectAll("#line2")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("width", 0.03 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .41)
d3.selectAll("#visibleRectColor1")
.transition()
.duration(500)
.attr("x", smallVisPos[0])
d3.selectAll("#visibleRectColor2")
.transition()
.duration(500)
.attr("x", smallVisPos[1])
d3.selectAll("#visibleRectColor3")
.transition()
.duration(500)
.attr("x", smallVisPos[2])
d3.selectAll("#visibleRectColor4")
.transition()
.duration(500)
.attr("x", smallVisPos[3])
d3.selectAll("#visibleRectColor5")
.transition()
.duration(500)
.attr("x", smallVisPos[4])
d3.selectAll("#visibleRectColor6")
.transition()
.duration(500)
.attr("x", smallVisPos[5])
d3.selectAll("#visibleRectColor7")
.transition()
.duration(500)
.attr("x", smallVisPos[6])
d3.select("#visible")
.attr("opacity", 1)
d3.select("#irRect")
.transition()
.duration(500)
.attr("width", 0.12 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .45)
d3.select("#ir")
.attr("opacity", 1)
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .58)
d3.select("#radioRect")
.transition()
.duration(500)
.attr("width", 0.3 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .70)
d3.select("#radio")
.attr("opacity", 1)
}
}
function radio() {
if (click[5] == 0) {
click[5] = 1;
specOp = 0;
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#gamma")
.attr("opacity", 0);
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("x", 0.05 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#xrays")
.attr("opacity", 0);
d3.select("#uvRect")
.transition()
.duration(500)
.attr("x", 0.1 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#uv")
.attr("opacity", 0);
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#line1")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#line2")
.transition()
.duration(500)
.attr("opacity", 0)
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("opacity", 0)
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("width", 0.04 * (width - margin.left - margin.right))
.attr("x", 0.15 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor1")
.transition()
.duration(500)
.attr("x", smallVisPos[0] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor2")
.transition()
.duration(500)
.attr("x", smallVisPos[1] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor3")
.transition()
.duration(500)
.attr("x", smallVisPos[2] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor4")
.transition()
.duration(500)
.attr("x", smallVisPos[3] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor5")
.transition()
.duration(500)
.attr("x", smallVisPos[4] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor6")
.transition()
.duration(500)
.attr("x", smallVisPos[5] - 0.26 * (width - margin.left - margin.right))
d3.selectAll("#visibleRectColor7")
.transition()
.duration(500)
.attr("x", smallVisPos[6] - 0.26 * (width - margin.left - margin.right))
d3.select("#visible")
.attr("opacity", 0)
d3.select("#irRect")
.transition()
.duration(500)
.attr("x", 0.20 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#ir")
.attr("opacity", 0);
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("x", 0.25 * (width - margin.left - margin.right))
.attr("width", 0.04 * (width - margin.left - margin.right));
d3.select("#microwave")
.attr("opacity", 0);
d3.select("#radioRect")
.transition()
.duration(500)
.attr("x", 0.3 * (width - margin.left - margin.right))
.attr("width", 0.7 * (width - margin.left - margin.right));
}
else {
click[5] = 0;
specOp = 1;
d3.select("#gammaRect")
.transition()
.duration(500)
.attr("width", .21 * (width - margin.left - margin.right))
d3.select("#gamma")
.attr("opacity", 1)
d3.select("#xraysRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .22)
d3.select("#xrays")
.attr("opacity", 1)
d3.select("#uvRect")
.transition()
.duration(500)
.attr("width", 0.06 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .34)
d3.select("#uv")
.attr("opacity", 1);
d3.selectAll("#visibleSpec")
.transition()
.duration(500)
.attr("opacity", 0.6)
d3.selectAll("#line1")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.selectAll("#line2")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.selectAll("#specRect")
.transition()
.duration(500)
.attr("opacity", 0.5)
d3.select("#visibleRect")
.transition()
.duration(500)
.attr("width", 0.03 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .41)
d3.selectAll("#visibleRectColor1")
.transition()
.duration(500)
.attr("x", smallVisPos[0])
d3.selectAll("#visibleRectColor2")
.transition()
.duration(500)
.attr("x", smallVisPos[1])
d3.selectAll("#visibleRectColor3")
.transition()
.duration(500)
.attr("x", smallVisPos[2])
d3.selectAll("#visibleRectColor4")
.transition()
.duration(500)
.attr("x", smallVisPos[3])
d3.selectAll("#visibleRectColor5")
.transition()
.duration(500)
.attr("x", smallVisPos[4])
d3.selectAll("#visibleRectColor6")
.transition()
.duration(500)
.attr("x", smallVisPos[5])
d3.selectAll("#visibleRectColor7")
.transition()
.duration(500)
.attr("x", smallVisPos[6])
d3.select("#visible")
.attr("opacity", 1)
d3.select("#irRect")
.transition()
.duration(500)
.attr("width", 0.12 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .45)
d3.select("#ir")
.attr("opacity", 1)
d3.select("#microwaveRect")
.transition()
.duration(500)
.attr("width", 0.11 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .58)
d3.select("#microwave")
.attr("opacity", 1)
d3.select("#radioRect")
.transition()
.duration(500)
.attr("width", 0.3 * (width - margin.left - margin.right))
.attr("x", (width - margin.left - margin.right) * .70)
}
}
//Gamma rays __________________________________________________________________________________
d3.select(svg)
.append("rect")
.attr("id", "gammaRect")
.attr("x", 0)
.attr("y", margin.top + 100)
.attr("width", (width - margin.left - margin.right) * .21)
.attr("height", 100)
.style("fill", "#3029ff")
.attr("opacity", 0.5)
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#gammaRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#gammaRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => gamma(click,smallVisPos))
d3.select(svg)
.append("text")
.text("Gamma rays")
.attr("id", "gamma")
.attr("x", margin.left + 85)
.attr("y", margin.top + 155)
.style("text-anchor", "middle")
.style("font-size", 25)
.style("font-family", "sans-serif")
.style("font-weight", 650)
.style("text-anchor", "middle")
.style("fill", "white")
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#gammaRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#gammaRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => gamma())
//X-rays ______________________________________________________________________________________
d3.select(svg)
.append("rect")
.attr("id", "xraysRect")
.attr("x", (width - margin.left - margin.right) * .22)
.attr("y", margin.top + 100)
.attr("width", (width - margin.left - margin.right) * .11)
.attr("height", 100)
.style("fill", "#5e64ff")
.attr("opacity", 0.5)
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#xraysRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#xraysRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => xrays())
d3.select(svg)
.append("text")
.text("X-rays")
.attr("id", "xrays")
.attr("x", (width - margin.left - margin.right) * .225 + 45)
.attr("y", margin.top + 155)
.style("text-anchor", "middle")
.style("font-size", 25)
.style("font-family", "sans-serif")
.style("font-weight", 650)
.style("text-anchor", "middle")
.style("fill", "white")
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#xraysRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#xraysRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => xrays())
//UV ____________________________________________________________________________________________
d3.select(svg)
.append("rect")
.attr("id", "uvRect")
.attr("x", (width - margin.left - margin.right) * .34)
.attr("y", margin.top + 100)
.attr("width", (width - margin.left - margin.right) * .06)
.attr("height", 100)
.style("fill", "#637cf7")
.attr("opacity", 0.5)
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#uvRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#uvRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => uv())
d3.select(svg)
.append("text")
.text("UV")
.attr("id", "uv")
.attr("x", (width - margin.left - margin.right) * .35 + 17)
.attr("y", margin.top + 155)
.style("text-anchor", "middle")
.style("font-size", 25)
.style("font-family", "sans-serif")
.style("font-weight", 650)
.style("text-anchor", "middle")
.style("fill", "white")
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#uvRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#uvRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => uv())
//Visible ______________________________________________________________________________________
d3.select(svg)
.append("rect")
.attr("id", "visibleRect")
.attr("x", (width - margin.left - margin.right) * .41)
.attr("y", margin.top + 100)
.attr("width", (width - margin.left - margin.right) * .03)
.attr("height", 100)
.style("fill", "none")
.style("stroke", "black")
.style("stroke-width", 4)
.attr("opacity", 0.5)
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#visibleRect")
.transition("mouseOver")
.duration(100)
.style('fill', "#BBBBBB")
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#visibleRect")
.transition("mouseOut")
.duration(100)
.style('fill', "none")
})
.on('click', () => visible())
//IR ____________________________________________________________________________________________
d3.select(svg)
.append("rect")
.attr("id", "irRect")
.attr("x", (width - margin.left - margin.right) * .45)
.attr("y", margin.top + 100)
.attr("width", (width - margin.left - margin.right) * .12)
.attr("height", 100)
.style("fill", "#f77e63")
.attr("opacity", 0.5)
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#irRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#irRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => ir())
d3.select(svg)
.append("text")
.text("IR")
.attr("id", "ir")
.attr("x", (width - margin.left - margin.right) * .47 + 35)
.attr("y", margin.top + 155)
.style("text-anchor", "middle")
.style("font-size", 25)
.style("font-family", "sans-serif")
.style("font-weight", 650)
.style("text-anchor", "middle")
.style("fill", "white")
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#irRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#irRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => ir())
//Microwave _____________________________________________________________________________________
d3.select(svg)
.append("rect")
.attr("id", "microwaveRect")
.attr("x", (width - margin.left - margin.right) * .58)
.attr("y", margin.top + 100)
.attr("width", (width - margin.left - margin.right) * .11)
.attr("height", 100)
.style("fill", "#f76f63")
.attr("opacity", 0.5)
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#microwaveRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#microwaveRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => microwave())
d3.select(svg)
.append("text")
.text("Microwave")
.attr("id", "microwave")
.attr("x", (width - margin.left - margin.right) * .605 + 27)
.attr("y", margin.top + 155)
.style("text-anchor", "middle")
.style("font-size", 17)
.style("font-family", "sans-serif")
.style("font-weight", 650)
.style("text-anchor", "middle")
.style("fill", "white")
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#microwaveRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#microwaveRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => microwave())
//Radio _________________________________________________________________________________________
d3.select(svg)
.append("rect")
.attr("id", "radioRect")
.attr("x", (width - margin.left - margin.right) * .70)
.attr("y", margin.top + 100)
.attr("width", (width - margin.left - margin.right) * .3)
.attr("height", 100)
.style("fill", "#ff4b3b")
.attr("opacity", 0.5)
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#radioRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#radioRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => radio())
d3.select(svg)
.append("text")
.text("Radio")
.attr("id", "radio")
.attr("x", (width - margin.left - margin.right) * .73 + 100)
.attr("y", margin.top + 155)
.style("text-anchor", "middle")
.style("font-size", 25)
.style("font-family", "sans-serif")
.style("font-weight", 650)
.style("text-anchor", "middle")
.style("fill", "white")
.on('mouseover', () => { //Button highlight animation
buttonPress = 0;
d3.select("#radioRect")
.transition("mouseOver")
.duration(100)
.style('opacity', 0.8)
})
.on('mouseout', () => { //Button highlight animation
buttonPress = 1;
d3.select("#radioRect")
.transition("mouseOut")
.duration(100)
.style('opacity', 0.5)
})
.on('click', () => radio())
//_______________________________________________________________________________________________
return svg;
}
color = "rgb(255, " + 1 + ", 0)";
ramp(d3.interpolateHclLong("indigo", "red"))
image3 = FileAttachment ("spectrum.jpg").image()
margin = ({top: 10, right: 10, bottom: 10, left: 10})
height = 600;
width = 900;
function ramp(color, n = 512) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d");
canvas.style.margin = "0 -20px";
canvas.style.width = "calc(100% + 28px)";
canvas.style.height = "100px";
canvas.style.imageRendering = "-moz-crisp-edges";
canvas.style.imageRendering = "pixelated";
for (let i = 0; i < n; ++i) {
context.fillStyle = color(i / (n - 1));
context.fillRect(i, 0, 1, 1);
}
return canvas;
}
d3 = require("d3@5")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.