---
comments: false
page-layout: custom
format:
  html:
    margin-top: 0em
    margin-bottom: 0em
    minimal: true
    smooth-scroll: true
    fig-responsive: true
    toc: false
    echo: false
    keep-hidden: true
    code-tools: true
---

:::: {.hero-small .hero-gradient .hero-clouds}
::: {.container}
# **Surface Spectra**
:::
::::


::::: {.container}
:::: {.about .px-md-7 .py-3 style="border-bottom: 1px solid #C8C7C7;"} 
# While the core mission science focuses on observations of atmospheric composition, the mission will also observe surface properties at unmatched spectral resolutions.  

Carbon-I mission is designed as a wide-swath mapping mission, collecting shortwave infrared imaging spectroscopy data. This will provide new insights into a wide range of areas including critical mineral distributions, vegetation stress, and pollution. Carbon-I’s higher spectral resolution in the shortwave infrared compared to existing missions (e.g., EMIT) allows clearer discrimination of minerals such as lithium-bearing hectorite from similar materials, offering significant value for scientific analysis and potential resource exploration. The Carbon-I team has taken surface reflectance measurements with the Carbon-I Demonstration Unit in the laboratory - check them out below with this tool which allows you to compare these highly resolved spectral data with coarser spectral resolutions to see the power of Carbon-I's surface spectra.

::::
:::::
::::: {.spectra-plots}
:::: {.container .py-3}
```{ojs}
import { rangeSlider as rangeSlider } from '@mootari/range-slider'
```

```{ojs}
rawData =  FileAttachment("data/rfl_lowpass_shaped_v2.csv").csv({typed: true});
```

::: {.grid .py-1 .justify-content-center}
::: {.g-col-6}
```{ojs}
fmt = d3.format(".2f");

viewof slider = rangeSlider({
  min: d3.extent(rawData, d => d.wavelength)[0],
  max: d3.extent(rawData, d => d.wavelength)[1],
  step: 0.7,
  format: d => `${fmt(d)} nm`,
  title: 'Select a range',
})

minWL = slider[0];
maxWL = slider[1];

xMin = d3.min(rawData, d => d.wavelength);
xMax = d3.max(rawData, d => d.wavelength);
```
:::
::: {.g-col-4}
```{ojs}
viewof normalize = Inputs.toggle({
  label: "Normalize 0-1 (per sample)",
  value: false
})
```
:::

```{ojs}
categoryLookup = new Map([
  ["Hectorite", {category: "Minerals", color: "#4daf4a"}],  
  ["Magnesite", {category: "Minerals", color: "#ff7f00"}], 
  ["Saponite", {category: "Minerals", color: "#a65628"}], 
  ["Sepiolite", {category: "Minerals", color: "#e377c2"}], 
  ["Vermiculite", {category: "Minerals", color: "#7f7f7f"}],  

  ["Oak leaf, new growth", {category: "Vegetation", color: "#3a8040"}],  
  ["Oak leaf, one year old", {category: "Vegetation", color: "#ffdd57"}],
  ["Oak leaf, scenesced", {category: "Vegetation", color: "#1b9e77"}],
  ["Maple Leaf", {category: "Vegetation", color: "#7570b3"}],

  ["HDPE bottle",  {category: "Plastics", color: "#1f78b4"}], 
  ["HDPE film", {category: "Plastics", color: "#33a02c"}], 
  ["PVC", {category: "Plastics", color: "#6a3d9a"}],
  ["Polysterene", {category: "Plastics", color: "#b15928"}]   
]);
```

```{ojs}
samples = d3.sort(d3.group(rawData, d => d.sample).keys());

categorizedData = rawData.map(d => {
  const info = categoryLookup.get(d.sample)
  return {
    ...d,
    category : info.category,  
    color : info.color               
  };
});

// wrapping data in set removes duplicates
categories = Array.from(new Set(categorizedData.map(d => d.category)));
```

::: {.g-col-6}
```{ojs}
viewof categorySel = Inputs.checkbox(categories, {
  label: "Sample Categories", 
  value: ["Minerals"]}
);
sampleOptions = Array.from(categoryLookup.keys()).filter(
  s => samples.includes(s) && categorySel.includes(categoryLookup.get(s).category)
);
```
:::
::: {.g-col-6}
```{ojs}
viewof sampleSel = Inputs.checkbox(sampleOptions, {
  value: sampleOptions 
});
viewof samplePanel = categorySel.length
  ? html`<details class="sample-drop" open>
           <summary style="color:#000;">Samples</summary>
           ${viewof sampleSel}
         </details>`
  : html``;
```
:::
::: {.g-col-6}
```{ojs}
viewof resolutionSel = Inputs.range([0.7, 15.4], {step: 0.7, value: 0.7, label: "Resolution (nm)"})
```
:::
::: {.g-col-6}
```{ojs}
viewof windowSel = Inputs.range([1, 15], {step: 1, value: 1, label: "Spectral Averaging Window"})
```
:::
:::
```{ojs}
filteredData = categorizedData.filter(
  d => d.wavelength >= minWL && 
  d.wavelength <= maxWL && 
  categorySel.includes(d.category) &&
  sampleSel.includes(d.sample)
);
```


