31:T898,//https://talk.observablehq.com/t/including-html-and-tex-into-markdown/2003 md `## ${tb`[Balmer Formula's](https://en.wikipedia.org/wiki/Balmer_series#Balmer's_formula)`} Calculation for ${tb`[Discrete](https://en.wikipedia.org/wiki/Discrete_spectrum)`} ${tb`[Visible Spectral Line(s)](https://en.wikipedia.org/wiki/Balmer_series#Overview)`} Emitted from Principal Quantum Number 2 ${selectedElevels.sort((a,b)=>b-a).map(eLevel => { const lambda = calcLambda(eLevel); const hexcolor = getHex(lambda); return html`

${tb`[Electron's PQN](https://en.wikipedia.org/wiki/Energy_level)`}	${tb`[${tex`\lambda`}(nm)](https://en.wikipedia.org/wiki/Wavelength)`}	${tb`[Color](https://www.w3schools.com/colors/)`}	${tb`[Hex](https://www.w3schools.com/colors/colors_hexadecimal.asp)`}	${tb`[RGB](https://www.w3schools.com/colors/colors_rgb.asp)`}
${eLevel}	${calcLambda(eLevel)} ≃ ${λTexFormula(eLevel)}		${hexcolor}	${getRGB(lambda).replace("rgb","")}` } ) }

${ramp(t => { const i = Math.round(t * (visibleRange[1] - visibleRange[0] ) + visibleRange[0]) - visibleRange[0]; const displayLambdas = selectedElevels.map(eLevel => calcLambda(eLevel)); const rgb = displayLambdas.indexOf((i + visibleRange[0])) != -1 ? // Subset of Visible Spectrum xyz_rgb(cmf.slice(i * 3, i * 3 + 3)) : // Get specific color for given wavelength [0,0,0]; // Else assign black color return `rgb(${rgb.map(c => Math.round(c * 255))})`; }, 50)} `32:T4ff,md `## ${tb`[Emperical](https://physics.nist.gov/PhysRefData/ASD/lines_form.html)`} ${tb`[Spectral Lines](https://observablehq.com/@mariodelgadosr/spectral-lines-of-elements-in-the-periodic-table)`} for ${tb`[Hydrogen (H)](https://en.wikipedia.org/wiki/Hydrogen_spectral_series)`} ${empericalWaveLenghts.sort().map(lambda => { const hexcolor = getHex(lambda); return html`

${tb`[${tex`\lambda`}(nm)](https://en.wikipedia.org/wiki/Wavelength)`}	${tb`[Color](https://www.w3schools.com/colors/)`}	${tb`[Hex](https://www.w3schools.com/colors/colors_hexadecimal.asp)`}	${tb`[RGB](https://www.w3schools.com/colors/colors_rgb.asp)`}
${lambda}		${hexcolor}	${getRGB(lambda).replace("rgb","")}` } ) }

${getElementSpectrum(empericalWaveLenghts)} `33:T7e1,md `## ${tb`[The Balmer Formula](https://en.wikipedia.org/wiki/Balmer_series#Balmer's_formula)`} * Visible light from the Hydrogen atom is produced as a ${tb`[photon](https://en.wikipedia.org/wiki/Photon)`} when an ${tb`[electron](https://en.wikipedia.org/wiki/Electron)`} ${tb`[transitions (jumps)](https://en.wikipedia.org/wiki/Quantum_jump)`} to energy level 2 (${tb`[Principal Quantum Number (PQN)](https://en.wikipedia.org/wiki/Principal_quantum_number)`} = 2) from a higher energy level. * The higher the starting energy level for the electron's transition, the shorter the wavelength (${tb`[${tex`\lambda`}(nm)](https://en.wikipedia.org/wiki/Wavelength)`}). * The human visible range of light, for ${tb`[photon emissions](https://en.wikipedia.org/wiki/Photon)`} with wavelengths between ${tb`[390nm and 830nm](https://physics.info/color/)`}, is called the ${tb`[visible spectrum](https://observablehq.com/@mbostock/visible-spectrum)`}: ${ramp(t => { const i = Math.round(t * (visibleRange[1] - visibleRange[0] ) + visibleRange[0]) - visibleRange[0]; const xyz = cmf.slice(i * 3, i * 3 + 3); const rgb = xyz_rgb(xyz); return `rgb(${rgb.map(c => Math.round(c * 255))})`; }, 50)}
With the following equation, one can calculate the wavelengths of ${tb`[visible light emissions](https://en.wikipedia.org/wiki/Spectroscopy)`} for the Hydrogen atom: ${tex.block`\lambda=B( \frac{n^2}{n^2-4} )`} Where: * ${tex`\lambda`} (lambda) is the emitted wavelength of visible light. * ${tex`B`} (Balmer Constant) is a constant with the value of ${BalmerConst} m or ${BalmerConst * 1000000000} nm. * ${tex`n`} is an integer such that ${tex`n`} >= 3 and ${tex`n`} <= 7. It represents the electron's initial ${tb`[PQN](https://en.wikipedia.org/wiki/Principal_quantum_number)`} (quantum energy level) before it transitions to PQN = 2. `34:T68e,selectedElevels= { // chartFilter is normally assigned to an Observable cell as per this disucssion: // https://github.com/observablehq/stdlib/blob/master/README.md#Generators_queue // But here the for loop is used to await its generated value; which is then used to calculate // an array. That array is then yielded as selLambdas (selected Lambdas) to the cell to be used elsewhere in the // notebook. // Logic was inferred from "yield value by hand" discussion found here: // https://github.com/observablehq/stdlib/blob/master/README.md#Generators_observe // Other Useful references: // https://observablehq.com/@stanisouce/passing-signals-between-cells // https://observablehq.com/@mbostock/observing-vega-signals // https://medium.com/free-code-camp/yield-yield-how-generators-work-in-javascript-3086742684fc // https://observablehq.com/@ehouais/es2018-asynchronous-iterators //Returns selected energy levels const chartFilter = Generators.queue(notify => { const signaled = (lambda, eLevel) => notify(eLevel); lambdasElevels.addSignalListener("brush_eLevel", signaled); notify(lambdasElevels.signal("brush_eLevel")); return () => lambdasElevels.removeSignalListener("brush_eLevel", signaled); }); for (const value of chartFilter) { let filter = await value; //yield filter ? d3.range(Math.max(Math.ceil(filter[0]),3), Math.floor(filter[1]) + 1 ) : eLevels; yield filter ? d3.range( Math.max(Math.ceil(filter[1]),3), Math.floor(filter[0]) + 1 ) : eLevels; } // for } // brushedElevels 35:Tc1c,bohrModel = { // Start Block const height = chartDimensions["height"] + 20; const legendWidth = 200; const legendHeight = 45; const strokeWidth = 2; const animateStrokeWidth = 10; const maxRadius = (height/ 2) - (legendHeight / 2 ); const data = d3.range(8).reverse(); const radiusScale = d3.scaleBand().domain(data).range([maxRadius,5]).round(true).paddingInner(0.05); const bohrModel = d3.create("svg") .attr("width",chartDimensions["width"]) .attr("height",height); const eLvlsLegend = legend({color, title:"Hydrogen Atom's Electron PQN (n)", height: legendHeight, width: legendWidth }); bohrModel .append("g") // Ordinal Legend for each level .attr("transform", "translate("+ ( (chartDimensions["width"] / 4) - (legendWidth/2) ) +","+ (height - legendHeight ) + ")" ) .append(() => eLvlsLegend); bohrModel.selectAll("circle") .data(data) .join("circle") .attr("id", (d,i) => "n" + ( data.length - i - 1) ) .attr("stroke", (d,i) => i == (data.length - 1) ? "LightGray" : λColors[i]) .attr("fill", (d,i) => i < (data.length - 1) ? "LightGray" :"Black") .attr("r", d => radiusScale(d)); bohrModel.selectAll("circle") .attr("transform", "translate("+ (chartDimensions["width"] / 4) + "," + (chartDimensions["height"] / 2 ) + ")" ); let selIndex = -1; // Index into selLambdas select list fnRepeat(); // Run at least once return bohrModel.node(); function fnRepeat(){!simulate || selectedElevels.length == 0 ? fnReset() : fnAnimateEnergyLevel() }; function fnAnimateEmission(eLevel){ bohrModel.select("#n"+ eLevel) .attr("stroke-width", strokeWidth ); // https://en.wikipedia.org/wiki/Balmer_series#Overview bohrModel.select("#n2") .attr("stroke", getRGB(calcLambda(selectedElevels[selIndex])) ) .attr("stroke-width",animateStrokeWidth) .transition() .ease(d3.easeLinear) .attr("r", radiusScale(data[0]) ) .duration(1500) .on("end", fnRepeat); } // fnAnimateEmission function fnReset(){ bohrModel.selectAll("circle") .attr("stroke-width", strokeWidth) .attr("stroke", (d,i) => i == (data.length - 1 ) ? "LightGray" : λColors[i] ) bohrModel.select("#n2") .attr("r",radiusScale(data[data.length - 3])); if (selectedElevels.length == 0) return; selIndex = selIndex >= selectedElevels.length - 1 ? 0 : ++selIndex; } // fnReset function fnAnimateEnergyLevel(){ fnReset(); bohrModel.select("#n"+ selectedElevels[selIndex]) .transition() .ease(d3.easeLinear) .attr("stroke-width", animateStrokeWidth ) .duration(1500) .on("end", fnAnimateEmission(selectedElevels[selIndex])); } // fnAnimateEnergyLevel } // End Block36:T6a1,// https://vega.github.io/vega-lite/docs/ // https://observablehq.com/@vega/vega-lite-api viewof lambdasElevels = { const data = eLevels.map(e => {return {eLevel: e, lambda: calcLambda(e) } }); const brush = vl.selectInterval("brush"); /* Code to initially select all lambdas vl.selectInterval("brush") .init({"eLevel": [d3.min(data, l => l.eLevel)-.1,d3.max(data, l => l.eLevel)], "lambda":[d3.min(data, l => l.lambda)-20,d3.max(data, l => l.lambda)+20]}); */ const tooltip = vl.tooltip([ {field: 'eLevel', title: 'PQN'}, {field: 'lambda', title: 'ⲗ (nm)'} ]); const lambdasElevels = vl.markCircle({size:100}) .title("Visible Wavelength(s) Emission(s) when Transitioning to PQN 2") .height(chartDimensions["height"]) .width(chartDimensions["width"]) .data(data) .select(brush) .encode( vl.x().fieldQ("eLevel").title("Electron's Initial PQN (n)") .axis({"format": "0d", "values": [1,2,3,4,5,6,7]}).sort("descending"), vl.y().fieldQ("lambda").title("Photon ⲗ (nm)").axis({"orient":"right"}), vl.color().fieldO("lambda") .scale({"domain": data.map(d => d.lambda), "range": λColors}) .title("ⲗ (nm)"), tooltip ); return lambdasElevels.render(); // return html`

${JSON.stringify(lambdasElevels.toJSON(), 0, 2)}

`; // format JSON data } 37:[] 2f:{"title":"Balmer Series Spectral Lines of the Hydrogen Atom with the Bohr Model","cells":[{"id":0,"value":"md`# ${tb`[Balmer Series](https://en.wikipedia.org/wiki/Balmer_series)`} ${tb`[Spectral Lines](https://en.wikipedia.org/wiki/Spectral_line)`} of the ${tb`[Hydrogen Atom](https://en.wikipedia.org/wiki/Hydrogen_spectral_series)`} with the ${tb`[Bohr Model](https://en.wikipedia.org/wiki/Bohr_model)`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"visualizationHTML = html`\n\n${viewof simulate} Run simulation of photon emissions for electrons transitioning from ${tb`[Principal Quantum Number (PQN)](https://en.wikipedia.org/wiki/Principal_quantum_number)`} 7, 6, 5, 4 and/or 3 to number 2.\n

${viewof lambdasElevels}

${bohrModel}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1369,"value":"md` ^{**Using the Visualization**:
\nMouse over the ${tb`[Vega-lite chart](https://vega.github.io/)`} using a ${tb`[brush-selection](https://vega.github.io/vega-lite/docs/selection.html#filtering-data)`} to filter the initial energy levels to animate.}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2690,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1896,"value":"md `## Related\n\n* ${tb`[Spectral Lines of Elements in the Periodic Table](https://observablehq.com/@mariodelgadosr/spectral-lines-of-elements-in-the-periodic-table)`}\n\n* ${tb`[Wavelengths and Spectral Colours](https://observablehq.com/@magfoto/wavelengths-and-spectral-colours)`}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"md `## Balmer Constant and Objects for the Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"BalmerConst = 3.6450682e-7","pinned":false,"hidden":false,"mode":"ojs"},{"id":2136,"value":"// https://en.wikipedia.org/wiki/Balmer_series#Balmer's_formula\ncalcLambda = (eLevel) => Math.round(BalmerConst * (eLevel**2 / ( eLevel**2 - 4 )) * 10**9);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2890,"value":"// gray and dimGray used for visualization of PQN 2 and 1 in Bohr Model\nλColors = [...eLevels.map(e => getHex(calcLambda(e))), \"gray\", \"dimGray\" ];","pinned":false,"hidden":false,"mode":"ojs"},{"id":2669,"value":"color = \n{ \n const maxElevel = Math.max(...eLevels);\n return d3.scaleOrdinal(d3.range(maxElevel).map(d => maxElevel - d), λColors);\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2139,"value":"eLevels = [7,6,5,4,3];","pinned":false,"hidden":false,"mode":"ojs"},{"id":2165,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1927,"value":"λTexFormula = (l) => tex`${BalmerConst * 1000000000}( \\frac{${l}^2}{${l}^2-4} )` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"getRGB = (λ) => \n `rgb(${xyz_rgb(cmf.slice((parseInt(λ) - visibleRange[0]) * 3, \n (parseInt(λ) - visibleRange[0]) * 3 + 3))\n .map(c => Math.min(Math.max(0, Math.round(c * 255)),255) )})`;\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2526,"value":"function getHex(λ){\n \n const toHex= (c) => c.toString(16).length == 1 ? \"0\" + c.toString(16) : c.toString(16);\n \n return \"#\" + getRGB(λ).replace(\"rgb(\",\"\").replace(\")\",\"\").split(\",\").map(c => toHex(parseInt(c))).join(\"\");\n \n \n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"visibleRange = [390,830]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"chartDimensions = { return {height: 250, width: width/2 - 50} }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2969,"value":"// Filters out Paschen Series Lines; wavelengths greater than 820nm: \n// https://en.wikipedia.org/wiki/Hydrogen_spectral_series#Paschen_series_(Bohr_series,_n%E2%80%B2_=_3)\nempericalWaveLenghts = [...λsByElement.get(\"H\").keys()].filter(λ => λ < 820 ) ; ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1712,"value":"md `### The following objects are embedded in the ${tb`[visualizationHTML](#visualizationHTML)`} cell's ${tb`[css grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)`}:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1700,"value":"md`🢇 Click cell to expand code for ***Bohr Model ***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2168,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"md`🢇 Click cell to expand code for ***lambdasElevels***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2792,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2864,"value":"md`🢇 Click cell to expand code for ***simulate***`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3007,"value":"viewof simulate = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md `## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"md `### ${tb`[Visible Spectrum](https://observablehq.com/@mbostock/visible-spectrum)`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"\timport {xyz_rgb, ramp, cmf, lrgb_rgb,\n matrix_xyzd65_lrgb,\n matrix_xyzd50_lrgb,\n matrix_multiply_vector} from \"@mbostock/visible-spectrum\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2696,"value":"md `### ${tb`[Spectral Lines of Elements in the Periodic Table](https://observablehq.com/@mariodelgadosr/spectral-lines-of-elements-in-the-periodic-table)`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2699,"value":"import { λsByElement, getElementSpectrum } from \"@mariodelgadosr/spectral-lines-of-elements-in-the-periodic-table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"md `### ${tb`[Vega-Lite](https://vega.github.io/vega-lite/docs/)`} ${tb`[API](https://vega.github.io/vega-lite-api/)`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1835,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2658,"value":"md `### ${tb`[d3.js](https://d3js.org)`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2649,"value":"md `### Other`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2367,"value":"import {tb} from \"@mariodelgadosr/target-blank\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md `## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`\n\n* ${tex`\\KaTeX`} on Observable\n\n* ${tb`[Color Ramp](https://observablehq.com/@mbostock/color-ramp)`}\n\n* ${tb`[Spectroscopy](https://en.wikipedia.org/wiki/Spectroscopy)`}\n\n* ${tb`[Atomic Spectra Database](https://www.nist.gov/pml/atomic-spectra-database-contents)`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}