2f:Tadf,rawdata = [ { DATE_TIME: "2018-10-31T23:20:00.000Z", VALUE1: 102, VALUE2: 118, INSPECTION: 1, STATE: 1, minuteTime: 20 }, { DATE_TIME: "2018-10-31T23:20:00.000Z", VALUE1: 110, VALUE2: 95, INSPECTION: 1, STATE: 0, minuteTime: 20 }, { DATE_TIME: "2018-10-31T23:40:00.000Z", VALUE1: 153, VALUE2: 117, INSPECTION: 1, STATE: 1, minuteTime: 40 }, { DATE_TIME: "2018-10-31T23:40:00.000Z", VALUE1: 125, VALUE2: 98, INSPECTION: 1, STATE: 0, minuteTime: 40 }, { DATE_TIME: "2018-11-01T00:00:00.000Z", VALUE1: 112, VALUE2: 117, INSPECTION: 1, STATE: 1, minuteTime: 60 }, { DATE_TIME: "2018-11-01T00:00:00.000Z", VALUE1: 120, VALUE2: 100, INSPECTION: 1, STATE: 0, minuteTime: 60 }, { DATE_TIME: "2018-11-01T03:20:00.000Z", VALUE1: 147, VALUE2: 108, INSPECTION: 1, STATE: 1, minuteTime: 260 }, { DATE_TIME: "2018-11-01T03:20:00.000Z", VALUE1: 130, VALUE2: 98, INSPECTION: 1, STATE: 0, minuteTime: 260 }, { DATE_TIME: "2018-11-01T06:30:00.000Z", VALUE1: 152, VALUE2: 111, INSPECTION: 1, STATE: 1, minuteTime: 450 }, { DATE_TIME: "2018-11-01T06:30:00.000Z", VALUE1: 140, VALUE2: 101, INSPECTION: 1, STATE: 0, minuteTime: 450 }, { DATE_TIME: "2018-11-01T08:00:00.000Z", VALUE1: 112, VALUE2: 101, INSPECTION: 1, STATE: 1, minuteTime: 540 }, { DATE_TIME: "2018-11-01T08:00:00.000Z", VALUE1: 120, VALUE2: 90, INSPECTION: 1, STATE: 0, minuteTime: 540 }, { DATE_TIME: "2018-11-01T11:00:00.000Z", VALUE1: 122, VALUE2: 100, INSPECTION: 1, STATE: 1, minuteTime: 720 }, { DATE_TIME: "2018-11-01T11:00:00.000Z", VALUE1: 130, VALUE2: 95, INSPECTION: 1, STATE: 0, minuteTime: 720 }, { DATE_TIME: "2018-11-01T15:00:00.000Z", VALUE1: 112, VALUE2: 101, INSPECTION: 1, STATE: 1, minuteTime: 960 }, { DATE_TIME: "2018-11-01T15:00:00.000Z", VALUE1: 125, VALUE2: 98, INSPECTION: 1, STATE: 0, minuteTime: 960 }, { DATE_TIME: "2018-11-01T17:20:00.000Z", VALUE1: 147, VALUE2: 108, INSPECTION: 1, STATE: 1, minuteTime: 1100 }, { DATE_TIME: "2018-11-01T17:20:00.000Z", VALUE1: 129, VALUE2: 102, INSPECTION: 1, STATE: 0, minuteTime: 1100 }, { DATE_TIME: "2018-11-01T20:59:00.000Z", VALUE1: 151, VALUE2: 102, INSPECTION: 1, STATE: 1, minuteTime: 1319 }, { DATE_TIME: "2018-11-01T20:59:00.000Z", VALUE1: 132, VALUE2: 90, INSPECTION: 1, STATE: 0, minuteTime: 1319 } ]30:Tb39,chart = { const w = d3.min([width, 600]); const h = w; const margin = 150; const innerRadius = w / 5; const outerRadius = w / 2 - margin; const xUtc = d3 .scaleUtc() .domain([minDateTime, maxDateTime]) .range([0, Math.PI * 2]); const y = d3 .scaleRadial() .domain([ d3.min(processedData, (d) => d.min), d3.max(processedData, (d) => d.max) ]) .range([innerRadius, outerRadius]); const positiveFill = d3 .scaleSequential(d3.interpolateRdBu) .domain(d3.extent(processedData, (d) => d.diff)); const arc = d3 .arc() .innerRadius((d) => y(d.min)) .outerRadius((d) => y(d.max)) .startAngle((d) => xUtc(d.dateTime)) .endAngle((d) => xUtc(d.nextDateTime)) .padAngle(0.01) .padRadius(innerRadius); const line = d3 .lineRadial() .curve(d3.curveLinearClosed) .angle((d) => xUtc(d.dateTime)) .radius((d) => y(d.v)); const svg = d3 .create("svg") .attr("viewBox", [-w / 2, -h / 2, w, h]) .attr("width", w) .attr("height", h) .attr("style", "max-width: 100%; height: auto;") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); // svg.append('g').selectAll().data(x.ticks()).join('g'). const render = (_state) => { console.log("rendering state", _state); let dataFiltered = data; if (_state !== "both") dataFiltered = data.filter(([k, v]) => k === Number(_state)); let dataFill = processedData.filter( (d) => _state === "both" || d.state === Number(_state) ); let dataLine = groupedData.filter( ([k]) => _state === "both" || k.state === Number(_state) ); const fills = svg .selectAll("path.fill") .data(dataFill) .join( (enter) => enter .append("path") .attr("class", "fill") .attr("fill", (d) => (d.diff > 0 ? "blue" : "red")) .attr("opacity", 0.5) .attr("d", arc), (update) => update .attr("fill", (d) => (d.diff > 0 ? "blue" : "red")) .attr("d", arc), (exit) => exit.remove() ); const lines = svg .selectAll("path.line") .data(dataLine, ([k, v]) => k.id) .join( (enter) => enter .append("path") .attr("class", "line") .attr("opacity", 0.5) .attr("stroke", ([k]) => d3.schemeCategory10[k.idx]) .attr("stroke-width", "1px") .attr("fill", "none") .attr("data-id", ([k]) => k.id) .attr("d", ([k, v]) => line(v)), (update) => update .attr("stroke", ([k]) => d3.schemeCategory10[k.idx]) .attr("d", ([k, v]) => line(v)), (exit) => exit.remove() ); }; render(mutable stateNow); return Object.assign(svg.node(), { render }); }31:[] 2d:{"title":"Radial Chart","cells":[{"id":0,"value":"# Radial Chart","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"parsedData = rawdata.map((d) => ({\n dateTime: new Date(d.DATE_TIME),\n v1: d.VALUE1,\n v2: d.VALUE2,\n state: d.STATE,\n min: d3.min([d.VALUE1, d.VALUE2]),\n max: d3.max([d.VALUE1, d.VALUE2]),\n diff: d.VALUE2 - d.VALUE1\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"groupedByDate = d3.group(parsedData, (d) => d.dateTime)","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"dates = Array.from(groupedByDate.keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"minDateTime = d3.min(parsedData, (d) => d.dateTime)","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"maxDateTime = new Date(minDateTime.getTime() + 1000 * 60 * 60 * 24) // basically 24h later","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"processedData = parsedData.map((d) => {\n const idx = dates.findIndex(\n (compareDate) => d.dateTime.getTime() === compareDate.getTime()\n );\n if (idx === -1) return { ...d, nextDateTime: maxDateTime };\n return { ...d, nextDateTime: dates[idx + 1] ?? maxDateTime };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"data = Array.from(d3.group(parsedData, (d) => d.state))","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"groupedData = {\n const a = parsedData\n .filter((d) => d.state === 0)\n .map((d) => ({ ...d, v: d.v1 }));\n const b = parsedData\n .filter((d) => d.state === 1)\n .map((d) => ({ ...d, v: d.v1 }));\n const c = parsedData\n .filter((d) => d.state === 0)\n .map((d) => ({ ...d, v: d.v2 }));\n const d = parsedData\n .filter((d) => d.state === 1)\n .map((d) => ({ ...d, v: d.v2 }));\n return [\n [{ state: 0, target: \"v1\", id: \"0-v1\", idx: 0 }, a],\n [{ state: 0, target: \"v2\", id: \"0-v2\", idx: 1 }, b],\n [{ state: 1, target: \"v1\", id: \"1-v1\", idx: 2 }, c],\n [{ state: 1, target: \"v2\", id: \"1-v2\", idx: 3 }, d]\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"mutable stateNow = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"{\n const h = htl.html`state`;\n h.addEventListener(\"change\", (ev) => {\n mutable stateNow = ev.target.value;\n chart.render(ev.target.value);\n });\n return h;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"{\n const xUtc = d3\n .scaleUtc()\n .domain([minDateTime, maxDateTime])\n .range([0, Math.PI * 2]);\n const y = d3\n .scaleRadial()\n .domain([\n d3.min(processedData, (d) => d.min),\n d3.max(processedData, (d) => d.max)\n ])\n .range([0, 100]);\n\n const positiveFill = d3\n .scaleSequential(d3.interpolateRdBu)\n .domain(d3.extent(processedData, (d) => d.diff));\n\n const line = d3\n .lineRadial()\n .curve(d3.curveLinearClosed)\n .angle((d) => xUtc(d.dateTime))\n .radius((d) => y(d.v));\n\n return line(groupedData[0][1]);\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}