Published
Edited
Jun 2, 2020
Points on CanvasQuartz and Feldspar (Emissivity)Multiple Splines-2Blackbody vs Real Body Emissivity PowerDual Function Smart Window (Absorptivity)Emissivity vs. Wavelength of Different MaterialsTransmissivity vs. Wavelength of Different MaterialsChromophore graphMultiple SplinesRadiation: Processes and PropertiesMultiple Materials Step Plot
Reflectivity vs. Wavelength of Different Materials
function generateLine1(count) {
var series = []
var x = [1.9, 2.7, 3.5, 5, 5.5, 6.5, 9, 10, 18]
var y = [.98, .94, .93, .05, .06, .02, .63, .05, .2]
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, 2, 17]
var y = [.35, .65, .81]
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 = [.36, .55, 1.4, 1.65, 1.8, 2.7, 2.8, 3.5, 5, 7, 16.5]
var y = [.87, .91, .87, .8, .81, .36, .37, .05, .13, .04, .04]
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 = [.13, .28, .8, 1, 14]
var y = [.84, .93, .85, .96, .99]
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 = [.24, .27, .35, .5, .9, 1, 1.15, 1.2, 1.25, 1.5, 1.8, 2, 2.4, 3]
var y = [.24, .25, .22, .93, .8, .65, .7, .5, .52, .03, .14, .04, .09, .03]
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 generateLine6(count) {
var series = []
var x = [.3, .37, .4, .5, .55, .7, .75, .8, .95, 1.1, 1.2, 1.3, 1.6, 2.8]
var y = [.11, .24, .2, .36, .35, .63, .6, .63, .48, .51, .44, .46, .1, .15]
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 generateLine7(count) {
var series = []
var x = [.4, 1.3, 2, 2.7, 3.1, 3.4, 4, 6, 7, 8, 9, 10, 11, 20]
var y = [.1, .7, .66, .23, .25, .18, .6, .35, .18, .2, .11, .11, .09, .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 generateLine8(count) {
var series = []
var x = [.25, 1, 1.5, 2, 20]
var y = [.03, .04, .03, .05, .045]
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(9)
}, {
name: "Stainless steel",
data: generateLine2(3)
}, {
name: "White paint",
data: generateLine3(11)
}, {
name: "Aluminum",
data: generateLine4(5)
}, {
name: "Snow",
data: generateLine5(14)
}, {
name: "Human skin (Caucasian)",
data: generateLine6(14)
}, {
name: "Red brick",
data: generateLine7(14)
}, {
name: "Black paint",
data: generateLine8(5)
}]
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.
