viewof file = Inputs.file({label: "CSV file", accept: ".csv", required: true})
data = file.csv({typed: true})
Inputs.table(data)
plot01 =Plot.plot({
width: 250,
height: 750,
x: {label: "CONE RESISTANCE, qc (MPa)"},
y: {label: "DEPTH, z (m)", reverse: true, domain: [0, 15]},
grid: true,
marks: [
Plot.frame(),
Plot.axisX({anchor: "top", labelAnchor: "center"}),
Plot.axisX({anchor: "bottom", fill: "red", label: null}),
Plot.axisY({anchor: "left", labelAnchor: "center", tickSpacing: 50}),
Plot.line(data, {x: "qc", y: "depth", z: "station_name", opacity: 0.25, strokeWidth: 2.5, tip: true}),
Plot.ruleY([10.87], {strokeDasharray: "1, 2"}),
Plot.text(data, Plot.selectMaxY({x: "qc", y: "depth", text: "depth", frameAnchor: "bottom-left", dy: 10, fill: "currentColor", stroke: "white", strokeWidth: 3}))
]
})
plot02 = Plot.plot({
width: 250,
height: 750,
marginLeft: 0,
x: {label: "SLEEVE FRICTION, fs (MPa)"},
y: {reverse: true, domain: [0, 15], label: null, axis: null},
grid: true,
marks: [
Plot.frame(),
Plot.axisX({anchor: "top", labelAnchor: "center"}),
Plot.axisX({anchor: "bottom", fill: "red", label: null}),
//Plot.axisY({label: null}),
Plot.gridY({tickSpacing: 50}),
Plot.line(data, {x: "fs", y: "depth", z: "station_name", opacity: 0.25, strokeWidth: 2.5}),
Plot.ruleY([10.87], {strokeDasharray: "1, 2"})
]
})
plot03 = Plot.plot({
width: 250,
height: 750,
marginLeft: 5,
marginRight: 5,
x: {label: "PORE PRESSURE, u2 (MPa)"},
y: {reverse: true, domain: [0, 15], label: null, axis: null},
grid: true,
marks: [
Plot.frame(),
Plot.axisX({anchor: "top", labelAnchor: "center"}),
Plot.axisX({anchor: "bottom", fill: "red", label: null}),
//Plot.axisY({label: null}),
Plot.gridY({tickSpacing: 50}),
Plot.line(data, {x: "u2", y: "depth", z: "station_name", opacity: 0.25, strokeWidth: 2.5}),
Plot.ruleY([10.87], {strokeDasharray: "1, 2"})
]
})
plot04 = Plot.plot({
width: 250,
height: 750,
marginLeft: 5,
marginRight: 5,
x: {label: "NORMALISED CONE RESISTANCE, Qtn (MPa)", type: "log", domain: [1e0, 1e3]},
y: {reverse: true, domain: [0, 15], label: null, axis: null},
grid: true,
marks: [
Plot.frame(),
Plot.axisX({anchor: "top", labelAnchor: "center"}),
Plot.axisX({anchor: "bottom", fill: "red", label: null}),
//Plot.axisY({label: null}),
Plot.gridY({tickSpacing: 50}),
Plot.line(data, {x: "Qtn", y: "depth", z: "station_name", opacity: 0.25, strokeWidth: 2.5}),
Plot.ruleY([10.87], {strokeDasharray: "1, 2"})
]
})
plot05 = Plot.plot({
//color: {legend: true, },
width: 125,
height: 750,
marginLeft: 5,
x: {label: "SBT (-)", axis: null},
y: {reverse: true, domain: [0, 15], label: null, axis: null},
grid: true,
marks: [
Plot.frame(),
Plot.axisX({anchor: "top", labelAnchor: "center"}),
Plot.axisX({anchor: "bottom", fill: "red", label: null}),
//Plot.axisY({label: null}),
Plot.gridY({tickSpacing: 50}),
Plot.ruleY([10.87], {strokeDasharray: "1, 2"}),
Plot.ruleY(data, {x: "Ic", y: "depth", stroke: "sbt_zone_short", strokeOpacity: 1})
]
})
Compose plots of ${tex`qc, fs, u2`} u<sub>2020</sub>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 0.5fr; column-gap: 0px; row-gap: 0px;">
${plot01}
${plot02}
${plot03}
${plot04}
${plot05}
</div>
import { funplot } from '@mbostock/funplot'
import { Text } from '@observablehq/inputs'
math = require('mathjs@9')
viewof f = {
let f = Text({ submit: true, label: tex`f(x):`, value: 'x^2' });
f.getElementsByTagName('label')[0].style.width = '40px';
return f;
}
plot = {
let f_compiled = math.compile(f);
return funplot(x => f_compiled.evaluate({ x: x }));
}
import { aq, op } from '@uwdata/arquero'
dt = aq.from(data)
dt.view()
dt
.orderby(aq.desc('phase', 'water_depth'))
.select('depth', 'qc', 'fs', 'phase', 'station_name', 'water_depth')
//.select(1, 2) // optional select method
.view(5)
dt
.filter(d => d.qc >= 10 & d.fs >= 0.025)
.view(5)
dt
.select(0, 1, 2, 3, 5, 7)
.derive({
qc_net: d => d.qc * 100 + d.u2 * 100,
fs_net: d => d.fs * 50
})
.view(5)
dt
.select(0, 1, 2, 3, 5, 7)
.groupby('phase', 'scope')
.rollup({
qc_m: d => op.mean(d.qc),
fs_m: d => op.mean(d.fs),
count: d => op.count()
})
.view()
viewof dt2 = dt // viewof needed to create the dt2 object
.groupby('phase')
.count()
.view()
dt
.select(0, 1, 2, 3, 5, 7)
.groupby('phase', 'scope')
.derive({
qc_mea_p: d => op.mean(d.qc),
qc_max_p: d => op.max(d.qc)
})
.view(5)
viewof dt3 = dt.select(0, 1, 2, 3, 4, 5, 6, 7).view(5)
dt3
.join_left(dt2)
.view(5)
Inputs.table(dt2)
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.
