Points on CanvasQuartz and Feldspar (Emissivity)Multiple Splines-2Blackbody vs Real Body Emissivity PowerDual Function Smart Window (Absorptivity)Emissivity vs. Wavelength of Different MaterialsReflectivity vs. Wavelength of Different MaterialsChromophore graphMultiple SplinesRadiation: Processes and PropertiesMultiple Materials Step Plot
Transmissivity vs. Wavelength of Different Materials
function generateLine1(count) {
var series = []
var x = [.19, .21, .3, 2, 3, 3.1, 3.2, 3.8, 3.85, 3.9, 4.1]
var y = [.85, .88, .94, .94, .9, .92, .9, .6, .61, .6, .06]
for (var i = 0; i < count; i++)
{
series.push({
x: x[i],
y: y[i],
title: `Point ${i+1}`,
comment_1: x[i],
comment_2: y[i]
})
}
return series
}
function generateLine2(count) {
var series = []
var x = [.3, .32, .38, .5, .9, 1.8, 2.4, 2.41]
var y = [.01, .91, .89, .92, .83, .87, .8, .45]
for (var i = 0; i < count; i++)
{
series.push({
x: x[i],
y: y[i],
title: `Point ${i+1}`,
comment_1: x[i],
comment_2: y[i]
})
}
return series
}
function generateLine3(count) {
var series = []
var x = [.38, .4, .8, 1, 1.25, 1.4, 1.5, 1.7, 1.8, 1.9, 1.95, 2.2]
var y = [.03, .89, .9, .67, .87, .64, .85, .13, .6, .27, .59, .05]
for (var i = 0; i < count; i++)
{
series.push({
x: x[i],
y: y[i],
title: `Point ${i+1}`,
comment_1: x[i],
comment_2: y[i]
})
}
return series
}
function generateLine4(count) {
var series = []
var x = [.32, .35, .38, .39, .41, .5, 1, 1.6, 2.3, 2.8]
var y = [0, .52, .5, .74, .73, .8, .18, .38, .47, .06]
for (var i = 0; i < count; i++)
{
series.push({
x: x[i],
y: y[i],
title: `Point ${i+1}`,
comment_1: x[i],
comment_2: y[i]
})
}
return series
}
function generateLine5(count) {
var series = []
var x = [3.4, 3.5, 3.6, 3.7, 3.8, 3.9, 4, 4.6, 5.2, 5.8, 6.9, 7.2, 7.8, 8, 9, 11, 13, 14]
var y = [.85, .88, .85, .88, .85, .87, .85, .89, .85, .88, .14, .78, .55, .78, .1, .6, .3, .84]
for (var i = 0; i < count; i++)
{
series.push({
x: x[i],
y: y[i],
title: `Point ${i+1}`,
comment_1: x[i],
comment_2: y[i]
})
}
return series
}
series = [{
name: "Fused quartz",
data: generateLine1(11)
}, {
name: "Low iron glass",
data: generateLine2(8)
}, {
name: "Lucite",
data: generateLine3(12)
}, {
name: "High iron glass",
data: generateLine4(10)
}, {
name: "Tedlar",
data: generateLine5(18)
}]
options = ({
chart: {
height: 400,
width: 900,
toolbar: {
show: true,
offsetX: 0,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: false,
zoomin: true,
zoomout: true,
pan: true,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
},
autoSelected: 'zoom'
},
},
dataLabels: {
enabled: false
},
legend: {
show: true
},
markers: {
size: 5,
style: 'full',
},
stroke: {
curve: 'straight' //straight //stepline
},
series: series,
xaxis: {
min: 0,
max: 20,
type: 'integer',
tickAmount: 8
},
yaxis: {
min: 0,
max: 1,
tickAmount: 10
},
tooltip: {
enabled: true,
custom: function({_, seriesIndex, dataPointIndex, w}) {
return `<div class="arrow_box">
<h2>${series[seriesIndex].data[dataPointIndex].title}</h2>
<p>Wavelength: ${series[seriesIndex].data[dataPointIndex].comment_1} μm</p>
<p>Emissivity: ${series[seriesIndex].data[dataPointIndex].comment_2}</p>
</div>`
}
}
})
chart = new ApexCharts.default(
document.querySelector("#chart"),
options
)
chart.render()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
