27:null 28:["$","title",null,{"children":"Winter Stripes | inanimatedObjects | Observable"}] 2d:Ta9e,tempStripes_season = Plot.plot({ // title: `Temperatures at selected resorts for the ${selectedSeason} ski season`, width: width, height: 1000, marginLeft: 10, marginRight: 120, marginBottom: 40, color: { // type: "pow", type: "sequential", // scheme: "PuOr", scheme: "rainbow", // scheme: "PRGn", scheme: "BuYlRd", legend: true, domain: [-10, 76] }, facet: { data: filterBySeason, y: "resort", axis: true }, x: { round: true, nice: d3.utcWeek }, y: { // inset: 2, axis: false }, fy: { label: null, tickSize: 8 }, style: { fontFamily: "Rubik", fontWeight: 300, fontSize: 16, color: "cadetblue", color: "snow" // stroke: "cyan" // strokeWidth: 0.05 }, marks: [ // Plot.RuleY[0], Plot.gridX(filterBySeason, { x: "date", ticks: d3.utcMonth, stroke: "darkcyan", strokeWidth: 4, fillOpacity: 0.8, strokeOpacity: 0.05 }), Plot.barX(filterBySeason, { // marginLeft: 6, x: "date", interval: 1, interval: d3.utcDay, fill: tempPointF, fillOpacity: 0.98 // tip: true }), Plot.line(filterBySeason, { x: "date", y: "tempC", stroke: "snow", strokeWidth: 2 }), Plot.tip( filterBySeason, Plot.pointerX({ y: tempPointF, x: "date", // fill: "#ffffff", fill: "#293845", fillOpacity: 0.8, strokeOpacity: 0.5, fontSize: 18, stroke: true, title: (d) => `${d.date.toLocaleString(undefined, { month: "numeric", day: "numeric", year: "numeric", weekday: "short" })}\nHigh: ${d.tempmax.toLocaleString("de", { minimumFractionDigits: 0, maximumFractionDigits: 0 })} °F\nAvg: ${d.temp.toLocaleString("de", { minimumFractionDigits: 0, maximumFractionDigits: 0 })} °F\nLow: ${d.tempmin.toLocaleString("de", { minimumFractionDigits: 0, maximumFractionDigits: 0 })} °F` }) ) // Plot.frame({ fillOpacity: 0.1 }) // Plot.frame({ anchor: "bottom" }), // Plot.axisX({ // ticks: "year", // tickSize: 28, // tickPadding: -11, // tickFormat: " %Y", // textAnchor: "start" // }), // Plot.axisX({ // ticks: "month", // tickSize: 16, // tickPadding: -11, // tickFormat: " %b", // textAnchor: "start" // }), // Plot.gridX({ // ticks: "week", // stroke: "black", // strokeOpacity: 1, // insetBottom: -0.5 // }), ] })2e:T2f78,// https://github.com/analyzer2004/weathersankey // Copyright 2020 Eric Lo class WeatherChart { constructor(parent) { this._parent = parent; this._width = 1024; this._height = 768; this._leftMargin = 20; this._margin = { sankeyTop: 60, sankeyBottom: 25, temp: 15 }; this._iconSize = 50; this._tempHeight = 100; this._nodes = null; this._links = null; this._data = null; this._sort = 0; // 0: none, 1: clear to rain, 2: rain to clear this._unit = "°F"; this._highColor = "#ef476f"; this._lowColor = "#457b9d"; this._conditions = null; this._column = { date: "date", high: "high", low: "low", condition: "condition" }; } size(width, height) { this._width = width; this._height = height; return this; } icon(icon) { this._conditions = [ { id: "Clear", index: 0, color: "#fff3b0", icon: icon.clear }, { id: "Partially cloudy", index: 1, color: "#e7d8c9", icon: icon.cloudy }, { id: "Overcast", color: "#ddd", index: 2, icon: icon.overcast }, { id: "Rain", color: "#98c1d9", index: 3, icon: icon.rain }, { id: "Snow", color: "#c2dfe3", index: 4, icon: icon.snow } ]; return this; } column(column) { this._column = column; return this; } sort(sort) { this._sort = sort; return this; } unit(unit) { this._unit = unit; return this; } tempChartHeight(height) { this._tempHeight = height; return this; } render(data) { this._init(); this._process(data); this._drawSankey(); this._drawTempChart(); return this; } _init() { this._margin.sankeyTop = this._height / 650 * 60; this._iconSize = this._width / 1024 * 50; } _process(data) { const converted = data.map(d => { const date = d[this._column.date]; var cond = d[this._column.condition]; cond = (cond.startsWith("Rain") ? "Rain" : cond.startsWith("Snow") ? "Snow" : cond) return { date: date, day: new Date(date).getDate(), high: d[this._column.high], low: d[this._column.low], condition: cond, color: this._lookup(cond).color, value: 1 }; }); const ls = converted.map(d => ({ source: d.condition, target: d.date, value: 1 })); const conds = Array.from(new Set(converted.map(d => this._lookup(d.condition)))); if (this._sort === 1) // clear to rain conds.sort((a, b) => a.index - b.index); else if (this._sort === 2) // rain to clear conds.sort((a, b) => b.index - a.index); const ns = conds.concat(converted.map(d => ({ id: d.date, color: d.color }))); const { nodes, links } = this._sankey(ns, ls); this._nodes = nodes; this._links = links; this._data = converted; return this; } _drawTempChart() { var that = this; const x = d3.scalePoint() .domain(this._data.map(d => d.date)) .range([this._leftMargin, this._width]); const y = d3.scaleLinear() .domain(d3.extent(this._data.flatMap(d => [d.high, d.low])).reverse()) .range([0, this._tempHeight]); const top = this._height - this._tempHeight - this._margin.temp; const g = this._parent.append("g") .attr("opacity", 0.7) .attr("transform", `translate(0,${top})`) .call(g => g.append("rect") .attr("width", this._width).attr("height", this._tempHeight) .attr("opacity", 1).attr("fill", "white")) .datum(this._data) .call(g => drawLine(g, this._highColor, d => d.high)) .call(g => drawLine(g, this._lowColor, d => d.low)); const axis = g.append("g") .call(g => g.attr("transform", "translate(20, 0)") .call(d3.axisLeft(y).tickValues(y.domain())) .select(".domain").remove() ); this._drawTempIndicator(g); function drawLine(g, color, f) { g.append("path") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", 1.5) .attr("d", d => d3.line() .x(d => x(d.date)) .y(d => y(f(d)))(d)); } } _drawTempIndicator(g) { var that = this; const line = g.append("g") .attr("opacity", 0) .attr("font-size", "9pt") .attr("font-weight", "bold"); line.append("line") .attr("stroke", "#999") .attr("x1", 0).attr("y1", 0) .attr("x2", 0).attr("y2", this._tempHeight); const high = line.append("text") .attr("fill", this._highColor) .attr("dy", "-1em") .attr("transform", `translate(5,${this._tempHeight})`); const low = line.append("text") .attr("fill", this._lowColor) .attr("transform", `translate(5,${this._tempHeight})`); g.on("mouseenter", () => line.attr("opacity", 1)) .on("mousemove", (e, d) => moveTempLine(e, d)) .on("mouseleave", () => { line.attr("opacity", 0); dates.attr("fill", "#999").attr("font-weight", "normal"); }); const days = this._nodes.filter(d => d.depth === 1); const dates = this._parent.selectAll(".date"); function moveTempLine(e, d) { const converted = that._convertCoordinate(e, g), pos = converted.x; if (pos >= that._leftMargin) { const left = days[0].y0, right = days[days.length - 1].y1; const index = d3.bisect( d3.range(left, right, days[1].y0 - days[0].y0), pos - that._leftMargin ); const weather = that._data[index - 1]; high.text(`High: ${weather.high}${that._unit}`); low.text(`Low: ${weather.low}${that._unit}`); const hb = high.node().getBBox(), lb = low.node().getBBox(); const w = hb.width > lb.width ? hb.width : lb.width; const tx = pos + w > right ? -w : 5; high.attr("transform", `translate(${tx},${that._tempHeight})`); low.attr("transform", `translate(${tx},${that._tempHeight})`); line.attr("transform", `translate(${pos},0)`); dates .attr("fill", (d, i) => i === index - 1 ? "black" : "#999") .attr("font-weight", (d, i) => i === index - 1 ? "bold" : "normal"); } } return line; } _drawSankey() { var that = this; const g = this._parent.append("g") .attr("transform", `translate(${this._leftMargin},${this._margin.sankeyTop})`); const nodes = g.append("g") .selectAll("g") .data(this._nodes) .join("g") .attr("opacity", 1) .attr("fill", d => d.color) .attr("transform", d => `translate(${d.y0},${d.x0})`) .call(g => g.append("rect").attr("width", d => d.y1 - d.y0).attr("height", d => d.x1 - d.x0)) .on("mouseover", (e, d) => highlight(e, d)) .on("mouseout", (e, d) => restore(e, d, true)); this._addCondition(nodes); this._addDate(nodes); const links = g.append("g") .attr("fill", "none") .selectAll("g") .data(this._links) .join("g") .append("path") .attr("stroke-opacity", 0.5) .attr("d", this._sankeyLinkVertical()) .attr("stroke", d => d.source.color) .attr("stroke-width", d => Math.max(1, d.width)); function highlight(e, d, restore) { links.filter(l => l.source !== d && l.target !== d) .transition().duration(500) .attr("stroke-opacity", restore ? 0.5 : 0.2); nodes.transition().duration(500) .attr("opacity", n => restore || linkedNodes(d).some(ln => n === ln) ? 1 : 0.2); } function restore(e, d) { highlight(e, d, true); } function linkedNodes(n) { return Array.from(new Set(that._links .flatMap(d => d.source === n || d.target === n ? [d.source, d.target] : null) .filter(d => d !== null) )); } } _addCondition(nodes) { nodes.filter(d => d.depth === 0) .call(g => g.append("image") .attr("width", this._iconSize) .attr("height", this._iconSize) .attr("opacity", 0.4) .attr("href", d => this._lookup(d.id).icon) .attr("transform", `translate(5,-${this._margin.sankeyTop})`)) .call(g => g.append("line") .attr("stroke", "#999") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "3,3") .attr("x1", 1).attr("x2", 1) .attr("y1", 0).attr("y2", -this._margin.sankeyTop)) .call(g => g.append("text") .attr("class", "days") .attr("fill", d => d3.color(d.color).darker(0.3)) .attr("text-anchor", "end") .attr("transform", d => `translate(${d.y1 - d.y0}, -2)`) .text(d => d.value)); } _addDate(nodes) { nodes.filter(d => d.depth === 1) .append("text") .attr("class", "date") .attr("fill", "#999") .attr("text-anchor", "middle") .attr("transform", d => `translate(${(d.y1 - d.y0) / 2},${this._margin.sankeyBottom})`) .text(d => (new Date(d.id)).getDate()); } _sankey(nodes, links) { const sankeyHeight = this._height - this._tempHeight - this._margin.sankeyTop - this._margin.sankeyBottom - this._margin.temp; return d3.sankey() .nodeId(d => d.id) .nodeWidth(10) .nodePadding(10) .nodeSort(null) .size([sankeyHeight, this._width - this._leftMargin])({ nodes: nodes.map(d => Object.assign({}, d)), links: links.map(d => Object.assign({}, d)) }); } _getNodeColor(d) { if (d.depth === 0) return this._lookup(d.id).color; else if (d.depth === 1) { const day = this._data.find(_ => _.date === d.id); if (day) return this._lookup(day.condition).color; } } _lookup(condId) { return this._conditions.find(d => d.id === condId); } _sankeyLinkVertical() { return d3.linkVertical() .source(verticalSource) .target(verticalTarget); function verticalSource(d) { return [d.y0, d.source.x1]; } function verticalTarget(d) { return [d.y1, d.target.x0]; } } // Utilities // _getSVG() { let curr = this._parent.node(); while (curr && curr.tagName !== "svg") curr = curr.parentElement; return curr; } _convertCoordinate(e, g) { const svg = this._getSVG(); if (svg) { // convert to SVG coordinates const p = svg.createSVGPoint() p.x = e.clientX; p.y = e.clientY; return p.matrixTransform(g.node().getScreenCTM().inverse()); } else { throw "Unable to find SVG element"; } } }2f:T58c8,// https://github.com/analyzer2004/weatherwheel // Copyright 2020 Eric Lo class WeatherWheel { constructor(container) { this._container = container; this._g = null; this._year = 0; this._months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; this._condColors = [ { id: "Clear", color: "#fff3b0", icon: "" }, { id: "Partially_cloudy", color: "#e7d8c9", icon: "" }, { id: "Overcast", color: "#ddd", icon: "" }, { id: "Rain", color: "#98c1d9", icon: "" }, { id: "Snow", color: "#c2dfe3", icon: "" } ]; this._colors = { low: "#118ab2", // blue mid: "#ffd166", // yellow high: "#ef476f", // red avg: "#006d77", // greenish precipitation: "#8ecae6", // blue precline: "#0077b6", humidity: "#ddd" // gray }; this._width = 640; this._height = 640; this._half = { width: 0, height: 0 }; this._radius = { inner: 125, outer: 0, max: 0, bubble: 50, label: 15 }; this._fontSize = { info: 10, center: 24, month: 9, mark: 8, tick: 8 }; this._data = null; this._chartData = null; this._field = { date: "Date time", low: "Minimum Temperature", high: "Maximum Temperature", avg: "Temperature", precipitation: "Precipitation", humidity: "Relative Humidity", condition: "Conditions" }; this._x = null; // date scale this._y = null; // temperature scale this._b = null; // bubble radius scale this._h = null; // humidity scale this._hc = null; // humidity color scale this._dayRadian = 0; // one-day radian this._tempUnit = "°F"; this._precUnit = "in"; this._currMonth = 0; this._yearStat = true; this._highlight = null; this._statistics = null; this._dailyInfo = null; this._texts = { icon: null, date: null, high: null, low: null, avg: null, prec: null, humidity: null }; this._onhover = null; this._f = true; this._uniqueId = new String(Date.now() * Math.random()).replace(".", ""); } size(_) { return arguments.length ? ((this._width = _[0]), (this._height = _[1]), this) : [this._width, this._height]; } months(_) { return arguments.length ? ((this._months = _), this) : this._months; } field(_) { return arguments.length ? ((this._field = _), this) : this._field; } icon(_) { if (arguments.length) { this._condColors[0].icon = _.clear; this._condColors[1].icon = _.cloudy; this._condColors[2].icon = _.overcast; this._condColors[3].icon = _.rain; this._condColors[4].icon = _.snow; return this; } else { return this._condColors.map((d) => d.icon); } } temperatureUnit(_) { return arguments.length ? ((this._tempUnit = _), this) : this._tempUnit; } precipitationUnit(_) { return arguments.length ? ((this._precUnit = _), this) : this._precUnit; } data(_) { return arguments.length ? ((this._data = _), this) : this._data; } onhover(_) { return arguments.length ? ((this._onhover = _), this) : this._onhover; } render() { this._init(); this._process(); this._g = this._container.append("g"); this._initGradients(); this._initDynamicParts(); this._renderMainWheel(); this._showStatistics(this._chartData, this._year); return this; } _init() { const r = this._radius; r.max = Math.min(this._width, this._height) / 2; r.inner = r.max * 0.28; r.bubble = r.max * 0.12; r.outer = r.max - r.bubble * 2 - r.label; const fs = d3.scaleLinear().domain([4, 1024]).range([0, 28]); this._fontSize.info = fs(r.max); fs.range([8, 36]); this._fontSize.center = fs(r.max); fs.range([4, 18]); this._fontSize.month = this._fontSize.mark = this._fontSize.tick = fs(r.max); this._dayRadian = (2 * Math.PI) / this._data.length + Math.PI; this._half = { width: this._width / 2, height: this._height / 2 }; } _process() { let getIndex = (cond) => { for (let i = 0; i < this._condColors.length; i++) { const c = this._condColors[i]; if (c.id === cond) return i; } return -1; }; const lows = [], highs = [], precs = [], humis = []; const field = this._field; this._chartData = this._data.map((d) => { const date = new Date(d[field.date]); var cond = d[field.condition]; cond = ( cond.startsWith("Rain") ? "Rain" : cond.startsWith("Snow") ? "Snow" : cond ).replaceAll(" ", "_"); const datum = { dateStr: d[field.date], date: date, month: date.getMonth(), low: d[field.low], high: d[field.high], avg: d[field.avg], precipitation: d[field.precipitation], humidity: d[field.humidity], conditionIndex: getIndex(cond), condition: cond }; lows.push(datum.low); highs.push(datum.high); precs.push(datum.precipitation); humis.push(datum.humidity); return datum; }); this._year = this._chartData[0].date.getFullYear(); this._initScales(lows, highs, precs, humis); } _initScales(lows, highs, precs, humis) { const d = this._chartData, r = this._radius; this._x = d3 .scaleTime() .domain([d[0].date, d[d.length - 1].date]) .range([0, 2 * Math.PI - (2 * Math.PI) / d.length]); // whole circle - last day this._y = d3 .scaleRadial() .domain([d3.min(lows), d3.max(highs)]) .nice() .range([r.inner, r.outer]); this._b = d3.scaleLinear().domain(d3.extent(precs)).range([0, r.bubble]); const hext = d3.extent(humis); this._h = d3 .scaleLinear() .domain(hext) .range([r.outer, r.outer + r.bubble * 0.75]); this._hc = d3.scaleLinear().domain(hext).range(["#fefefe", "#dedede"]); } _initGradients() { const r = this._radius, c = this._colors; this._g .append("linearGradient") .attr("id", `line_${this._uniqueId}`) .attr("x1", "100%") .attr("x2", "100%") .attr("y1", r.outer) .attr("y2", r.inner) .attr("gradientUnits", "userSpaceOnUse") .call((g) => g.append("stop").attr("stop-color", c.high).attr("offset", 0) ) .call((g) => g.append("stop").attr("stop-color", c.mid).attr("offset", 0.5) ) .call((g) => g.append("stop").attr("stop-color", c.low).attr("offset", 1) ); this._condColors.forEach((d) => this._g .append("linearGradient") .attr("id", `grad${d.id}_${this._uniqueId}`) .attr("x1", "100%") .attr("x2", "100%") .attr("y1", r.inner) .attr("y2", r.outer) .attr("gradientUnits", "userSpaceOnUse") .call((g) => g .append("stop") .attr("stop-color", d.color) .attr("stop-opacity", 0) .attr("offset", 0) ) .call((g) => g .append("stop") .attr("stop-color", d.color) .attr("stop-opacity", 0.25) .attr("offset", 0.33) ) .call((g) => g .append("stop") .attr("stop-color", d.color) .attr("stop-opacity", 0.5) .attr("offset", 0.66) ) .call((g) => g .append("stop") .attr("stop-color", d.color) .attr("stop-opacity", 0.0) .attr("offset", 1) ) ); } _initDynamicParts() { const r = this._radius, half = this._half; this._highlight = this._g .append("g") .attr("opacity", 0) .call((g) => g .append("path") .attr("class", "highlight") .attr("opacity", 0.3) .attr("fill", "#999") .attr("d", (d) => this._line(r.inner, r.max - r.label)) ); this._statistics = this._g .append("g") .attr("text-anchor", "middle") .attr( "transform", `translate(${half.width - r.inner - half.width},${ half.height - r.inner - half.height })` ) .call((g) => g .append("circle") .attr("fill", "white") .attr("opacity", 0) .attr("cx", r.inner) .attr("cy", r.inner) .attr("r", r.inner) ) .call((g) => g .append("text") .attr("class", "label") .attr("font-size", this._fontSize.center) .attr("fill", "#aaa") .attr("transform", `translate(${r.inner},${r.inner})`) .text(this._year) ) .on("click", () => { this._yearStat = !this._yearStat; if (this._yearStat) this._showStatistics(this._chartData, this._year); else this._showStatistics( this._getMonthData(this._currMonth), this._months[this._currMonth] ); }); const t = this._texts, c = this._colors; this._dailyInfo = this._g .append("g") .style("visibility", "hidden") .attr("font-size", this._fontSize.info + "pt") .call( (g) => (t.icon = g .append("image") .attr("width", r.inner / 2) .attr("opacity", 0.35) .attr("transform", `translate(${-r.inner / 1.3},${-r.inner / 4})`)) ) .call((g) => g .append("g") .attr("transform", `translate(0,${-r.inner / 4})`) .call( (g) => (t.date = g.append("text").attr("fill", "#aaa").text("Date: ")) ) .call( (g) => (t.high = g .append("text") .attr("y", "1em") .attr("fill", c.high) .text("High: ")) ) .call( (g) => (t.low = g .append("text") .attr("y", "2em") .attr("fill", c.low) .text("Low: ")) ) .call( (g) => (t.avg = g .append("text") .attr("y", "3em") .attr("fill", c.avg) .text("Avg: ")) ) .call( (g) => (t.prec = g .append("text") .attr("y", "4em") .attr("fill", c.precipitation) .text("Prec.: ")) ) .call( (g) => (t.humidity = g .append("text") .attr("y", "5em") .attr("fill", c.precipitation) .text("Humidity: ")) ) ); } _renderMainWheel() { this._renderWheelContent(); this._renderAxis(); this._renderMarks(); this._renderOverlay(); this._renderMonthLabels(); } _renderWheelContent() { const r = this._radius, c = this._colors; const vis = this._g.selectAll(".vis").data(this._chartData); vis .join("g") .attr("class", "vis") .attr( "transform", (d) => `rotate(${(this._x(d.date) * 180) / Math.PI - 180})` ) // condition .call((g) => g .append("path") .attr("fill", (d) => `url(#grad${d.condition}_${this._uniqueId})`) .attr("stroke", "none") .attr("d", (d) => this._line(r.inner, r.outer)) ) // temperature .call((g) => g .append("path") .attr("fill", `url(#line_${this._uniqueId})`) .attr("stroke", "none") .attr("d", (d) => this._line(this._y(d.low), this._y(d.high))) ) // humidity .call((g) => g .append("path") .attr("fill", (d) => this._hc(d.humidity)) .attr("opacity", 0.7) .attr("d", (d) => this._line(r.outer, this._h(d.humidity))) ); // precipitation bubble vis .join("circle") .attr("fill", c.precipitation) .attr("stroke", c.precline) .attr("opacity", 0.4) .attr("stroke-opacity", 0.7) .attr("cy", r.outer + r.bubble) .attr("r", (d) => this._b(d.precipitation)) .attr( "transform", (d) => `rotate(${(this._x(d.date) * 180) / Math.PI - 180})` ); // average line const lineWidth = ((r.outer - r.inner) * 1.5 * Math.PI) / this._chartData.length; this._g .append("path") .attr("fill", "none") .attr("stroke", "#006d77") .attr("stroke-width", lineWidth) .attr("stroke-opacity", 0.35) .attr( "d", d3 .lineRadial() .curve(d3.curveLinearClosed) .angle((d) => this._x(d.date)) .radius((d) => this._y(d.avg))(this._chartData) ); } _renderAxis() { this._g .append("g") .attr("text-anchor", "end") .call((g) => this._circle(g, this._radius.inner)) .selectAll("g") .data(this._y.ticks(5).slice(0, 5)) .join("g") .call((g) => this._circle(g, (d) => this._y(d))) .call((g) => g .append("text") .attr("y", (d) => -this._y(d)) .attr("dx", "-0.5em") .attr("dy", "0.25em") .attr("font-size", this._fontSize.tick + "pt") .attr("font-weight", "bold") .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", "none") .text((d) => d) .clone(true) .attr("fill", "#aaa") .attr("stroke", "none") ); } _renderMarks() { const c = this._colors, r = this._radius; let angle = (day) => { day.angle = (this._x(day.date) * 180) / Math.PI - 180; // pre-calculated degree day.arcStart = this._x(day.date); // rad day.arcEnd = day.arcStart + 2 * Math.PI; // rad return day; }; let addMark = (id, color, y1, y2, day, innerRadius, dy, label, circle) => { this._g .append("g") .call((g) => g .append("line") .attr("y1", y1) .attr("y2", y2) .attr("stroke", color) .attr("stroke-width", 0.5) .attr("transform", `rotate(${day.angle})`) ) .call((g) => { g.append("path") .attr("id", id + "_" + this._uniqueId) .attr("stroke", circle ? color : "none") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "1,2,1,2") .attr("fill", "none") .attr("d", this._arc(innerRadius, day.arcStart, day.arcEnd)); g.append("text") .attr("fill", color) .attr("font-size", this._fontSize.mark + "pt") .attr("font-weight", "bold") .attr("dx", 2) .attr("dy", dy) .append("textPath") .attr("href", "#" + id + "_" + this._uniqueId) .text(label); }); }; const hottest = angle( this._chartData.reduce((a, b) => (a.high > b.high ? a : b)) ), coldest = angle( this._chartData.reduce((a, b) => (a.low < b.low ? a : b)) ), rainiest = angle( this._chartData.reduce((a, b) => a.precipitation > b.precipitation ? a : b ) ); addMark( "hottest", c.high, this._y(hottest.high), this._y(hottest.high) + 10, hottest, this._y(hottest.high), -2, `${hottest.dateStr} - ${hottest.high}${this._tempUnit}`, true ); addMark( "coldest", c.low, this._y(coldest.low) - 10, this._y(coldest.low), coldest, this._y(coldest.low), "1em", `${coldest.dateStr} - ${coldest.low}${this._tempUnit}`, true ); addMark( "rainiest", c.precline, r.max - r.label, r.max - r.label - 10, rainiest, r.max - r.label - 10, 0, `${rainiest.dateStr} - ${rainiest.precipitation}${this._precUnit}` ); } _renderOverlay() { const r = this._radius, t = this._texts; this._g .selectAll(".visoverlay") .data(this._chartData) .join("g") .attr("class", "visoverlay") .attr( "transform", (d) => `rotate(${(this._x(d.date) * 180) / Math.PI - 180})` ) // rad 2 deg - 180 -> rotate back to 12 o'clock .call((g) => g .append("path") .attr("fill", "white") .attr("opacity", 0) .attr("d", this._line(r.inner, r.max - r.label)) ) .on("mouseenter", (e, d) => { if (+this._statistics.attr("opacity") === 1) { this._statistics.attr("opacity", 0); this._dailyInfo.style("visibility", "visible"); } t.icon.attr("href", this._condColors[d.conditionIndex].icon); t.date.text(d.dateStr); t.high.text(`High: ${d.high}${this._tempUnit}`); t.low.text(`Low: ${d.low}${this._tempUnit}`); t.avg.text(`Avg: ${d.avg}${this._tempUnit}`); t.prec.text(`Prec.: ${d.precipitation}${this._precUnit}`); t.humidity.text(`Humidity: ${d.humidity}%`); const curr = d3.select(e.currentTarget); this._highlight .attr("opacity", 1) .transition() .duration(500) .ease(d3.easeElastic) .attr("transform", curr.attr("transform")); if (this._onhover) this._onhover(d.date); }) .on("mouseleave", (e, d) => { this._statistics.attr("opacity", 1); this._dailyInfo.style("visibility", "hidden"); this._highlight.attr("opacity", 0); }); } _renderMonthLabels() { const r = this._radius; this._g .append("g") .selectAll("g") .data( this._months.map((d, i) => { const date = new Date(this._year, i, 1); return { month: d, index: i, date: date, rad: this._x(date), angle: (this._x(date) * 180) / Math.PI - 180 // pre-calculated degree of the first day of the month }; }) ) .join("g") .attr("font-size", this._fontSize.month + "pt") .attr("font-weight", "bold") .call((g) => g .append("line") .attr("stroke", "#aaa") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "1,2,1,2") .attr("y1", r.inner) .attr("y2", r.max) .attr("transform", (d) => `rotate(${d.angle})`) ) .call((g) => g .append("path") .attr("stroke", "#aaa") .attr("stroke-width", 0.35) .attr("stroke-dasharray", "1,2,1,2") .attr("d", (d) => this._arc( r.max - r.label, d.rad, d.rad + ((Math.PI * 2) / 12) * 0.3 ) ) ) // month radian * 0.3 for the month dot-lines .call((g) => g .append("text") .attr("dx", 2.5) .attr("dy", r.label + 17.5) // 2.5: margin-bottom .attr("fill", "#999") .append("textPath") .attr("href", (d) => "#" + d.month + "_" + this._uniqueId) .text((d) => d.month) ) .call((g) => g .append("path") .attr("id", (d) => d.month + "_" + this._uniqueId) .attr("fill", "white") .attr("opacity", 0) .attr("d", (d) => this._arc( r.max - r.label - 20, d.rad, d.rad + (Math.PI * 2) / 12, r.max + 20 ) ) ) // an arc covers the whole month for mouseover .on("mouseover", (e, d) => { this._yearStat = false; this._currMonth = d.index; this._showStatistics( this._getMonthData(d.index), this._months[d.index] ); if (this._onhover) this._onhover(new Date(this._year, d.index, 1)); }); } _showStatistics(data, label) { const set = (g) => { g.attr("transform", (d) => `translate(${d.x},${d.y})`) .select("text") .attr("fill", (d) => d3.color(d.data.color).darker(0.75)) .text((d) => d.value); const c = g.select("circle"); var t = !this._f ? c.transition().duration(250) : c; t.attr("r", (d) => d.r) .attr("fill", (d) => d.data.color) .attr("stroke", (d) => d3.color(d.data.color).darker(0.75)); return g; }; this._statistics.select(".label").text(label); this._statistics .selectAll("g") .data( this._pack(data) .leaves() .filter((d) => d.data.color !== undefined) ) .join( (enter) => { return enter .append("g") .call((g) => g.append("circle").attr("opacity", 0.65).attr("stroke-width", 0.5) ) .call((g) => g .append("text") .attr("dy", "0.25em") .attr("font-size", this._fontSize.center) ); }, (update) => set(update, true), (exit) => exit.remove() ) .call((g) => set(g)); this._f = false; } _line(y1, y2) { return d3 .arc() .innerRadius(y1) .outerRadius(y2) .startAngle(Math.PI) .endAngle(this._dayRadian)(); } _arc(radius, start, end, outerRadius) { outerRadius = outerRadius || radius; return d3 .arc() .innerRadius(radius) .outerRadius(outerRadius) .startAngle(start) .endAngle(end)(); } _circle(g, r) { g.append("circle") .attr("fill", "none") .attr("stroke", "#aaa") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "1,2,1,2") .attr("r", (d) => (typeof r === "function" ? r(d) : r)); } _pack(data) { const counts = [], w = this._radius.inner * 2; const grouped = d3.group(data, (d) => d.conditionIndex); grouped.forEach((value, key) => counts.push({ cond: key, count: value.length, color: this._condColors[key].color }) ); return d3.pack().size([w, w]).padding(1)( d3.hierarchy({ children: counts }).sum((d) => d.count) ); } _getMonthData(month) { return this._chartData.filter((d) => d.month === month); } }30:[{"id":"97b33ce27f36d51d5bcb2dca599a266b091453894602c7e11c01df8aac0c95addd2868a0e602deec6da783244fe0a2380dc295b13a41ca78aca5e02d665182f9","href":"https://static.observableusercontent.com/files/97b33ce27f36d51d5bcb2dca599a266b091453894602c7e11c01df8aac0c95addd2868a0e602deec6da783244fe0a2380dc295b13a41ca78aca5e02d665182f9","name":"14Resort_10yr_winters.csv","type":"text/csv","lastModified":1752896210959.088,"size":13187494},{"id":"b3687d615df4b9fffded17ea55240882d3c62c7ad8405da9e6441e5e20acd6810266c5cd9572d32f7918f41decf36da1f4ef8dbab91a461a7e1fe40097818bd0","href":"https://static.observableusercontent.com/files/b3687d615df4b9fffded17ea55240882d3c62c7ad8405da9e6441e5e20acd6810266c5cd9572d32f7918f41decf36da1f4ef8dbab91a461a7e1fe40097818bd0","name":"clear.svg","type":"image/svg+xml","lastModified":1752896210959.088,"size":1589},{"id":"28eef0095d64f7b9454681e8dd6ebea3322e1756b2e7c306c2e153927309d941013666c7fbeb84b7fdd2f970661ce820d8e499ae06c7275bc20d9cfb9646c92b","href":"https://static.observableusercontent.com/files/28eef0095d64f7b9454681e8dd6ebea3322e1756b2e7c306c2e153927309d941013666c7fbeb84b7fdd2f970661ce820d8e499ae06c7275bc20d9cfb9646c92b","name":"cloudy.svg","type":"image/svg+xml","lastModified":1752896210959.088,"size":1821},{"id":"83d854cc88d5f0c3ec1965ae1120b8553de7d1d37aa89445d8cc6a1362a81d251acc0a5b5d30ebd4ac7cc7a632e33af54402562e32bef0f0fd21cff5d8870ab2","href":"https://static.observableusercontent.com/files/83d854cc88d5f0c3ec1965ae1120b8553de7d1d37aa89445d8cc6a1362a81d251acc0a5b5d30ebd4ac7cc7a632e33af54402562e32bef0f0fd21cff5d8870ab2","name":"overcast.svg","type":"image/svg+xml","lastModified":1752896210959.088,"size":1492},{"id":"0392925eb11dbd1dafe68e939a8057cb34bed73ac48be39165e517d0c6a1a30ecc32bc200bca9ec3e72b18ca2ad4d6ae3a0058c9ae6c78b2395ad3a5e86e467d","href":"https://static.observableusercontent.com/files/0392925eb11dbd1dafe68e939a8057cb34bed73ac48be39165e517d0c6a1a30ecc32bc200bca9ec3e72b18ca2ad4d6ae3a0058c9ae6c78b2395ad3a5e86e467d","name":"rain.svg","type":"image/svg+xml","lastModified":1752896210959.088,"size":2176},{"id":"d1cec789d2f90998479209b8dc2c268f660762efb0f87d9c1bc1f7596caa0c7c65f72103ff5bc56f8c5ba4e9293c04243490c5d7feab37b6f6f6642b679a7fe2","href":"https://static.observableusercontent.com/files/d1cec789d2f90998479209b8dc2c268f660762efb0f87d9c1bc1f7596caa0c7c65f72103ff5bc56f8c5ba4e9293c04243490c5d7feab37b6f6f6642b679a7fe2","name":"snow.svg","type":"image/svg+xml","lastModified":1752896210959.088,"size":1155}] 2b:{"id":"0c477ca03c3d0e72","slug":null,"title":"Winter Stripes","thumbnail":"86c0d6e879b2312002d4a22e2c9f1fab829671d65c72711bfffcd9b089ca561f","access_level":"public","create_time":"$D2025-07-19T03:36:50.959Z","update_time":"$D2025-12-04T02:00:46.800Z","view_time":null,"first_public_time":"$D2025-12-05T02:06:08.143Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024"},"version":601,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null}],"members":[{"type":"team","id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"3b5cd506268b9cd7","slug":"snow-report","title":"Snow Report","owner":{"id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects"}},"type":"notebook","body":{"title":"Winter Stripes","cells":[{"id":0,"value":"# Winter Stripes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"viewof selectedResort = radio({\n title: \"Ski Resort\",\n description: \"Select ski resort to view snow base levels across the years\",\n options: resorts,\n value: resorts[9]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"Plot.plot({\n title: `${selectedResort} temperature for ${selectedSeason}`,\n width: width,\n height: 140,\n color: {\n type: \"linear\",\n scheme: \"BuYlRd\",\n legend: true,\n domain: [-30, 30]\n },\n\n marks: [\n Plot.barX(filterByResortBySeason, {\n x: \"date\",\n interval: 1,\n interval: d3.utcDay,\n fill: tempPoint,\n tip: true\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"viewof tempUnit = radio({\n title: \"Temperature Unit\",\n description: \"Please select your preferred measurement unit\",\n options: [\n { label: \"Fahrenheit\", value: \"temp\" },\n { label: \"Celsius\", value: \"tempC\" }\n ],\n value: \"temp\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"Plot.plot({\n title: `Temperatures at selected resorts for the ${selectedSeason} ski season`,\n width: width,\n height: 800,\n marginLeft: 120,\n color: {\n // type: \"pow\",\n type: \"sequential\",\n scheme: \"PuOr\",\n scheme: \"PRGn\",\n scheme: \"BuYlRd\",\n legend: true\n },\n facet: {\n data: filterBySeason,\n y: \"resort\"\n },\n fy: {\n label: null,\n // labelOffset: 15,\n // labelAnchor: \"bottom\",\n // align: \"right\",\n tickSize: 5\n },\n marks: [\n Plot.barX(filterBySeason, {\n marginLeft: 6,\n x: \"date\",\n interval: 1,\n interval: d3.utcDay,\n fill: tempUnit,\n tip: true\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof selectedSeason = select({\n title: \"Ski Season\",\n description: \"Select ski season to view snow levels\",\n options: seasons,\n value: seasons[9]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"viewof tempPoint = radio({\n title: \"Temperature Measurement\",\n description: \"Please select the measurement point\",\n options: [\n { label: \"Daily Low\", value: \"tempminC\" },\n { label: \"Daily Average\", value: \"tempC\" },\n { label: \"Daily High\", value: \"tempmaxC\" }\n ],\n value: \"tempC\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"tempPoint","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"viewof tempPointF = radio({\n title: \"Temperature Measurement (\",\n description: \"Please select the measurement point (Fahrenheit)\",\n options: [\n { label: \"Daily Low\", value: \"tempmin\" },\n { label: \"Daily Average\", value: \"temp\" },\n { label: \"Daily High\", value: \"tempmax\" }\n ],\n value: \"temp\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"

Heat Check

Resort temperatures during the ${selectedSeason} ski season

${tempStripes_season}

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"chart = {\n const w = 1024, h = 650;\n const svg = d3.create(\"svg\") \n .attr(\"cursor\", \"default\")\n .attr(\"viewBox\", [0, 0, w, h]); \n \n new WeatherChart(svg)\n .size(w, h)\n .icon(weatherIcons)\n .sort(+options.sort)\n .render(data);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"options1.resort","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"options","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// chart = {\n \n// const d = diameter;\n// const svg = d3.create(\"svg\")\n// .attr(\"viewBox\", `${-d / 2} ${-d / 2} ${d} ${d}`)\n// .style(\"width\", d)\n// .style(\"height\", d);\n \n// const wheel = new WeatherWheel(svg)\n// .size([d, d])\n// .icon(icon)\n// .data(weather[options.city])\n// .render();\n\n// return svg.node();\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"resortData_10yr_winterMonths = FileAttachment(\"14Resort_10yr_winters.csv\").csv({\n typed: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"import { select, radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"filterByResort = resortData_10yr_winterMonths.filter(\n (d) => d.resortName === selectedResort\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"filterByResortBySeason = resortData_10yr_winterMonths.filter(\n (d) => d.resortName === selectedResort && d.skiSeason === selectedSeason\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"filterBySeason = resortData_10yr_winterMonths.filter(\n (d) => d.skiSeason === selectedSeason\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"seasons = [...new Set(resortData_10yr_winterMonths.map((d) => d.skiSeason))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"resorts = [...new Set(resortData_10yr_winterMonths.map((d) => d.resortName))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"icon = ({\n clear: await FileAttachment(\"clear.svg\").url(),\n cloudy: await FileAttachment(\"cloudy.svg\").url(),\n overcast: await FileAttachment(\"overcast.svg\").url(),\n rain: await FileAttachment(\"rain.svg\").url(),\n snow: await FileAttachment(\"snow.svg\").url()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"diameter = Math.min(screen.width, screen.height) * 0.8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof options = radio({\n title: \"Ski Resort\",\n description: \"Select ski resort to view snow base levels across the years\",\n options: resorts,\n value: resorts[9]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof options1 = form(html``)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"