3f:null 40:["$","title",null,{"children":"Buro Happold Engineering - Natural Ventilation Potential Report | Bing Wang | Observable"}] 46:Tabb,chart1 = { const container1 = html``; const svg = d3 .select(container1) .append("svg") .attr("viewBox", `0 0 ${width} ${height1}`); // create a new tooltip, const tooltip1 = new Tooltip1(); // function that sets the tooltip's datum when revealed function tooltipContents(d) { return `${valueLine(d)}`; } 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") .style("mix-blend-mode", "multiply") .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") .style("mix-blend-mode", "multiply") .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. // pass the current datum (if desired), // and a render function that returns an HTML string (required) tooltip1.display(a); }) .on("mouseout", () => { // hide the tooltip tooltip1.hide(); }); svg.append(() => tooltip1.node); return container1; }47:T89a,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)}`; } var rects=svg.selectAll("rect") .data(selectedData2.data,function(d){return d;}); // draw the chart with mouse event 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.hour, d.value);}) .attr("fill", function(d) {return getColorHourly(d.hour, d.value);}) .on("mouseover", (event, d) => { // reveal the tooltip. // pass the current datum (if desired), // and a render function that returns an HTML string (required) if(d.hour >= start && d.hour <= end) 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); }); svg.append("g") .call(xAxis2('Day')); svg.append("g") .call(yAxis2('Hour')); /* create the brush const brush = d3.brush(); svg.call(brush); */ // call legend svg.append("g") .call(legend2()); return container2; }48:T4b2,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"); } }49: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"; } } }4a:[{"id":"3d70f03152d6a18d1bac615cd5e9ea3bbdbf1ce7abe7f3e680fa1aefc3e9d04489e99081a6a9e95f8c823ce08a550d9168242530411783cdd48ae0472733ec0e","href":"https://static.observableusercontent.com/files/3d70f03152d6a18d1bac615cd5e9ea3bbdbf1ce7abe7f3e680fa1aefc3e9d04489e99081a6a9e95f8c823ce08a550d9168242530411783cdd48ae0472733ec0e","name":"Princeton_HourlyData@5.json","type":"application/json","lastModified":1626205838609.076,"size":8157471},{"id":"b9b3b9b7e7e7e50422a92606c5c2ae83dbb9e26ddbfff3c4060f4565573b8d36c0c9dad58a0dc893de8990360b0157090f57d704bae7d1cf2c6903c3cbfd8d1c","href":"https://static.observableusercontent.com/files/b9b3b9b7e7e7e50422a92606c5c2ae83dbb9e26ddbfff3c4060f4565573b8d36c0c9dad58a0dc893de8990360b0157090f57d704bae7d1cf2c6903c3cbfd8d1c","name":"AdaptiveComfort@1.png","type":"image/png","lastModified":1626205838609.076,"size":57087},{"id":"daf4fdabe10fc8f7979af36eefb541b0fdd87145ef808af8cbac1d2e9ef7eb06322bc5247bdd784cabbbc0083cbf9bf287f5b24bb652f648772ec88aeaa67100","href":"https://static.observableusercontent.com/files/daf4fdabe10fc8f7979af36eefb541b0fdd87145ef808af8cbac1d2e9ef7eb06322bc5247bdd784cabbbc0083cbf9bf287f5b24bb652f648772ec88aeaa67100","name":"Princeton_DailyData@5.json","type":"application/json","lastModified":1626205838609.076,"size":38691}] 44:{"id":"d9456a27a6723551","slug":"naturalventilation","title":"Buro Happold Engineering - Natural Ventilation Potential Report","thumbnail":"fc6f62f353cfaec6e1276afd98399af8950daeeca7d83f3af9059b81f983c12f","access_level":"public","create_time":"$D2021-07-13T19:50:38.609Z","update_time":"$D2021-07-15T01:43:52.968Z","view_time":null,"first_public_time":"$D2021-07-13T20:13:33.263Z","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":1558,"publish_version":null,"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"},{"type":"team","id":"c15cde14de9b558d","login":"bingwangus","name":"Bing Wang","avatar_url":"https://avatars-next.observableusercontent.com/8c962c7498ad22167c881d7d443780d59547c4972b3f55fc7accef6ae603e6db","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"89abf1e5e73aad00","slug":"report","title":"Report","owner":{"id":"c15cde14de9b558d","login":"bingwangus","name":"Bing Wang"}},"type":"notebook","body":{"titling":"auto","title":"Buro Happold Engineering - Natural Ventilation Potential Report","cells":[{"id":53,"value":"md`\n\n# Buro Happold Engineering - Natural Ventilation Potential Report\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 hours was calculated based on ASHRAE 55-2020 adaptive thermal comfort model and a relative humidity limit of 85%.\n* The indoor 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##### Prevailing Mean Outdoor Daily Air Temperature\n\n* Occupants perception of weather come from experience of past days. It can be calculated from a weighted series of daily average temperature from the last 7 days.\n* Then the prevailing mean outdoor daily air temperature can be translated into a neutral temperature band, which descripts a range of operative temperature that are acceptable to occupants under naturally ventilated condition.\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":"$46","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##### Thermal Comfort Condition\n\n* By comparing the indoor operative temperature with the neutral temperature band, a thermal comfort condition can be determined for each hour. \n* Then hourly data was overlap with relative humidity to obtain the overall thermal comfort condition. \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":"$47","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":"md`\n\n##### Summary\n\n* 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.\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## Appendix`","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":1382,"value":"function getColorHourly(h,v){\n if(h >= start && h <= end)\n return getColor(v);\n else\n return d3.rgb(220,220,220);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"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 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":1514,"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":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.top])","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.top])","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 = ({top: 0, right: 0, bottom1: 50, bottom2: 100, left: 50})","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.top + 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.top + 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.bottom1 / 2) // 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.top + (height1 - margin.top - margin.bottom1) / 2))\n .attr('y', - margin.left / 2) // 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":1508,"value":"legend2 = () => (g) => g\n .attr('transform', `translate(0,${height2 - margin.bottom2 * 0.5})`)\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.bottom2 / 2) // 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))\n // Add label\n .append('text')\n .attr('class', 'axis-label')\n .text(label)\n .attr('transform', 'rotate(-90)')\n .attr('x', - (margin.top + (height2 - margin.top - margin.bottom2) / 2))\n .attr('y', - margin.left / 2) // 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":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":744,"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":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":1503,"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":1523,"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":1463,"value":"md` ### References `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1546,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$49","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":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"},{"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"}],"files":"$W4a","stdlib":"1"}} 45:"$44:body"