30:T1c3e,plot = { const config = {width: 960, height: 400, margin: {left: 40, top: 70, right: 0, bottom: 20}}; const chart = {html} const svg = d3.select(DOM.svg(config.width, config.height)).property("value", []); const brush = d3.brush() .extent([[config.margin.left, config.margin.top],[config.width - config.margin.right, config.height - config.margin.bottom]]) .on("start brush end", brushed); const x = d3.scaleBand() .domain(Array.from(nested.keys())) .range([config.margin.left, config.width - config.margin.right]) .paddingInner(0) .paddingOuter(0); const y = d3.scaleBand() .domain(_.range(0, 24)) .range([config.height - config.margin.bottom, config.margin.top]) .paddingInner(0) .paddingOuter(0); const m = d3.scaleTime() .domain([new Date(2018, 0, 1, 0), new Date(2018, 11, 31, 23)]) .range([0, config.width - config.margin.left - config.margin.right]); /////////////////////////Comfort // const dComf = (data.filter(d => (d.hour > 7) && (d.hour <= 19) && (d[percentComfSelection] < d.comfLower90)).length) + (data.filter(d => (d.hour > 7) && (d.hour <= 19) && (d[percentComfSelection] > d.comfUpper90)).length); // const allComf = (data.filter(d => (d.hour > 0) && (d.hour <= 23) && (d[percentComfSelection] < d.comfLower90)).length) + (data.filter(d => (d.hour > 0) && (d.hour <= 23) && (d[percentComfSelection] > d.comfUpper90)).length); // const percent_allComf = 1 -(allComf/data.filter(d => (d.hour > 0) && (d.hour <= 23)).length); // const percent_dComf = 1 - (dComf/data.filter(d => (d.hour > 7) && (d.hour <= 19)).length); // /////////////////////////Hot Discomfort // const dComfH = (data.filter(d => (d.hour > 7) && (d.hour <= 19) && (d[percentComfSelection] > d.comfUpper90)).length); // const allComfH = (data.filter(d => (d.hour > 0) && (d.hour <= 23) && (d[percentComfSelection] > d.comfUpper90)).length); // const percent_allComfH = (allComfH/data.filter(d => (d.hour > 0) && (d.hour <= 23)).length); // const percent_dComfH = (dComfH/data.filter(d => (d.hour > 7) && (d.hour <= 19)).length); // /////////////////////////Cold Discomfort // const percent_allComfC = 1 - percent_allComf - percent_allComfH // const percent_dComfC = 1 - percent_dComf - percent_dComfH const legend = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "middle") g.selectAll("legends") .data([32, 30, 28, 26, 24, 22, 20, 18, 16]) //.data([35, 30, 25, 20, 15, 10]) .join("rect") .attr("fill", color)//, d => d3.interpolatePuBu(d/30)) .attr("x", (d, i) => -40 + i * 33) .attr("y", 3) .attr("width", 30) .attr("height", 15); g.selectAll(".labels") .data([">32C | 90F", "<16C | 61F"]) .join("text") .attr("text-anchor", (d, i) => i === 0? "start": "end") .attr("font-size", 11) .attr("x", (d, i) => -100 + i * 415) .attr("y", 5) .attr("dy", "0.8em") .text(String); } svg.append("g") .attr("transform", `translate(${config.width - config.margin.right}, ${config.margin.top /2 - 10})`) .append("text") .attr("text-anchor", "end") .attr("font-size", 14) // .html(`Comfort: ${d3.format(".0%")(percent_dComf)} // (${d3.format(".0%")(percent_allComf)}) // | // Hot Discomfort: ${d3.format(".0%")(percent_dComfH)} // (${d3.format(".0%")(percent_allComfH)}) // | // Cold Discomfort: ${d3.format(".0%")(percent_dComfC)} // (${d3.format(".0%")(percent_allComfC)}) // `); svg.append("g") .attr("transform", `translate(${config.width - 320}, ${config.margin.top /2 - 10})`) .call(legend) const hourFormat = d => d3.timeFormat("%-I %p")(new Date(2018, 1, 1, d)); const yAxis = g => g .attr("transform", `translate(${config.margin.left},0)`) .call(d3.axisLeft(y).tickFormat(hourFormat).tickPadding(5).tickValues(_.range(0, 24, 2))) .call(g => g.selectAll(".tick line").remove()) .call(g => g.select(".domain").remove()); const xAxis = g => g .attr("transform", `translate(${config.margin.left},${config.height - config.margin.bottom})`) .call(d3.axisBottom(m)) .call(g => g.selectAll(".tick:first-of-type").select("text").text("January")) .call(g => g.select(".domain").remove()); d3.select(".tooltip6").remove(); const tooltip = d3.select("body").append("div").call(createTooltip).classed("tooltip", false).attr("class", "tooltip6"); const tipContent = d => { const tempC = _.round(d[selection],1); const tempF = _.round(((d[selection] * 9/5) + 32), 1); return `Time: ${d3.timeFormat("%b %d | %I %p")(new Date(2018, d.month - 1, d.day, d.hour - 1))}
Temperature: ${tempC} °C | ${tempF} °F` } const day = svg.selectAll(".day") .data(Array.from(nested.keys())) .join("g") .attr("class", "day") .attr("transform", d => `translate(${x(d)}, 0)`); day.each(function(d, i) { d3.select(this).selectAll(".hour") .data(nested.get(d)) .join("rect") .attr("class", "hour") .attr("y", (hour, i) => y(i)) .attr("x", 0) .attr("height", y.bandwidth()) .attr("width", x.bandwidth()) .attr("fill", hour => hour[selection] < 28 ? "#ffffff": color(hour[selection])) .on("mouseover", function(d){ tooltip.style("display", null); d3.select(this) .attr("fill", "#000000"); tooltip.html(tipContent(d)) .style("left", d3.event.pageX + "px") .style("top", (d3.event.pageY - 30) + "px"); }) .on("mousemove", function(d) { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 30) + "px"); }) .on("mouseout", function(d) { d3.select(this) .attr("fill", color(d[selection])); tooltip.style("display", "none"); }); }); svg.append("g") .call(yAxis); svg.append("g") .call(xAxis); //svg.append("g").call(brush); function brushed() { let value = []; if (d3.event.selection) { let [[x0, y0],[x1, y1]] = d3.event.selection; value = Array.from(nested).filter(d => x0 <= x(d[0]) && x(d[0]) < x1) .map(d => d[1].filter((hour, i) => y0 <= y(i) && y(i) < y1)).flat(); // svg.property("value", value).dispatch("input"); mutable selected = value; } } function transition(option) { d3.selectAll(".hour") .attr("fill", d => color(d[option])); } // function transition(option) { // d3.selectAll(".hour") // .attr("fill", d => d[option] < 22 ? "#ffffff": color(d[option])); // } function update(option) { transition(option); } return Object.assign(svg.node(), {update}); } 31:[] 2e:{"title":"VPlots","cells":[{"id":596,"value":"md`# VPlots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"viewof date = html`October 16, 2019 - Energy Analysis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2196,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2705,"value":"viewof metric = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2718,"value":"percentComfSelection = {\n let select = selection.slice(0,19) + \"opT\";\n \n return select\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"plot.update(selection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2068,"value":"mutable selected = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"scaleType = {\n return metric.value === \"aComf\" ? \"binary\": \"gradient\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"color = d => {\n \n \n if (scaleType === \"gradient\") {\n let scale = d3.scaleLinear().domain(colorDomain).range([.6, 0]); \n return d3.interpolateRdYlBu(scale(d));\n }\n else {\n return d === 0 ? \"#000\": \"#fff\"; \n \n }\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3@5.9.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"data = {\n\n let data = (await d3.csv(`https://www.elementa.nyc/projects/50-church-st/data/LSSC_NV.csv`, d3.autoType))\n \n const formatDate = d => d3.timeParse(\"%m %d %H %Y\")(`${d.month.toString().padStart(2, \"0\")} ${d.day.toString().padStart(2, \"0\")} ${(d.hour - 1).toString().padStart(2, \"0\")} 2018`);\n \n const columns = data.columns;\n \n //data = data.map(d => ({...d, date: formatDate(d), oa: d.db}));\n //data = data.map(d => ({...d, date: formatDate(d), ${[selection.value]}}) \n return data;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1567,"value":"selection = {\n // let selection = zone + \"_\" + metric.value;\n let selection = \"o3_resT\";\n \n return selection\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"// nested = nest(data, d => d.month, d => d.hour);\n\nnested = {\n let chunks = _.chunk(data, 24);\n let map = new Map()\n\n chunks.map((d, i, arr) => {\n map.set(i, d);\n });\n return map;\n \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"colorDomain = [16, 32]","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2638,"value":"parse_date = d3.timeParse(\"%m %d %H\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2194,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 1)} kWh/m²/yr`;\n }\n else {\n return `${_.round(d * 3.412 / 10.76, 1)} kBtu/ft²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2235,"value":"formatEUI_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} kBtu/ft²/yr`;\n }\n else {\n return `${_.round(d / 3.412 * 10.76, 2)} kWh/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2552,"value":" import {createTooltip} from \"@jwperakis/tooltips\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"import {nest} from \"@mbostock/nested-groups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"import {input} from \"@marycourtland/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"html`