2b:null 2c:["$","title",null,{"children":"Panel: real vs prediction | Yuanjie (Tukey) Tu | Observable"}] 31:T5c9,function colorLegend(container) { // Also explain we decided on these constants because they look nice const titlePadding = 0; // padding between title and entries const entrySpacing = 16; // spacing between legend entries const entryRadius = 5; // radius of legend entry marks const labelOffset = 6; // additional horizontal offset of text labels const baselineOffset = 4; // text baseline offset, depends on radius and font size const title = container .append("text") .text("Legend") .attr("x", 0) .attr("y", 0) .attr("fill", "black") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", "bold") .attr("font-size", "10px"); const entries = container .selectAll("g") .data(legendData) .join("g") // we want to organize the s in rows .attr( "transform", (d) => `translate(0, ${titlePadding + d.index * entrySpacing})` ); const line = entries.append("line") .attr("x1", entryRadius) .attr("x2", entryRadius * 4) .attr("y1", 0) .attr("y2", 0) .attr("stroke", (d) => d.index == 1? "gray" : "#E4572E") .attr("stroke-width", "2px") const labels = entries .append("text") .text((d) => d.label) .attr("x", 4 * entryRadius + labelOffset) // to the right of symbols .attr("y", baselineOffset) // alignment adjustment .attr("fill", "black") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "10px") }32:T429,allCharts = { const svg = d3.create("svg") .attr("width", width) .attr("height", height); const subPlot1 = svg.append("g") .attr("class", "persist"); const sublot2 = svg.append("g") .attr("transform", `translate(0, ${chartHeight})`) .attr("class", "avgmean"); const sublot3 = svg.append("g") .attr("transform", `translate(0, ${chartHeight * 2})`) .attr("class", "avgmedian"); const sublot4 = svg.append("g") .attr("transform", `translate(0, ${chartHeight * 3})`) .attr("class", "mlp"); const sublot5 = svg.append("g") .attr("transform", `translate(0, ${chartHeight * 4})`) .attr("class", "cnn"); const sublot6 = svg.append("g") .attr("transform", `translate(0, ${chartHeight * 5})`) .attr("class", "lstm"); const sublot7 = svg.append("g") .attr("transform", `translate(0, ${chartHeight * 6})`) .attr("class", "cnnlstm"); const sublot8 = svg.append("g") .attr("transform", `translate(0, ${chartHeight * 7})`) .attr("class", "convlstm"); return svg.node(); }33:T424,runchart = { const chartsContainer = d3.select(allCharts); if(lineArea == "real vs predict"){ chartsContainer.select("g.persist").call(subPlot1); chartsContainer.select("g.avgmean").call(subPlot2) chartsContainer.select("g.avgmedian").call(subPlot3) chartsContainer.select("g.mlp").call(subPlot4) chartsContainer.select("g.cnn").call(subPlot5) chartsContainer.select("g.lstm").call(subPlot6) chartsContainer.select("g.cnnlstm").call(subPlot7) chartsContainer.select("g.convlstm").call(subPlot8); } else{ chartsContainer.select("g.persist").call(subPlot1_area); chartsContainer.select("g.avgmean").call(subPlot2_area) chartsContainer.select("g.avgmedian").call(subPlot3_area) chartsContainer.select("g.mlp").call(subPlot4_area) chartsContainer.select("g.cnn").call(subPlot5_area) chartsContainer.select("g.lstm").call(subPlot6_area) chartsContainer.select("g.cnnlstm").call(subPlot7_area) chartsContainer.select("g.convlstm").call(subPlot8_area); } return chartsContainer.node() }34:Ta5a,subPlot1 = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataPersist, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain(d3.extent(dataAvgMedian, d => d.actual)).nice() .range([chartHeight - margins.bottom, margins.top]) // Add and position the legend; place in the upper right corner. const legend = svg .append("g") .attr("transform", `translate(${width - 80}, 15)`) .call((container) => colorLegend(container)) const lineActual = d3.line() .x(d => x(d.time)) .y(d => y(d.actual)) const linePrediction = d3.line() .x(d => x(d.time)) .y(d => y(d.predict)) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("d", lineActual(dataPersist)) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "#E4572E") .attr("stroke-width", 2) .attr("d", linePrediction(dataPersist)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("Naive") return svg.node(); }35:T987,subPlot2 = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataAvgMean, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain(d3.extent(dataAvgMedian, d => d.actual)).nice() .range([chartHeight - margins.bottom, margins.top]) const lineActual = d3.line() .x(d => x(d.time)) .y(d => y(d.actual)) const linePrediction = d3.line() .x(d => x(d.time)) .y(d => y(d.predict)) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("d", lineActual(dataAvgMean)) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "#E4572E") .attr("stroke-width", 2) .attr("d", linePrediction(dataAvgMean)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("Mean") return svg.node(); }36:T98f,subPlot3 = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataAvgMedian, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain(d3.extent(dataAvgMedian, d => d.actual)).nice() .range([chartHeight - margins.bottom, margins.top]) const lineActual = d3.line() .x(d => x(d.time)) .y(d => y(d.actual)) const linePrediction = d3.line() .x(d => x(d.time)) .y(d => y(d.predict)) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("d", lineActual(dataAvgMedian)) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "#E4572E") .attr("stroke-width", 2) .attr("d", linePrediction(dataAvgMedian)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("Median") return svg.node(); }37:T976,subPlot4 = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataMLP, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain(d3.extent(dataMLP, d => d.actual)).nice() .range([chartHeight - margins.bottom, margins.top]) const lineActual = d3.line() .x(d => x(d.time)) .y(d => y(d.actual)) const linePrediction = d3.line() .x(d => x(d.time)) .y(d => y(d.predict)) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("d", lineActual(dataMLP)) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "#E4572E") .attr("stroke-width", 2) .attr("d", linePrediction(dataMLP)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("MLP") return svg.node(); }38:T977,subPlot5 = svg => { svg.selectAll("*").remove() const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataLSTM, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain(d3.extent(dataLSTM, d => d.actual)).nice() .range([chartHeight - margins.bottom, margins.top]) const lineActual = d3.line() .x(d => x(d.time)) .y(d => y(d.actual)) const linePrediction = d3.line() .x(d => x(d.time)) .y(d => y(d.predict)) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("d", lineActual(dataLSTM)) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "#E4572E") .attr("stroke-width", 2) .attr("d", linePrediction(dataLSTM)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("CNN") return svg.node(); }39:T975,subPlot6 = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataCNN, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain(d3.extent(dataCNN, d => d.actual)).nice() .range([chartHeight - margins.bottom, margins.top]) const lineActual = d3.line() .x(d => x(d.time)) .y(d => y(d.actual)) const linePrediction = d3.line() .x(d => x(d.time)) .y(d => y(d.predict)) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("d", lineActual(dataCNN)) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "#E4572E") .attr("stroke-width", 2) .attr("d", linePrediction(dataCNN)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("LSTM") return svg.node(); }3a:T989,subPlot7 = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataCnnLSTM, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain(d3.extent(dataCnnLSTM, d => d.actual)).nice() .range([chartHeight - margins.bottom, margins.top]) const lineActual = d3.line() .x(d => x(d.time)) .y(d => y(d.actual)) const linePrediction = d3.line() .x(d => x(d.time)) .y(d => y(d.predict)) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("d", lineActual(dataCnnLSTM)) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "#E4572E") .attr("stroke-width", 2) .attr("d", linePrediction(dataCnnLSTM)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("CNN-LSTM") return svg.node(); }3b:T98d,subPlot8 = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataConvLSTM, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain(d3.extent(dataConvLSTM, d => d.actual)).nice() .range([chartHeight - margins.bottom, margins.top]) const lineActual = d3.line() .x(d => x(d.time)) .y(d => y(d.actual)) const linePrediction = d3.line() .x(d => x(d.time)) .y(d => y(d.predict)) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("d", lineActual(dataConvLSTM)) // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "#E4572E") .attr("stroke-width", 2) .attr("d", linePrediction(dataConvLSTM)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("ConvLSTM") return svg.node(); }3c:T9c6,subPlot1_area = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataPersist, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([-90, 50]).nice() .range([chartHeight - margins.bottom, margins.top]) // Declare the area generator. const areaAbove = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff >= 0) {return y(d.diff)} else {return y(0)} }) const areaBelow = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff < 0) {return y(d.diff)} else {return y(0)} }) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the area (under the axes) svg.append("path") .style("fill", "#f49f0a") .attr("d", areaAbove(dataPersist)) svg.append("path") .style("fill", "lightblue") .attr("d", areaBelow(dataPersist)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("Persist") return svg.node(); }3d:T9c3,subPlot2_area = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataAvgMean, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([-90, 50]).nice() .range([chartHeight - margins.bottom, margins.top]) // Declare the area generator. const areaAbove = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff >= 0) {return y(d.diff)} else {return y(0)} }) const areaBelow = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff < 0) {return y(d.diff)} else {return y(0)} }) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the area (under the axes) svg.append("path") .style("fill", "#f49f0a") .attr("d", areaAbove(dataAvgMean)) svg.append("path") .style("fill", "lightblue") .attr("d", areaBelow(dataAvgMean)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("Mean") return svg.node(); }3e:T9cb,subPlot3_area = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataAvgMedian, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([-90, 50]).nice() .range([chartHeight - margins.bottom, margins.top]) // Declare the area generator. const areaAbove = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff >= 0) {return y(d.diff)} else {return y(0)} }) const areaBelow = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff < 0) {return y(d.diff)} else {return y(0)} }) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the area (under the axes) svg.append("path") .style("fill", "#f49f0a") .attr("d", areaAbove(dataAvgMedian)) svg.append("path") .style("fill", "lightblue") .attr("d", areaBelow(dataAvgMedian)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("Median") return svg.node(); }3f:T9b6,subPlot4_area = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataMLP, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([-90, 50]).nice() .range([chartHeight - margins.bottom, margins.top]) // Declare the area generator. const areaAbove = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff >= 0) {return y(d.diff)} else {return y(0)} }) const areaBelow = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff < 0) {return y(d.diff)} else {return y(0)} }) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the area (under the axes) svg.append("path") .style("fill", "#f49f0a") .attr("d", areaAbove(dataMLP)) svg.append("path") .style("fill", "lightblue") .attr("d", areaBelow(dataMLP)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("MLP") return svg.node(); }40:T9b6,subPlot5_area = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataCNN, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([-90, 50]).nice() .range([chartHeight - margins.bottom, margins.top]) // Declare the area generator. const areaAbove = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff >= 0) {return y(d.diff)} else {return y(0)} }) const areaBelow = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff < 0) {return y(d.diff)} else {return y(0)} }) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the area (under the axes) svg.append("path") .style("fill", "#f49f0a") .attr("d", areaAbove(dataCNN)) svg.append("path") .style("fill", "lightblue") .attr("d", areaBelow(dataCNN)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("CNN") return svg.node(); }41:T9ba,subPlot6_area = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataLSTM, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([-90, 50]).nice() .range([chartHeight - margins.bottom, margins.top]) // Declare the area generator. const areaAbove = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff >= 0) {return y(d.diff)} else {return y(0)} }) const areaBelow = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff < 0) {return y(d.diff)} else {return y(0)} }) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the area (under the axes) svg.append("path") .style("fill", "#f49f0a") .attr("d", areaAbove(dataLSTM)) svg.append("path") .style("fill", "lightblue") .attr("d", areaBelow(dataLSTM)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("LSTM") return svg.node(); }42:T9c7,subPlot7_area = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataCnnLSTM, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([-90, 50]).nice() .range([chartHeight - margins.bottom, margins.top]) // Declare the area generator. const areaAbove = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff >= 0) {return y(d.diff)} else {return y(0)} }) const areaBelow = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff < 0) {return y(d.diff)} else {return y(0)} }) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the area (under the axes) svg.append("path") .style("fill", "#f49f0a") .attr("d", areaAbove(dataCnnLSTM)) svg.append("path") .style("fill", "lightblue") .attr("d", areaBelow(dataCnnLSTM)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("CNN-LSTM") return svg.node(); }43:T9ca,subPlot8_area = svg => { svg.selectAll("*").remove(); const margins = ({ top: 5, right: 10, bottom: 25, left: 130 }) // Declare the x (horizontal position) scale. const x = d3.scaleLinear(d3.extent(dataConvLSTM, d => d.time), [margins.left, width - margins.right]) // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([-90, 50]).nice() .range([chartHeight - margins.bottom, margins.top]) // Declare the area generator. const areaAbove = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff >= 0) {return y(d.diff)} else {return y(0)} }) const areaBelow = d3.area() .curve(d3.curveStep) .x(d => x(d.time)) .y0(y(0)) .y1(function(d) {if (d.diff < 0) {return y(d.diff)} else {return y(0)} }) svg.append("g") .attr("transform", `translate(0,${chartHeight - margins.bottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call((g) => g.append("text") .attr("x", width - margins.right) .attr("y", margins.bottom - 15) .attr("fill", "currentColor") .attr("text-anchor", "end") .attr("font-weight", "bold") .text("Time")) svg.append("g") .attr("transform", `translate(${margins.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", width - margins.right - margins.left) .attr("stroke-opacity", d => d === 0 ? 1 : 0.1)) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margins.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Energy (kWh)")) // Append a path for the area (under the axes) svg.append("path") .style("fill", "#f49f0a") .attr("d", areaAbove(dataConvLSTM)) svg.append("path") .style("fill", "lightblue") .attr("d", areaBelow(dataConvLSTM)) // Add a title const title = svg.append("g") .append("text") .attr("x", margins.left / 2) .attr("y", (chartHeight / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "15px") .text("ConvLSTM") return svg.node(); }44:[{"id":"01d985fe80e1cfbc48b0ddfcc074ed7c4fb421fecb3b439ac6887b1651fcbaa2d164ed6895a7cfa7f7f3b228affd5b5a396c1962ba6873ed75cac3acec9aac30","href":"https://static.observableusercontent.com/files/01d985fe80e1cfbc48b0ddfcc074ed7c4fb421fecb3b439ac6887b1651fcbaa2d164ed6895a7cfa7f7f3b228affd5b5a396c1962ba6873ed75cac3acec9aac30","name":"naive_averagemean_actual_predict@2.csv","type":"text/csv","lastModified":1715565027915.803,"size":22409},{"id":"15cc20c68894869c143e1be46b18007d20edde14ae12a82f76ac0c8a81228e72dea2872913409d6111d2e339e879104917f5ef4a5d65f64bf6eb9627667b5fcb","href":"https://static.observableusercontent.com/files/15cc20c68894869c143e1be46b18007d20edde14ae12a82f76ac0c8a81228e72dea2872913409d6111d2e339e879104917f5ef4a5d65f64bf6eb9627667b5fcb","name":"naive_averagemedian_actual_predict@2.csv","type":"text/csv","lastModified":1715565027915.803,"size":16357},{"id":"dd86eb21b1b6da91848f08592e3d199c72538d53c999ffe1f8858c21a5462322b7ee120eae528ea0d84302f5c750dd9875858350a40413f8c44bff31a60d75bc","href":"https://static.observableusercontent.com/files/dd86eb21b1b6da91848f08592e3d199c72538d53c999ffe1f8858c21a5462322b7ee120eae528ea0d84302f5c750dd9875858350a40413f8c44bff31a60d75bc","name":"LSTMactual_predict.csv","type":"text/csv","lastModified":1715565027915.803,"size":23049},{"id":"eb9b273089e8b281450eb112ea0e2368a96b9033807096fbf072d8448a5d20b83c6ab53812e5ed559f8642458c18b0a2c75a2d4d496adc3516367229a64da4e2","href":"https://static.observableusercontent.com/files/eb9b273089e8b281450eb112ea0e2368a96b9033807096fbf072d8448a5d20b83c6ab53812e5ed559f8642458c18b0a2c75a2d4d496adc3516367229a64da4e2","name":"CNNactual_predict@1.csv","type":"text/csv","lastModified":1715565027915.803,"size":22755},{"id":"614e92925a044e157ec3c2510c0e1848c8417921092a64d9b49f508a6c4dafc1c1c2e3e7e931431fd549ec31718b6358531e55584922146cab359b844259d67d","href":"https://static.observableusercontent.com/files/614e92925a044e157ec3c2510c0e1848c8417921092a64d9b49f508a6c4dafc1c1c2e3e7e931431fd549ec31718b6358531e55584922146cab359b844259d67d","name":"MLPactual_predict@3.csv","type":"text/csv","lastModified":1715565027915.803,"size":23010},{"id":"898afb864a5f2a53ec4743e10664066fbf9d74739c1c07028f185ee8f6e3112e536091eb58c75deaf1a1f2ad4d2d2c5a58a07077d2b9036f81f5c8eb833dbfcc","href":"https://static.observableusercontent.com/files/898afb864a5f2a53ec4743e10664066fbf9d74739c1c07028f185ee8f6e3112e536091eb58c75deaf1a1f2ad4d2d2c5a58a07077d2b9036f81f5c8eb833dbfcc","name":"CnnLSTMactual_predict.csv","type":"text/csv","lastModified":1715574068477.812,"size":23033},{"id":"76a4dc89f29583cbe18c677d99cb25f6aaa36878c575f5988bb2d76cef7d3a74c0c119945870eae36a5a20e464384c39a04347e0841a2294327241e35a969910","href":"https://static.observableusercontent.com/files/76a4dc89f29583cbe18c677d99cb25f6aaa36878c575f5988bb2d76cef7d3a74c0c119945870eae36a5a20e464384c39a04347e0841a2294327241e35a969910","name":"naive_persistactual_predict.csv","type":"text/csv","lastModified":1715585760256.45,"size":16372},{"id":"92ccc2ae53d8f2f99d48996edf5c9b3bbda3e54b4e20ceef766b12ff54fc608143bfd6444c622861726009772c8465f7b94168178d05a4e83f52188672bc65d8","href":"https://static.observableusercontent.com/files/92ccc2ae53d8f2f99d48996edf5c9b3bbda3e54b4e20ceef766b12ff54fc608143bfd6444c622861726009772c8465f7b94168178d05a4e83f52188672bc65d8","name":"ConvLSTMactual_predict.csv","type":"text/csv","lastModified":1715585778254.743,"size":23026}] 2f:{"id":"6a33482815d7b341","slug":null,"title":"Panel: real vs prediction","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-05-13T01:50:27.915Z","update_time":"$D2024-05-14T00:40:57.719Z","view_time":null,"first_public_time":"$D2024-05-13T01:50:27.915Z","has_unpublished_edits":null,"fork":{"id":"fd27c86f9048cab3","slug":null,"title":"Panel: loss functions","owner":{"id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/34bc1666f6489c9f64e21f0c1ce4779151877d75c3f3c3f065e58f6a9bd14f0e","tier":"starter_2024"},"version":353,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"450fe71eaac7001f","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/ea52f9066051a7ecd9e98037b8a1e1c0cf765011b054117f0758a83f8e870f29","tier":null}],"members":[{"type":"team","id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/34bc1666f6489c9f64e21f0c1ce4779151877d75c3f3c3f065e58f6a9bd14f0e","tier":"starter_2024","role":"editor"},{"type":"individual","id":"450fe71eaac7001f","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/ea52f9066051a7ecd9e98037b8a1e1c0cf765011b054117f0758a83f8e870f29","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"bbb057f70495aee2","slug":"ev-charging-demand-visualization-collection","title":"EV charging demand prediction","owner":{"id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu"}},"type":"notebook","body":{"title":"Panel: real vs prediction","cells":[{"id":0,"value":"# Panel: real vs prediction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":336,"value":"dataPersist = FileAttachment(\"naive_persistactual_predict.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$${textcolor(\"Add panning\", 'Red')} ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"dataAvgMean = FileAttachment(\"naive_averagemean_actual_predict@2.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"dataAvgMedian = FileAttachment(\"naive_averagemedian_actual_predict@2.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"dataLSTM = FileAttachment(\"LSTMactual_predict.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"dataCNN = FileAttachment(\"CNNactual_predict@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"dataMLP = FileAttachment(\"MLPactual_predict@3.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"dataCnnLSTM = FileAttachment(\"CnnLSTMactual_predict.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"dataConvLSTM = FileAttachment(\"ConvLSTMactual_predict.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 1500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"chartWidth = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"chartHeight = height / 8","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"legendData = [\n {index: 1, label: \"Real\"},\n {index: 2, label: \"Predicted\"}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"{\n const svg = d3.create('svg')\n .attr('width', 200)\n .attr('height', 110);\n \n const legend = svg.append('g')\n .attr('transform', 'translate(0, 10)')\n .call(colorLegend); // <-- our legend helper is invoked just like an axis generator\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"viewof lineArea = Inputs.radio([\"real vs predict\", \"difference chart\"], {value: \"real vs predict\", label: \"Chart type\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"margins = ({top: 40, right: 10, bottom: 50, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"$40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"$42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1","titling":"auto"}} 30:"$2f:body"