36:null 37:["$","title",null,{"children":"Buro Happold Engineering - Annual Heatmap Example | Bing Wang | Observable"}] 3d:T95c,chart1 = { const container1 = html`

`; const svg = d3 .select(container1) .append("svg") .attr("viewBox", `0 0 ${width} ${height1}`); const tooltip1 = new Tooltip1(); svg.append("g") .selectAll("path") .data(areaAirData) .join("path") .attr("fill", "#EDEDEDCC") .attr("d", area); svg.append("g") .style("display", function(d) {return getVisiable(selectedData1.name);}) .selectAll("path") .data(areaNeutralData) .join("path") .attr("fill", "#ECF87FCC") .attr("d", area); const path = svg.append("g") .attr("fill", "none") .attr("stroke", "#4682B4CC") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(lineData.series.slice(0, 2)) .join("path") .style("mix-blend-mode", "multiply") .attr("d", d => line(d.values)); const path2 = svg.append("g") .attr("fill", "none") .attr("stroke", "#FF0000CC") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(lineData.series.slice(2, 3)) .join("path") .attr("d", d => line(d.values)); const path3 = svg.append("g") .attr("fill", "none") .attr("stroke", "#00FF00CC") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .style("display", function(d) {return getVisiable(selectedData1.name);}) .selectAll("path") .data(lineData.series.slice(3, 4)) .join("path") .attr("d", d => line(d.values)); svg.append("g") .call(xAxis1('Day')); svg.append("g") .call(yAxis1('Temperature (°F)')); svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(lineData.days) .join("rect") .attr("x", a => x1(a)) .attr("height", height1 - margin.bottom1) .attr("width", a => x1(a+1) - x1(a)) .on("mouseover", (event, a) => { // reveal the tooltip. tooltip1.display(a); }) .on("mouseout", () => { // hide the tooltip tooltip1.hide(); }); svg.append(() => tooltip1.node); return container1; }3e:T14ea,chart2 = { const container2 = html`

`; // create the container const svg = d3 .select(container2) .append("svg") .attr("viewBox", `0 0 ${width} ${height2}`); // create a new tooltip, const div = d3 .select(container2) .append("div") .classed("tooltip2", true); const tooltip2 = new Tooltip2(div); // function that sets the tooltip's datum when revealed function tooltipContents(datum) { const { day, hour, value } = datum; return `${dayName(day)}, ${timeName(hour)}, value: ${valueName(value)}`; } // draw heatmap with filter var rects = svg.selectAll("rect") .data(selectedData2.data,function(d){return d;}); var monthSelection = Array(12).fill(true); var daySelection = Array(24).fill(true); /* var daySelectionStart = Array(start).fill(false); var daySelectionEnd = Array(24-end-1).fill(false); var daySelectionOpen = Array(end-start+1).fill(true); var daySelection = daySelectionStart.concat(daySelectionOpen).concat(daySelectionEnd); */ var hourList = d3.range(24).map(x => timeName(x)); // draw summary text var hoursnumber = d3.sum(hourlyData[7].data, d => d.value == 1 && getfilter(d.day, d.hour)); var rationumber = d3.format(".0%")(d3.sum(hourlyData[7].data, d => d.value == 1 && getfilter(d.day, d.hour)) / d3.sum(hourlyData[7].data, d => getfilter(d.day, d.hour))); const textblock = text2("The total comfort hours during opening period is ", `${hoursnumber}`, ", about ", `${rationumber}`, " of total open hours."); var text = svg.append("text").call(textblock); // draw the chart with mouse event draw(); svg.append("g") .call(title2('Title')); svg.append("g") .call(xAxis2('Day')) .call(g => g.selectAll(".tick text").attr("color", "red")); svg.append("g") .call(yAxis2('Hour')) .call(g => g.selectAll(".tick text").attr("color", "red")); svg.append("g") .call(legend2()); svg.selectAll(".tick text") .style("cursor", "pointer") .on("click", doclick); function draw() { rects.enter().append("rect") .attr("x", function(d){return x2(d.day);}) .attr("y", function(d){return y2(d.hour);}) .attr("width", rectW) .attr("height", rectH) .attr('stroke', function(d) {return getColorHourly(d.day, d.hour, d.value);}) .attr("fill", function(d) {return getColorHourly(d.day, d.hour, d.value);}) .on("mouseover", (event, d) => { // reveal the tooltip if(getfilter(d.day, d.hour)) tooltip2.display(d, tooltipContents); }) .on("mouseout", () => { // hide the tooltip tooltip2.hide(); }) .on("mousemove", event => { // move the tooltip // passing the native browser event tooltip2.move(event); }); } function updatetext(a, b) { d3.select("#textpart") .attr("font-weight", 300) .text("The total comfort hours during opening period is ") .append("tspan") .attr("font-weight", 800) .text(a) .append("tspan") .attr("font-weight", 300) .text(", about ") .append("tspan") .attr("font-weight", 800) .text(b) .append("tspan") .attr("font-weight", 300) .text(" of total open hours."); } function doclick(d, i) { const color = d3.select(this).attr("color"); const text = d3.select(this).text(); switch (color) { case null: d3.select(this).attr("color", "red"); break; case "red": d3.select(this).attr("color", null); break; } findFilter(text, monthList, hourList); //event.currentTarget.value = monthSelection; //event.currentTarget.dispatchEvent(new CustomEvent("input")); draw(); hoursnumber = d3.sum(hourlyData[7].data, d => d.value == 1 && getfilter(d.day, d.hour)); rationumber = d3.format(".0%")(d3.sum(hourlyData[7].data, d => d.value == 1 && getfilter(d.day, d.hour)) / d3.sum(hourlyData[7].data, d => getfilter(d.day, d.hour))); updatetext(`${hoursnumber}`, `${rationumber}`); } function findFilter(text, _monthList, _hourList) { var i = _monthList.indexOf(text); var j = _hourList.indexOf(text); if (i >= 0 && j <= 0) { monthSelection[i] = (monthSelection[i]) == true ? false : true; } if (j >= 0 && i <= 0) { daySelection[j] = (daySelection[j]) == true ? false : true; } } function getColorHourly(d, h, v){ const b = getfilter(d, h); if (b) return getColor(v); else return d3.rgb(220,220,220); } function getfilter(d, h){ const m = monthCount(d); if (monthSelection[m] && daySelection[h]) return true; else return false; } return container2; }3f:T4b3,class Tooltip1 { constructor() { this.text = svg``; this.rect = svg``; this.node = svg` ${this.rect} ${this.text} `; } display(a) { this.rect.setAttribute("width", "0"); this.rect.setAttribute("x", "0"); this.rect.setAttribute("height", "0"); this.node.removeAttribute("display"); this.node.setAttribute("transform", `translate(${x1(a)},${y1(selectedData1.data.value[a-1])})`); const width = this.text.getBoundingClientRect().width + 4; const height = this.text.getBoundingClientRect().height + 4; const x = - width / 2; const y = -15 - this.text.getBoundingClientRect().height + (this.text.getBoundingClientRect().height - 16)/2 this.rect.setAttribute("width", `${width}`); this.rect.setAttribute("x", `${x}`); this.rect.setAttribute("height", `${height}`); this.rect.setAttribute("y", `${y}`); this.text.textContent = valueLine(a); } hide() { this.node.setAttribute("display", "none"); } }40:T50a,class Tooltip2 { constructor(selection) { if (!selection || !selection.size()) { throw "Requires a tooltip div element selection"; } this._selection = selection; } move(event) { if (!event) return; const margin = 20; const { clientX: x, clientY: y } = event; const { width, height } = this.selection.node().getBoundingClientRect(); const left = this.clamp( margin, x - width / 2, window.innerWidth - width - margin ); const top = window.innerHeight > y + margin + height ? y + margin : y - height - margin; this.selection.style("top", `${top}px`).style("left", `${left}px`); } display(datum, callback) { if (!callback || typeof callback !== "function") { throw "ToolTip.display requires a callback function that returns an HTML string"; } this.selection.style("display", "block").html(callback(datum)); } hide() { this.selection.style("display", "none").html(""); } clamp(min, d, max) { return Math.max(min, Math.min(max, d)); } get selection() { return this._selection; } set selection(sel) { if (sel && sel.size()) { this._selection = sel; } else { throw "selection must be a non-empty selected element"; } } }41:[{"id":"b9b3b9b7e7e7e50422a92606c5c2ae83dbb9e26ddbfff3c4060f4565573b8d36c0c9dad58a0dc893de8990360b0157090f57d704bae7d1cf2c6903c3cbfd8d1c","href":"https://static.observableusercontent.com/files/b9b3b9b7e7e7e50422a92606c5c2ae83dbb9e26ddbfff3c4060f4565573b8d36c0c9dad58a0dc893de8990360b0157090f57d704bae7d1cf2c6903c3cbfd8d1c","name":"AdaptiveComfort@1.png","type":"image/png","lastModified":1626306637531.944,"size":57087},{"id":"daf4fdabe10fc8f7979af36eefb541b0fdd87145ef808af8cbac1d2e9ef7eb06322bc5247bdd784cabbbc0083cbf9bf287f5b24bb652f648772ec88aeaa67100","href":"https://static.observableusercontent.com/files/daf4fdabe10fc8f7979af36eefb541b0fdd87145ef808af8cbac1d2e9ef7eb06322bc5247bdd784cabbbc0083cbf9bf287f5b24bb652f648772ec88aeaa67100","name":"Princeton_DailyData@5.json","type":"application/json","lastModified":1626306637531.944,"size":38691},{"id":"3d70f03152d6a18d1bac615cd5e9ea3bbdbf1ce7abe7f3e680fa1aefc3e9d04489e99081a6a9e95f8c823ce08a550d9168242530411783cdd48ae0472733ec0e","href":"https://static.observableusercontent.com/files/3d70f03152d6a18d1bac615cd5e9ea3bbdbf1ce7abe7f3e680fa1aefc3e9d04489e99081a6a9e95f8c823ce08a550d9168242530411783cdd48ae0472733ec0e","name":"Princeton_HourlyData@5.json","type":"application/json","lastModified":1626306637531.944,"size":8157471}] 3b:{"id":"037b9591fffd9376","slug":"buro-happold-engineering-annual-heatmap-example/2","title":"Buro Happold Engineering - Annual Heatmap Example","thumbnail":"fc6f62f353cfaec6e1276afd98399af8950daeeca7d83f3af9059b81f983c12f","access_level":"public","create_time":"$D2021-07-14T23:50:37.531Z","update_time":"$D2021-10-19T17:01:21.420Z","view_time":null,"first_public_time":"$D2021-07-15T01:38:03.505Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c15cde14de9b558d","login":"bingwangus","name":"Bing Wang","avatar_url":"https://avatars-next.observableusercontent.com/8c962c7498ad22167c881d7d443780d59547c4972b3f55fc7accef6ae603e6db","tier":"starter_2024","bio":"Senior Building Physicist","following":false},"version":2700,"publish_version":2700,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da9e1c3d7f9660a","login":"bingwangus","name":"Bing Wang","avatar_url":"https://avatars-next.observableusercontent.com/8c962c7498ad22167c881d7d443780d59547c4972b3f55fc7accef6ae603e6db","tier":null,"bio":"Senior Building Physicist","following":false}],"members":[{"type":"individual","id":"5da9e1c3d7f9660a","login":"bingwangus","name":"Bing Wang","avatar_url":"https://avatars-next.observableusercontent.com/8c962c7498ad22167c881d7d443780d59547c4972b3f55fc7accef6ae603e6db","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"9f96cf79c1cae763","slug":"template","title":"Template","owner":{"id":"c15cde14de9b558d","login":"bingwangus","name":"Bing Wang"}},"type":"notebook","body":{"titling":"auto","title":"Buro Happold Engineering - Annual Heatmap Example","cells":[{"id":53,"value":"md`\n\n# Buro Happold Engineering - Annual Heatmap Example\n\n##### Project Summary\n\n* This report illustrated the natural ventilation potential based on the climate data of Princeton. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"md`\n\n##### Note\n\n* The natural ventilation potential was calculated based on ASHRAE 55-2020 adaptive thermal comfort model.\n* The operative temperature was assumed equals to outdoor air temperature.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md`${await FileAttachment(\"AdaptiveComfort@1.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"md`\n\n##### Project Summary\n\n* This report illustrated the natural ventilation potential based on the climate data of Princeton. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"viewof selectedData1 = Select(datalist1, {label: \"Data Source\", format: x => x.name, value: datalist1.find(t => t.name === \"Prevailing Temperature\")})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1269,"value":"md`\n\n##### Project Summary\n\n* This report illustrated the natural ventilation potential based on the climate data of Princeton. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"viewof selectedData2 = Select(datalist2, {label: \"Data Source\", format: x => x.name, value: datalist2.find(t => t.name === \"Air Temperature\")})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2391,"value":"md`\n\n---\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"viewof start = Range([0, 23], {step: 1, label: \"Opening Time\",value: 0,description: \"Integers from 0 through 23\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"viewof end = Range([0, 23], {step: 1, label: \"Closing Time\",value: 23,description: \"Integers from 0 through 23\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"html`The total comfort hours during opening period is ${d3.sum(hourlyData[7].data, d => d.value == 1 && d.hour >= start && d.hour <= end)}, about ${d3.format(\".0%\")(d3.sum(hourlyData[7].data, d => d.value == 1 && d.hour >= start && d.hour <= end) / 365 / (end - start + 1))} of total open hours.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"{\n return legend({\n width: width,\n marginLeft: margin.left,\n marginRight: 10,\n ticks: 10,\n color: getColorLegend(selectedData2).color,\n title: getColorLegend(selectedData2).title,\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`\n---\n\n## Appendix\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md` ### Data `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"dailyData = FileAttachment(\"Princeton_DailyData@5.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"datalist1 = [\n JSON.parse(JSON.stringify(dailyData[2]).replace(\"prevailing\", \"Prevailing Temperature\")),\n JSON.parse(JSON.stringify(dailyData[3]).replace(\"neutral\", \"Neutral Temperature\")),\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"hourlyData = FileAttachment(\"Princeton_HourlyData@5.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"datalist2 = [\n JSON.parse(JSON.stringify(hourlyData[0]).replace(\"airTemp\", \"Air Temperature\")),\n JSON.parse(JSON.stringify(hourlyData[5]).replace(\"thermalComfort\", \"Adaptive Thermal Comfort Condition\")),\n JSON.parse(JSON.stringify(hourlyData[2]).replace(\"RH\", \"Relative Humidity\")),\n JSON.parse(JSON.stringify(hourlyData[7]).replace(\"thermalRHCondition\", \"Overall Thermal Comfort Condition\")),\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md` ### Colour `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"function getVisiable(d){\n if(d == \"Prevailing Temperature\")\n return \"none\";\n else\n return \"block\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"function getColor(v){\n var cScale = d3.scaleLinear().domain([selectedData2.style.min, selectedData2.style.max]).range([1, 0]);\n if (selectedData2.style.invert)\n cScale.range([1,0]);\n else\n cScale.range([0,1]);\n var scale = \"interpolate\" + selectedData2.style.color;\n return d3[scale](cScale(v));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"function interpolateReverse(t) {\n return d3[\"interpolate\" + selectedData2.style.color](1-t);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"function getColorLegend(d){\n var unit = \"\";\n switch (d.name) { \n case \"Air Temperature\":\n unit += \" (°F)\";\n break;\n case \"Relative Humidity\":\n unit += \" (%)\";\n break;\n }\n var title = d.name + unit;\n \n var color = d3.scaleSequential([d.style.min, d.style.max], interpolateReverse);\n switch (d.name) { \n case \"Adaptive Thermal Comfort Condition\":\n color = d3.scaleOrdinal([\"Cool\", \"Neutral\",\"Warm\"], [getColor(-1),getColor(0),getColor(1)]);\n break;\n case \"Overall Thermal Comfort Condition\":\n color = d3.scaleOrdinal([\"Uncomfortable\", \"Comfortable\"], [getColor(0),getColor(1)]);\n break;\n }\n \n return {color: color, title: title}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1507,"value":"function legendAnchor(){\n var anchor = \"center\";\n switch (selectedData2.name) { \n case \"Air Temperature\":\n anchor = \"end\";\n break;\n case \"Relative Humidity\":\n anchor = \"end\";\n break;\n }\n return anchor;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2351,"value":" function getfilter2(d, h, months, days){\n const m = monthCount(d);\n if (months[m] && days[h])\n return true;\n else\n return false;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"md` ### Line `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"//this does the sorting to plot multilines\nfunction SortLineData(t, a)\n{\n var container = [];\n for(var i = 0; i < t.length ; i++)\n {\n container.push({name: t[i].name, values: t[i].data.value});\n if (t[i].name == \"neutral\")\n {\n container.push({name: t[i].name + \"_up\", values: t[i].data.value.map(n => n + a)});\n container.push({name: t[i].name + \"_low\", values: t[i].data.value.map(n => n - a)});\n }\n }\n return {series: container, days: t[0].data.day};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"lineData = SortLineData(dailyData, 3.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"line = d3.line()\n .defined(d => !isNaN(d))\n .x((d, i) => x1(lineData.days[i]))\n .y(d => y1(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"md` ### Area `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"//this does the max min \nfunction SortArea(min, max)\n{\n var container = [];\n var series = [];\n for(var i = 0; i < min.day.length ; i++)\n {\n series.push({min:min.value[i], max:max.value[i], day: min.day[i]});\n }\n container.push(series);\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"areaAirData = SortArea(dailyData[0].data, dailyData[1].data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1227,"value":"//this does the band\nfunction SortNeutralArea(t, a)\n{\n var container = [];\n var series = [];\n for(var i = 0; i < t.day.length ; i++)\n {\n series.push({min:t.value[i] - a, max:t.value[i] + a, day: t.day[i]});\n }\n container.push(series);\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"areaNeutralData = SortNeutralArea(dailyData[3].data, 3.5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"//basically the boundary to shade\narea = d3.area()\n\t.x(d => x1(d.day))\n .y0(d => y1(d.min))\n .y1(d => y1(d.max))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md` ### Scales `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"x1 = d3.scaleLinear()\n .domain([1,366])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"y1 = d3.scaleLinear()\n .domain([d3.min(lineData.series, d => d3.min(d.values)), d3.max(lineData.series, d => d3.max(d.values))]).nice()\n .range([height1 - margin.bottom1, margin.top1]) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"x2 = d3.scaleLinear()\n .domain([1,366])\n .range([margin.left, width - margin.right - rectW])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"y2 = d3.scaleLinear()\n .domain([0, 23])\n .range([height2 - margin.bottom2 - rectH, margin.top2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md` ### Rectangle dimensions `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"margin = ({top1: 0, top2: 40, right: 0, bottom1: 50, bottom2: 150, left: 60, xaxisoffset: 30, yaxisoffset: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"rectW = 2.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"rectH = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"width = rectW * 365 + margin.left + margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"height1 = 300 + margin.top1 + margin.bottom1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height2 = rectH * 24 + margin.top2 + margin.bottom2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md` ### Axes `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"xAxis1 = (label) => (g) => g\n .attr('transform', `translate(0,${height1 - margin.bottom1 + 2})`)\n .call(d3.axisBottom(x1).tickValues(dayList).tickFormat((d, i) => monthName(dayList[i])))\n // Add label\n .append('text')\n .attr('class', 'axis-label')\n .text(label)\n .attr('x', margin.left + (width - margin.left - margin.right) / 2)\n .attr('y', margin.xaxisoffset) // Relative to the x axis.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"yAxis1 = (label) => (g) => g\n .attr('transform', `translate(${margin.left - 3}, 0)`)\n .call(d3.axisLeft(y1).tickValues(tempList))\n // Add label\n .append('text')\n .attr('class', 'axis-label')\n .text(label)\n .attr('transform', 'rotate(-90)')\n .attr('x', - (margin.top1 + (height1 - margin.top1 - margin.bottom1) / 2))\n .attr('y', - (margin.left - margin.yaxisoffset)) // Relative to the y axis.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1488,"value":"legend2 = () => (g) => g\n .attr('transform', `translate(0,${height2 - margin.bottom2 * 0.8})`)\n .append(() => legend({\n width: width,\n marginLeft: margin.left,\n marginRight: 2,\n ticks: 10,\n color: getColorLegend(selectedData2).color,\n title: getColorLegend(selectedData2).title,\n }))\n .selectAll(\".tick text\")\n .style(\"text-anchor\", legendAnchor())\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"xAxis2 = (label) => (g) => g\n .attr('transform', `translate(0,${height2 - margin.bottom2 + 2})`)\n .call(d3.axisBottom(x2).tickValues(dayList).tickFormat((d, i) => monthName(dayList[i])))\n // Add label\n .append('text')\n .attr('class', 'axis-label')\n .text(label)\n .attr('x', margin.left + (width - margin.left - margin.right) / 2)\n .attr('y', margin.xaxisoffset) // Relative to the x axis.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"yAxis2 = (label) => (g) => g\n .attr('transform', `translate(${margin.left - 3}, ${rectH * 0.5})`)\n .call(d3.axisLeft(y2).ticks(24).tickFormat(d => timeName(d)))\n // Add label\n .append('text')\n .attr('class', 'axis-label')\n .text(label)\n .attr('transform', 'rotate(-90)')\n .attr('x', - (margin.top2 + (height2 - margin.top2 - margin.bottom2) / 2))\n .attr('y', - (margin.left - margin.yaxisoffset)) // Relative to the y axis.\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2465,"value":"title2 = (label) => (g) => g\n .attr('transform', `translate(0,${margin.top2 / 2})`)\n // Add label\n .append('text')\n .attr('class', 'chart-title')\n .text(label)\n .attr('x', margin.left + (width - margin.left - margin.right) / 2)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2427,"value":"text2 = (part1, part2, part3, part4, part5) => (text) => text\n // Add label\n .attr(\"id\", \"textpart\")\n .attr('transform', `translate(0,${height2 - margin.bottom2 * 0.3})`)\n .attr('x', margin.left)\n .attr(\"text-anchor\", \"left\")\n .attr(\"font-weight\", 300)\n .text(part1)\n .append(\"tspan\")\n .attr(\"font-weight\", 800)\n .text(part2)\n .append(\"tspan\")\n .attr(\"font-weight\", 300)\n .text(part3)\n .append(\"tspan\")\n .attr(\"font-weight\", 800)\n .text(part4)\n .append(\"tspan\")\n .attr(\"font-weight\", 300)\n .text(part5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2182,"value":"monthList = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"dayList = [15,45,74,105,135,166,196,227,258,288,319,349];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"tempList = [5,15,25,35,45,55,65,75,85,95];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2231,"value":"function monthCount(day){\n const date = new Date(2021, 0, day);\n return date.getMonth();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"function monthName(day){\n const date = new Date(2021, 0, day);\n return monthList[date.getMonth()];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"function dayName(day){\n const date = new Date(2021, 0, day);\n return date.getDate() +' '+ monthList[date.getMonth()];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"function timeName(hour){\n if(hour == 0) return \"12am\";\n if(hour<12) return hour+\"am\";\n if(hour===12) return \"12pm\";\n if(hour>=12) return hour-12+\"pm\";\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"function valueName(value){\n if(typeof value == \"boolean\")\n {\n if(value)\n return \"Comfortable\";\n else\n return \"Uncomfortable\";\n }\n else\n return +(Math.round(value + \"e+1\") + \"e-1\");\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"function valueLine(d){\n const date = new Date(2021, 0, d);\n return date.getDate() +' '+ monthList[date.getMonth()] + ', value: ' + +(Math.round(selectedData1.data.value[d - 1] + \"e+1\") + \"e-1\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"md` ### References `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2197,"value":"bisect = {\n const bisectDate = d3.bisector(d => d.value).left;\n return (data, value) => {\n const i = bisectDate(data, value, 1);\n const a = data[i - 1], b = data[i];\n return value - a.value > b.value - value ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"import {ramp} from \"@mbostock/d3-color-schemes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"Inputs = require(\"@observablehq/inputs@0.7.17/dist/inputs.umd.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"Select = Inputs.Select","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"Range = Inputs.Range","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W41","stdlib":"1"}} 3c:"$3b:body"