02 CPT DATA

---
title: "02 CPT DATA"
format: 
    html:
        fontsize: 0.95em
        mainfont: 'Fira Mono'
        echo: false
        code-tools: true
        page-layout: custom
        toc: false
        margin-left: 35px
        margin-right: 35px
---

```{ojs .hidden}
ojs_data_loca = FileAttachment('data-loca.csv').csv({typed: true})
ojs_data_scpt = FileAttachment('data-scpt.csv').csv({typed: true})
```

::: {.grid}

::: {.g-col-2}

## Controls

Control the appearance here.

```{ojs}
viewof lab = Inputs.toggle({label: "Labs ?:"})
viewof siz_dot = Inputs.range([0, 20], {value: 4, step: 1, label: "Size:"})
viewof col_dot = Inputs.color({label: "Color:", datalist: d3.schemeSet1})
```

Select one or several CPTs to show on the plots:

```{ojs}
// select location CPT
viewof filt_cpt = Inputs.select([null].concat(ojs_data_loca.map(d => d.LOCA_ID)), {multiple: 8, label: null, sort: true, unique: true})
ojs_data_loca_filt = ojs_data_loca.filter(function(func_unit_filt) {return filt_cpt.includes(func_unit_filt.LOCA_ID);})
ojs_data_scpt_filt = ojs_data_scpt.filter(function(func_unit_filt) {return filt_cpt.includes(func_unit_filt.LOCA_ID);})
```

Choose parameter to be plotted:

```{ojs}
viewof param_x = Inputs.select(["SCPT_RES", "SCPT_FRES", "SCPT_PWP2", "SCPT_QNET", "SCPT_CISB"], {label: "X-axis:", value: "SCPT_RES"})
```

Reduce `Opacity:`, check the `Smoothed ?:` option and play with the `Window:` value.

```{ojs}
viewof measured = Inputs.range([0.1, 1], {value: 1, step: 0.1, label: "Opacity:"})
viewof smoothed = Inputs.toggle({label: "Smoothed ?:"})
viewof k = Inputs.range([1, 250], {value: 1, step: 1, label: "Window:"})
```

:::

::: {.g-col-5}

## Plan view

Plan view of the zone.

```{ojs}
Plot.plot({
    style: {
        fontSize: 14,
        fontWeight: 450,
    },
    marginLeft: 75,
    marginRight: 35,
    marginTop: 35,
    marginBottom: 50,
    width: 650,
    height: 800,
    grid: true,
    inset: 15,
    x: {
        label: "Easting (m) →",
        labelOffset: 45,
        nice: true,
        ticks: 5
    },
    y: {
        label: "Northing (m) ↑",
        nice: true,
        ticks: 5
    },
    color: {legend: false},
    marks: [
        Plot.frame({stroke: "#000"}),
        // dots
        // CPT
        Plot.dot(ojs_data_loca, {x: "LOCA_NATE", y: "LOCA_NATN", symbol: "times", r: siz_dot, stroke: col_dot}),
        Plot.dot(ojs_data_loca_filt, {x: "LOCA_NATE", y: "LOCA_NATN", symbol: "times", r: 10, stroke: "LOCA_ID", strokeWidth: 5}),
        // labels
        lab ? Plot.text(ojs_data_loca_filt, {x: "LOCA_NATE", y: "LOCA_NATN", text: 'LOCA_ID', fill: 'black', stroke: 'white'}) : null
  ]
})
```

:::

::: {.g-col-5}

## Plots

Plots of CPT params.

```{ojs}
Plot.plot({
    style: {
        fontSize: 14,
        fontWeight: 450,
    },
    marginLeft: 75,
    marginRight: 35,
    marginTop: 35,
    marginBottom: 50,
    width: 650,
    height: 800,
    grid: true,
    inset: 15,
    x: {
        label: param_x,
        labelOffset: 45,
        nice: true
    },
    y: {
        label: "Depth (m)",
        nice: true,
        reverse: true
    },
    color: {legend: false},
    marks: [
        Plot.frame({stroke: "#000"}),
        // dots
        // CPT
        Plot.lineX(ojs_data_scpt_filt, {x: param_x, y: "SCPT_DPTH", z: "LOCA_ID", stroke: "LOCA_ID", strokeOpacity: measured}),
        smoothed ? Plot.lineX(ojs_data_scpt_filt, Plot.windowX({k: k, x: param_x, y: "SCPT_DPTH", z: "LOCA_ID", stroke: "LOCA_ID"})) : null
  ]
})
```

:::

:::

## End.