```{ojs}
plotWidth = Math.min(width, 1800);
uiPx = Math.max(14, Math.round(plotWidth / 55));
labelWidth = Math.round(Math.max(160, uiPx * 7));  
inputWidth = Math.round(Math.max(200, uiPx * 9));

//injected css style to use plotWidth variable
html`
<style>
  .spectra-plots {
    --label-fs: ${uiPx * 0.75}px;
  }
  .spectra-plots form[class^="oi-"]{
    --label-width: ${labelWidth}px !important;
    --input-width: ${inputWidth}px !important;
  }
</style>`

```

```{ojs}
{
  if (filteredData.length < 1) {
    return html`<div style="color:#666;">No active selections to plot.</div>`;
  }

  const rowsBySample = d3.group(filteredData, d => d.sample);  // Map<sample, rows[]>
  const adjustedData = [];
  const resolutionSize = Math.max(1, Math.round(resolutionSel / 0.7)); 

  for (const [sample, rows] of rowsBySample) {
    let adjusted = rows.map(r => r.reflectance);

    if (windowSel > 1){
      adjusted = d3.blur(adjusted, windowSel);
    } 

    let ymin, ymax, denom;
    if (normalize) {
      ymin = d3.min(adjusted);
      ymax = d3.max(adjusted);
      denom = ymax - ymin; 
    }

    for (let i = 0; i < adjusted.length; i += resolutionSize) {
      let y = adjusted[i];
      if (normalize){
        y = denom > 0 ? (adjusted[i] - ymin) / denom : 0 //avoid divide by 0
      }
      
      adjustedData.push({
        wavelength: rows[i].wavelength,
        reflectance: y,
        sample
      });
    }
  }

  const activeSamples = Array.from(new Set(filteredData.map(d => d.sample)));
  const fontPx = Math.max(10, Math.round(plotWidth / 55));
  const rotate = plotWidth < 650 ? -45 : 0;

  const xTickStart = Math.ceil(minWL / 20) * 20;
  const xTickEnd = Math.floor(maxWL / 20) * 20;

  const yLabel = normalize ? "Normalized reflectance" : "Reflectance";
  const xLabel = "Wavelength (nm)"

  const yStep = 0.05;
  const maxY = normalize ? 1 : d3.max(adjustedData, d => d.reflectance);
  const yMaxTick = normalize ? 1 : Math.ceil(maxY/yStep) * yStep;

  const fmtVal = normalize ? d3.format(".3f") : d3.format(".4f");

  const p = Plot.plot({
    width: plotWidth,
    height: Math.round(plotWidth * (11/20)),
    marginRight: 280,
    marginLeft: 120,   
    marginBottom: 85,

    x: {
      label: xLabel,
      tickPadding: 10,
      tickRotate: rotate,  
      labelAnchor: "center",     
      labelOffset: 80,
      domain: [minWL, maxWL],                                         
      ticks: d3.range(xTickStart, xTickEnd + 1, 30),
      tickFormat: d3.format("d")                                    
    },
    y: {
      label: yLabel,
      grid: true,
      labelAnchor: "center",     
      labelOffset: 120,
      tickFormat: d => d.toFixed(2),
      ticks: 20,
      tickPadding: 10,
      domain: [0, maxY + 0.02]
    },
    color: {
      legend: true,
      domain: activeSamples,
      range: activeSamples.map(s => categoryLookup.get(s).color),
      inset: { 
        anchor: "top-right", 
        inset: 10, 
        padding: 5 
      }
    },
    style: { 
      fontSize: `${fontPx}px`, 
      "--plot-font-size": `${fontPx}px` 
    },

    marks: [
      Plot.line(adjustedData, {
        x: "wavelength",
        y: "reflectance",
        stroke: "sample",
        title: "sample",
        strokeWidth: 5
      }),
      Plot.dot(adjustedData, Plot.pointerX({
        x: "wavelength",
        y: "reflectance",
        fill: "sample",
        stroke: "white",
        marker: "circle",
        strokeWidth: 3,
        r: 5
      })),
      Plot.text(adjustedData, Plot.pointerX({
        px: "wavelength",
        py: "reflectance",
        dy: -20,
        frameAnchor: "top-left",
        fontVariant: "tabular-nums",
        fontSize: fontPx * 0.8,
        text: d => `${d.sample}   λ ${fmt(d.wavelength)} nm    ${fmtVal(d.reflectance)}`
      })),
      Plot.text(adjustedData, Plot.selectLast({
        x: "wavelength",
        y: "reflectance",
        z: "sample",
        text: "sample",
        textAnchor: "start",
        fontSize: fontPx * 0.9,
        dx: 3,
        clip: false
      }))
    ]
  });
  const swatches = p.querySelector('div[class*="-swatches-wrap"], div[class*="-swatches"], .plot-swatches');
  if (swatches) {
    swatches.style.fontSize = `${fontPx * 0.7}px`;   
  }
  return p;
}

```
::::
:::::