plot = { const config = {width: 960, height: 400, margin: {left: 40, top: 50, right: 30, bottom: 10}}; const svg = d3.select(DOM.svg(config.width, config.height)); const x = d3.scaleBand() .domain(Array.from(nested.get(1).keys())) .range([config.margin.left, config.width - config.margin.right]) .paddingInner(0.05) .paddingOuter(0); const y = d3.scaleBand() .domain(Array.from(nested.keys())) .range([config.margin.top, config.height - config.margin.bottom]) .paddingInner(0.05) .paddingOuter(0); const dHours = data.filter(d => (d.hour > timeRange[0]) && (d.hour <= timeRange[1]) && (d[zone] < d.limit_low)).length; const percentHours = dHours/data.filter(d => (d.hour > timeRange[0]) && (d.hour <= timeRange[1])).length; svg.append("g") .attr("transform", `translate(${config.margin.left}, ${config.margin.top/3})`) .append("text") .attr("font-size", 14) .html(`Cold Discomfort Hours: ${dHours} (${d3.format(".0%")(percentHours)} of selected range)`); const legend = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "middle") g.selectAll("legends") .data([0, 6, 12, 18, 24, 30]) .join("rect") .attr("fill", d => d3.interpolatePuBu(d/30)) .attr("x", (d, i) => i * 22) .attr("y", 0) .attr("width", 20) .attr("height", 10); g.selectAll(".labels") .data(["0 Hours", ">30 Hours"]) .join("text") .attr("text-anchor", (d, i) => i === 0? "start": "end") .attr("x", (d, i) => -45 + i * 230) .attr("y", 0) .attr("dy", "0.8em") .text(String); } svg.append("g") .attr("transform", `translate(${config.width - (22*10)}, ${config.margin.top /3 - 10})`) .call(legend); d3.selectAll(".tooltip").remove(); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("border-radius", "3px") .style("pointer-events", "none") .style("display", "none") .style("position", "absolute") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "regular") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "white") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("color", "#333333") .style("line-height", "1.6") .style("pointer-events", "none"); const tipContent = (arr, h) => { let n = arr.filter(d => d[zone] < d.limit_low).length; let month = d3.timeFormat("%B")(arr[0].date); let f = d3.timeFormat("%-I%p"); return `${month} ${f(new Date(2018, 1, 1, h - 1))}-${f(new Date(2018, 1, 1, h))}
${n} Discomfort Hour${n === 1 ? "": "s"}`; } const monthFormat = d => d3.timeFormat("%b")(new Date(2018, d - 1, 1, 1)); const yAxis = g => g .attr("transform", `translate(${config.margin.left},0)`) .call(d3.axisLeft(y).tickFormat(monthFormat).tickPadding(15)) .call(g => g.selectAll(".tick line").remove()) .call(g => g.select(".domain").remove()); // ` // Third Quartile: ${_.round(d[2], 2)} ${yUnit}
// Median: ${_.round(d[1], 2)} ${yUnit}
// First Quartile: ${_.round(d[0], 2)} ${yUnit}
// < ${_.round((8760 - d[5]) / 8760 * 100, 2)}% of year` const month = svg.selectAll(".month") .data(Array.from(nested.keys())) .join("g") .attr("class", "month") .attr("transform", d => `translate(0, ${y(d)})`); month.each(function(d, i) { d3.select(this).selectAll(".hour") .data(Array.from(nested.get(d).keys())) .join("rect") .attr("class", "hour") .attr("x", hour => x(hour)) .attr("y", 0) .attr("height", y.bandwidth()) .attr("width", x.bandwidth()) .attr("fill", hour => grid_color(nested.get(d).get(hour), zone)) .on("mouseover", function(dd) { tooltip.style("display", null); tooltip.html(tipContent(nested.get(d).get(dd), dd)) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); const fill = d3.select(this).attr("fill"); d3.select(this) .attr("fill", chroma(fill).darken().hex()); }).on("mousemove", function(dd) { tooltip.style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }).on("mouseout", function(dd) { tooltip.style("display", "none"); d3.select(this) .attr("fill", hour => grid_color(nested.get(d).get(hour), zone)); }); }); svg.append("g") .call(yAxis); return svg.node(); }

Purpose-built for displays of data