31:T421,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis); const axisLinear = svg .append("g") .style("opacity", 1) .call(yAxis, yLinear); const axisPower = svg .append("g") .style("opacity", 0) .call(yAxis, yPower, ",") .call(yTickPosition, yLinear); const path = svg .append("g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(sigmaInterfaces) .join("path") .style("mix-blend-mode", "multiply") .attr("d", line(yLinear)); return Object.assign(svg.node(), { update(y) { const t = svg.transition().duration(750); axisLinear.transition(t).style("opacity", y === yLinear ? 1 : 0) .call(yTickPosition, y); axisPower.transition(t).style("opacity", y === yPower ? 1 : 0) .call(yTickPosition, y); path.transition(t).attr("d", line(y)); } }); }32:T42e,// in percentages distrib = [ 7.18e+000, 6.00e+000, 5.50e+000, 5.00e+000, 4.50e+000, 4.00e+000, 3.80e+000, 3.60e+000, 3.40e+000, 3.20e+000, 3.00e+000, 2.90e+000, 2.80e+000, 2.70e+000, 2.60e+000, 2.50e+000, 2.40e+000, 2.30e+000, 2.20e+000, 2.10e+000, 2.00e+000, 1.90e+000, 1.80e+000, 1.70e+000, 1.60e+000, 1.50e+000, 1.40e+000, 1.30e+000, 1.20e+000, 1.10e+000, 1.00e+000, 9.50e-001, 9.00e-001, 8.50e-001, 8.00e-001, 7.50e-001, 7.00e-001, 6.50e-001, 6.00e-001, 5.50e-001, 5.00e-001, 4.50e-001, 4.00e-001, 3.50e-001, 3.00e-001, 2.70e-001, 2.30e-001, 2.00e-001, 1.50e-001, 1.30e-001, 1.20e-001, 1.10e-001, 1.00e-001, 1.00e-001, 9.00e-002, 9.00e-002, 9.00e-002, 9.00e-002, 9.00e-002, 8.00e-002, 8.00e-002, 8.00e-002, 8.00e-002, 7.00e-002, 7.00e-002, 7.00e-002, 6.00e-002, 6.00e-002, 6.00e-002, 6.00e-002, 6.00e-002, 5.00e-002, 5.00e-002, 5.00e-002, 5.00e-002, 4.00e-002, 4.00e-002, 4.00e-002, 3.00e-002, 3.00e-002 ]33:[{"id":"b7e113f34c86f6c3c902ca39068da06256e1bc1354a4380114b4e2fb5c62c023a1a408d5b4e6f10af9c445ac8b436d0ebb4f27943b22965c3dd88ce4a9313035","href":"https://static.observableusercontent.com/files/b7e113f34c86f6c3c902ca39068da06256e1bc1354a4380114b4e2fb5c62c023a1a408d5b4e6f10af9c445ac8b436d0ebb4f27943b22965c3dd88ce4a9313035","name":"interfaces@7.json","type":"application/json","lastModified":1585481748336.768,"size":241865}] 2f:{"title":"Sigma-coordinate grid bathymetry","cells":[{"id":0,"value":"md`# Sigma-coordinate grid bathymetry\nA [${tex`\\sigma`}-coordinate grid](https://en.wikipedia.org/wiki/Sigma_coordinate_system) is a terrain-following grid often used in ocean modelling and meteorology. The layers are specified as a percentage of the total depth. This example shows a non-uniform sigma-grid with decreasing layer thickness towards the bottom, allowing the bottom near-boundary layers to be resolved in higher resolution, for example in Reynolds-Averaged Navies-Stokes fluid simulations. This is useful for modelling [turbidity current](https://en.wikipedia.org/wiki/Turbidity_current)-seabed interaction.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"md`## Layer Percentages`","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"visualize(distrib)","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"yType","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"viewof yType = {\n const form = html``;\n form.onchange = () => form.dispatchEvent(new CustomEvent(\"input\")); // Safari\n form.oninput = event => {\n // if (event.isTrusted) clearTimeout(timeout), (form.onchange = null);\n form.value = form.radio.value;\n };\n form.value = form.radio.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"chart.update(yType === \"linear\" ? yLinear : yPower)","pinned":true,"hidden":false,"mode":"ojs"},{"id":571,"value":"line = y =>\n d3\n .line()\n .x(d => x(d.x))\n .y(d => y(d.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"x = d3\n .scaleLinear()\n .domain(xExtent)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"yLinear = d3\n .scaleLinear()\n .domain(yExtent)\n .nice()\n .range(yRange)","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"yPower = d3\n .scalePow()\n .exponent(25)\n .domain([700, 500])\n .range(yRange)","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"yTickPosition = (g, y) =>\n g\n .selectAll(\".tick\")\n .attr(\n \"transform\",\n d => `translate(0,${(isNaN(y(d)) ? yLinear(d) : y(d)) + 0.5})`\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"yAxis = (g, y, format) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 80, format))\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(\"depth\")\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"margin = ({ top: 20, right: 40, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"function visualize(ticks) {\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"xGridstep = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"sigmaInterfaces = {\n const data = await d3.json(url);\n\n return data.depths.map(sigma_interface =>\n sigma_interface.map((depth, i) => ({ x: i * 300, y: depth }))\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"lastSigmaInterface = sigmaInterfaces[sigmaInterfaces.length - 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"md`## Domains & Ranges`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"yPxPerMeter = height / 700 //px/meter","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`### Ranges`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"yRange = [height - margin.bottom, margin.top]","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`### Domain`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"xExtent = d3.extent(lastSigmaInterface, d => d.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"yExtent = [d3.max(lastSigmaInterface, d => d.y), 0] //d3.extent(lastSigmaInterface, d => d.y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"url = FileAttachment(\"interfaces@7.json\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\", \"d3-array\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}