const width = 800

const height = 400

var margintiny = 15

const nudge = 50

const margintop = nudge

const marginbottom = 150

const x = d3.scaleLog().range([margintiny,width-margintiny]).domain([3e-21, 1e3])

const rectData = [[1e-1,1e3],[1e-4,1e-1],[7.5*(1e-7),1e-4],[4*(1e-7),7.5*(1e-7)],[1e-8,4*(1e-7)],[3e-10,1e-8],[3e-21,3e-10]]

const svg = d3.select(DOM.svg(width, height))

svg.selectAll("rect.spectrum").data(rectData).join("rect")

.attr("class","spectrum")

.attr("x", d=>x(d[0]))

.attr("y", d=>margintop)

.attr("width", d=>x(d[1])-x(d[0]))

.attr("height", (marginbottom-margintop))

.style("fill", "lightgrey")

.style("stroke-width", "2px")

.style("stroke", "white")

const labels = ["Radio", "Microwave", "IR", "", "UV", "X-rays", "Gamma Rays"]

svg.selectAll("text.spectrum").data(rectData).join("text")

.attr("class","spectrum")

.attr("x", d=>(x(d[1])+x(d[0]))/2)

.attr("y", ((margintop) + ((marginbottom-margintop)+margintop)) / 2 )

.style("fill", "black")

.style("text-anchor", "middle")

.text((d,i)=> labels[i])

const xAxis = d3.axisBottom().scale(x);

svg.append("g")

.attr("class", "axis")

.attr("transform", "translate(0," + (marginbottom) + ")")

.call(xAxis)

svg.append("text")

.attr("x", width/2)

.attr("y", marginbottom+40)

.style("text-anchor", "middle")

.text("Frequency (Hz)")

const xcolor = d3.scaleLog().range([margintiny,width-margintiny]).domain([4*(1e-7),7.5*(1e-7)])

var defs = svg.append("defs");

const num = 10

const values = d3.range(num)

const rainbowSpectrum = d3.scaleLinear().range([1,0]).domain(d3.extent(values))

const rainbow = d3.interpolateSpectral

var linearGradient = defs.append("linearGradient")

.attr("id", "linear-gradient");

linearGradient.selectAll("stop").data(values).join("stop")

.attr("offset", d=> d/num)

.attr("stop-color", d=>rainbow(rainbowSpectrum(d)) );

svg.append("rect")

.attr("x", d=>x(4*(1e-7)))

.attr("y", d=>margintop)

.attr("width", d=>x(7.5*(1e-7))-x(4*(1e-7)))

.attr("height", (marginbottom-margintop))

.style("fill", "url(#linear-gradient)")

.style("stroke-width", "2px")

.style("stroke", "white")

.on("mouseover", function() {

d3.select(this).style("stroke", "darkgrey")

svg.selectAll("line.rainbowlines").transition().duration(1000).style("stroke-width", "3px")

})

.on("mouseout", function() {

d3.select(this).style("stroke", "white")

svg.selectAll("line.rainbowlines").transition().duration(1000).style("stroke-width", "1px")

})

.append("title")

.text("Based on the size of these wavelengths, this would be\n"+(4*(1e-7)/1.8288)+" to "+(7.5*(1e-7)/1.8288)+"\ntimes the size of 1.8288 meter or 6 foot person")

svg.append("rect")

.attr("x", d=>xcolor(4*(1e-7)))

.attr("y", d=>(height-(marginbottom-margintop))-nudge)

.attr("width", width-(2*margintiny))

.attr("height", (marginbottom-margintop))

.style("fill", "url(#linear-gradient)")

.style("stroke-width", "2px")

.style("stroke", "white")

const xColorAxis = d3.axisBottom().scale(xcolor).ticks(10, "~s");

svg.append("g")

.attr("class", "axis")

.attr("transform", "translate(0," + (height-nudge) + ")")

.call(xColorAxis)

svg.append("text")

.attr("x", width/2)

.attr("y",(height-10))

.style("text-anchor", "middle")

.text("Wavelengths")

const h = height

const b = marginbottom

const t = margintop

const n = nudge

const y2 = (((h-(b-t))-(n)) - ((b-t)+t)) + (((b-t)+t)*.7)

svg.append("line")

.attr("class","rainbowlines")

.attr("x1", x(4*(1e-7)))

.attr("y1", (marginbottom-margintop)+margintop)

.attr("x2", x(4*(1e-7)))

.attr("y2", y2)

.style("stroke", "black")

.style("stroke-dasharray", 2)

svg.append("line")

.attr("class","rainbowlines")

.attr("x1", x(4*(1e-7)))

.attr("y1", y2)

.attr("x2", margintiny)

.attr("y2", (h-(b-t))-n)

.style("stroke", "black")

.style("stroke-dasharray", 2)

svg.append("line")

.attr("class","rainbowlines")

.attr("x1", x(7.5*(1e-7)))

.attr("y1", (marginbottom-margintop)+margintop)

.attr("x2", x(7.5*(1e-7)))

.attr("y2", y2)

.style("stroke", "black")

.style("stroke-dasharray", 2)

svg.append("line")

.attr("class","rainbowlines")

.attr("x1", x(7.5*(1e-7)))

.attr("y1", y2)

.attr("x2", width-margintiny)

.attr("y2", (h-(b-t))-n)

.style("stroke", "black")

.style("stroke-dasharray", 2)

svg.append("text")

.attr("x", (x(4*(1e-7))+x(7.5*(1e-7)))/2)

.attr("y",(h-(b-t))-(n+10))

.style("text-anchor", "middle")

.style("font-size", 24)

.text("Visible Spectrum")

return svg.node()

}