2f:T121b,{ const tooltip = new Tooltip(); d3.select('body').append('defs').append("linearGradient") .attr("id", "line-gradient") .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", y_scale_sm(10)) .attr("x2", 0) .attr("y2", y_scale_sm(50)) .selectAll("stop") .data([ {offset: "0%", color: "#a60d22"}, {offset: "50%", color: "#7c7c84"}, {offset: "100%", color: "#68895c"} ]) .enter().append("stop") .attr("offset", function(d) { return d.offset; }) .attr("stop-color", function(d) { return d.color; }); return htl.html` `}30:T5df,class Tooltip { constructor() { this._date = htl.svg``; this._vwc = htl.svg``; this._deltavwc = htl.svg``; this._raincat = htl.svg``; this._rain = htl.svg``; this._tempx = htl.svg`` this.node = htl.svg` ${this._date} ${this._vwc} ${this._deltavwc} ${this._rain} ${this._raincat} ${this._tempx} `; } show(d) { this.node.removeAttribute("display"); this.node.setAttribute("transform", `translate(${x_scale(d.date)},${20})`); this._date.textContent = formatDate(d.date); this._vwc.textContent = 'VWC: ' + formatVWC(d.VWC) + '%' this._deltavwc.textContent = 'Δ VWC: ' + formatVWC(d['Delta VWC']) + '%' this._deltavwc.style.fill = d['Delta VWC'] > 0 ? 'green':'red' this._rain.textContent = 'Rain (mm): ' + formatVWC(d['rain (mm) new']) // this._tempx.node.setAttribute('cy', y_scale_sm(d['VWC'])) this._tempx.setAttribute("cy", y_scale_sm(d['VWC']) + chart_sizes(20)-margin_charts.bottom); } hide() { this.node.setAttribute("display", "none"); } }31:T8e1,styles = html` `32:[{"id":"5bfe20a92fbbe8e34998eaaf426aace52b6aa782e33c5e205d2926d10d6d6c5749d69f837a3758c7ee4db26fe70bbed4d4defa5f0f070947b0ab00a5a3f2fd96","href":"https://static.observableusercontent.com/files/5bfe20a92fbbe8e34998eaaf426aace52b6aa782e33c5e205d2926d10d6d6c5749d69f837a3758c7ee4db26fe70bbed4d4defa5f0f070947b0ab00a5a3f2fd96","name":"validation_v4.json","type":"application/json","lastModified":1732857418362.376,"size":325716}] 2d:{"title":"Soil Moisture & Rainfall Visualization (Interactive)","cells":[{"id":0,"value":"# Soil Moisture & Rainfall Visualization (Interactive)\n\n- Visualize and see how filter performs on large samples\n- Implement JS equivalent of the filtering function\n- Play around appropriate settings","pinned":false,"hidden":false,"mode":"md"},{"id":1289,"value":" viewof deviceUid = groupedSelect({\n title: 'Select Device Uid',\n groups: [\n {\n label: 'Device Uid',\n options: ['D181200900000190','D181200900000598','D18123100000098B', 'D181231000002542','D1E1230700000237', 'D1E173570000094E']\n },\n ]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"viewof min_mm = Inputs.range([0, 20], {value: 6.5,label: \"Minimum mm\", step:0.25})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"viewof event = Inputs.toggle({label: \"Toggle Events\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"bisect = {\n const bisectDate = d3.bisector(d => d.date).center;\n return (data, date) => data[bisectDate(data, date)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"vwc_line = d3.line().curve(d3.curveLinear).x(d => x_scale(d.date)).y(d => y_scale_sm(d.vwc_mean_max))","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"rain_line = d3.line().curve(d3.curveLinear).x(d => x_scale(d.date)).y(d => y_scale_rain(d['rain (mm) new']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":981,"value":"delta_vwc_line = d3.line().curve(d3.curveCardinal).x(d => x_scale(d.date)).y(d => y_scale_vwc_delta(d['Delta VWC']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":570,"value":"chart_sizes = d3.scaleLinear().domain([100, 0]).range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":849,"value":"y_scale_event = d3.scaleBand().domain(['Irrigation', 'Rain']).range([chart_sizes(20)-chart_sizes(10)-margin_charts.bottom, margin_charts.top]).padding(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":983,"value":"y_scale_vwc_delta = d3.scaleLinear().domain([-50,50]).range([height-margin_charts.bottom-chart_sizes(80)-margin.bottom,margin_charts.top]) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"x_scale = d3.scaleUtc().domain(d3.extent(data, d => d.date)).range([margin.left+margin_charts.left, width - margin.right - margin_charts.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"y_scale_sm = d3.scaleLinear().domain(d3.extent(data, d=>d.vwc_mean_max)).range([ chart_sizes(60)-chart_sizes(20)-margin_charts.bottom,margin_charts.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":832,"value":"y_scale_rain = d3.scaleLinear().domain(d3.extent(data, d => d['rain (mm) new'])).range([ chart_sizes(80)-margin_charts.bottom-chart_sizes(60),margin_charts.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1021,"value":"xAxis_event = (g, scale = x_scale) => g\n .attr(\"transform\", `translate(0,${ chart_sizes(20)-chart_sizes(10)-margin_charts.bottom})`)\n .call(d3.axisBottom(scale).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":972,"value":"xAxis_rain = (g, scale = x_scale) => g\n .attr(\"transform\", `translate(0,${ chart_sizes(80)-chart_sizes(60)-margin_charts.bottom})`)\n .call(d3.axisBottom(scale).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"xAxis = (g, scale = x_scale) => g\n .attr(\"transform\", `translate(0,${ chart_sizes(60)-chart_sizes(20)-margin_charts.bottom})`)\n .call(d3.axisBottom(scale).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"yAxis_sm = (g, scale = y_scale_sm) => g\n .attr(\"transform\", `translate(${margin_charts.left+margin.left},${0})`)\n .call(d3.axisLeft(scale).ticks(5).tickFormat(x => `${x.toFixed(1)} %`))\n // .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":835,"value":"yAxis_rain = (g, scale = y_scale_rain) => g\n .attr(\"transform\", `translate(${margin_charts.left+margin.left},${0})`)\n .call(d3.axisLeft(scale).ticks(5).tickFormat(x => `${x} mm`))\n // .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":989,"value":"yAxis_delta_vwc = (g, scale = y_scale_vwc_delta) => g\n .attr(\"transform\", `translate(${margin_charts.left+margin.left},${0})`)\n .call(d3.axisLeft(scale).ticks(5).tickFormat(x => `${x} %`))\n // .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1029,"value":"yAxis_events = (g, scale = y_scale_event) => g\n .attr(\"transform\", `translate(${margin_charts.left+margin.left},${0})`)\n .call(d3.axisLeft(scale).ticks(2))\n // .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 750","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"margin = ({\"top\":20, \"left\": 100, \"right\":20, \"bottom\":20})","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"margin_charts = ({\"top\":20, \"left\": 20, \"right\":20, \"bottom\":20})","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"formatDate = d3.timeFormat(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1151,"value":"formatVWC = d3.format(\".2f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"findmin = (a, f) => {\n if (!a.length) throw new Error(\"Empty array has no maximum index.\")\n return a.reduce((I, x, i, arr) => f(x) < f(arr[I]) ? i : I, 0)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":882,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"import {slider} from \"@jashkenas/inputs\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"import { rangeSlider as rangeSlider } from '@mootari/range-slider'\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1311,"value":"data = validation_v1.filter(v => v.smp_uid == deviceUid).map(v => ({...v, date: new Date(v['true_date']), VWC: v['vwc_mean_max'], 'Delta VWC':v['vwc_delta'], 'Rain (mm)': v['rain (mm) new'], Irrigation:v['irrigation'], \n user_new_irrigation: v['User Irrigation'] == ((v['Rain (mm)'] > min_mm)? 1: 0) ? 0 : v['User Irrigation']}))\n .sort(function(a, b) {\n return a - b;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1302,"value":"validation_v1 = FileAttachment(\"validation_v4.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1277,"value":"import { groupedSelect } from \"@zzzev/grouped-dropdown-input\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}