28:null 29:["$","title",null,{"children":"2.double kill | 2007040109 | Observable"}] 2e:T71f,combined2= { const d =2500; var t, currentMonth = 0; const yd = weather[options.city]; const svg = d3.create("svg") .attr("viewBox", `${-256} ${-1250} ${1100} ${2500}`) .style("width", width) .style("height", d); const g2 = svg.append("g") .attr("class", "key") .attr("font-size", "9pt") .attr("transform", `translate(${240}, ${5})`); const wheel = new WeatherWheel(g2) .size([470,470]) .icon(icon) .data(yd) .onhover((date) => { clearTimeout(t); t = setTimeout(() => { const m = date.getMonth(); if (m !== currentMonth) { drawSankey(m); draw(m); currentMonth = m; } }, 50); }) .render(); drawSankey(0); draw(0); function drawSankey(month) { const md = yd.filter(d => new Date(d["Date time"]).getMonth() === month); svg.select(".wsankey").remove(); const g = svg.append("g") .attr("class", "wsankey") .attr("font-size", "9pt") .attr("transform", `translate(${450}, ${-200})`); const sankey = new WeatherChart(g) .size(470, 410) .icon(icon) .sort(1) .tempChartHeight(60) .column({ date: "Date time", high: "Maximum Temperature", low: "Minimum Temperature", condition: "Conditions" }) .render(md); } function draw(month) { svg.select(".sankey").remove(); const g3 = svg.append("g") .attr("class", "sankey") .attr("font-size", "9pt") .attr("transform", `translate(${0}, ${270})`); new WeatherGrid(g3) .sizes(470, 410) .options({cellColor: options.color, tempScale: "month"}) .icon(icon) .month(+month) .data(weathers[options.city].dataset) .render(); } return svg.node() }2f:T5b17,// 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 = 600; this._height = 1000; 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(".", ""); } sizes(width, height) { this._width = width; this._height = height; return this; } 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:T7a41,WeatherGrid = { // https://github.com/analyzer2004/weathergrid // Copyright 2021 Eric Lo class InfoGraphic { constructor(container) { this._container = container; this._infoBox = null; this._textBox = null; this._charBox = null; this._tooltip = { color: "black", boxColor: "white", boxOpacity: 0.8 }; // events this._onhover = null; this._onclick = null; } tooltip(_) { return arguments.length ? (this._tooltip = Object.assign(this._tooltip, _), this) : this._tooltip; } onhover(_) { return arguments.length ? (this._onhover = _, this) : this._onhover; } onclick(_) { return arguments.length ? (this._onclick = _, this) : this._onclick; } _init() { this._textBox = this._container .append("text") .attr("font-family", this._font.fontFamily) .style("visibility", "hidden"); String.prototype.capitalize = function () { return this.charAt(0).toUpperCase() + this.slice(1) } } // Tooltip // _attachEvents(target, content) { target .on("pointerenter", (e, d) => { this._showTooltip(e, content(d)); if (this._onhover) this._onhover(d); }) .on("pointermove", (e, d) => { this._moveTooltip(e); }) .on("pointerleave", () => { this._hideTooltip(); }) .on("click", (e, d) => { if (this._onclick) this._onclick(d); }); } _showTooltip(e, info) { if (!this._charBox) { this._charBox = this._textBox.text("M").node().getBBox(); } var max = 0; info.forEach(s => { const l = this._calcTextLength(s); if (l > max) max = l; }) if (!this._infoBox) this._infoBox = this._og .append("g") .attr("fill", this._tooltip.color) .call(g => g.append("rect") .attr("class", "ibbg") .attr("opacity", this._tooltip.boxOpacity) .attr("stroke", "#aaa") .attr("stroke-width", 0.5) .attr("rx", 4).attr("ry", 4) .attr("x", -5).attr("y", -5) .attr("fill", this._tooltip.boxColor)); const spacing = 1.1; this._infoBox .style("visibility", "visible") .select(".ibbg") .attr("width", max + 20).attr("height", spacing * this._charBox.height * info.length + 5); this._infoBox .selectAll("text") .data(info) .join( enter => { enter .append("text") .attr("dy", (d, i) => `${spacing * i + 1}em`) .attr("font-weight", (d, i) => i === 0 ? "bold" : "") .text(d => d); }, update => update.text(d => d), exit => exit.remove() ); this._moveTooltip(e); } _moveTooltip(e) { const converted = this._convertCoordinate(e, this._og), box = this._infoBox.node().getBBox(); const { left, top } = this._calcTooltipPosition(converted, box); this._infoBox.attr("transform", `translate(${left + 10},${top + 10})`); } _calcTooltipPosition(converted, box) { return { left: converted.x, top: converted.y }; } _hideTooltip(d) { if (this._infoBox) this._infoBox.style("visibility", "hidden"); } // Utilities // _getSVG() { let curr = this._container.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"; } } _calcTextLength(text) { return this._textBox.text(text).node().getBBox().width; } } class WeatherGrid extends InfoGraphic { constructor(container) { super(container); this._og = null; // Outer group this._month = 0; this._months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; this._scheme = ["#d73027", "#fc8d59", "#fee090", "#d1e5f0", "#67a9cf", "#2166ac"]; this._condColors = { clear: { color: "#fee090", icon: "" }, cloudy: { color: "#e7d8c9", icon: "" }, overcast: { color: "#ddd", icon: "" }, rain: { color: "#98c1d9", icon: "" }, snow: { color: "#c2dfe3", icon: "" } }; this._elemColors = { tempHigh: this._scheme[1], tempLow: this._scheme[4], tempAvg: "#aaa" }; this._options = { tempUnit: "°F", tempScale: "month", cellColor: "temperature", dateFormat: "%m/%d/%Y" }; this._font = { fontFamily: "Times New Roman", size: { statistic: 9, legend: 10, gridLabel: 12 } }; this._data = null; this._monthlyData = null; this._groupedData = null; this._years = null; this._days = null; this._tempSegs = null; this._column = { date: "date", low: "min", high: "max", avg: "avg", condition: "condition" }; this._elemDims = { legend: 100, // legend width dayLabel: 40, // day label width tempChart: 100, // temperature chart height statChart: 100, // statistic chart height avgLabel: 30, // average temperature label height yearLabel: 70, // year label height partMargin: 10, // margin between main parts }; this._gridMargin = { left: this._elemDims.legend + this._elemDims.dayLabel, top: this._elemDims.avgLabel + this._elemDims.yearLabel }; this._iconSize = 28; this._cellPadding = 4; this._gridDims = { width: 0, height: 0 } // Scales this._x = null; this._y = null; this._c = null; this._tempY = null; } options(_) { return arguments.length ? (this._options = Object.assign(this._options, _), this) : this._options; } font(_) { return arguments.length ? (this._font = Object.assign(this._font, _), this) : this._font; } month(_) { return arguments.length ? (this._month = _, this) : this._month; } column(_) { return arguments.length ? (this._column = _, this) : this._column; } icon(_) { if (arguments.length) { this._condColors.clear.icon = _.clear; this._condColors.cloudy.icon = _.cloudy; this._condColors.overcast.icon = _.overcast; this._condColors.rain.icon = _.rain; this._condColors.snow.icon = _.snow; return this; } else { return Object .keys(this._condColors) .map(k => this._condColors[k].icon); } } data(_) { return arguments.length ? (this._data = _, this) : this._data; } _updateViewbox() { const e = this._elemDims, g = this._gridDims, w = e.legend + e.dayLabel + g.width + 10, h = e.statChart + e.tempChart + e.partMargin + e.avgLabel + e.yearLabel + g.height; const svg = this._getSVG(); if (svg) d3.select(svg).attr("viewBox", `0,0,${w},${h}`); return { w, h }; } sizes(width, height) { this._width = width; this._height = height; return this; } render() { this._init(); this._process(); this._initScales(); this._render(); return this; } _init() { super._init(); } _process() { const c = this._column, condMap = this._getConditionMap(); // Transform and filter this._monthlyData = this._data.map(d => ({ date: d3.timeParse(this._options.dateFormat)(d[c.date]), max: +d[c.high], min: +d[c.low], avg: +d[c.avg], cond: condMap.get(d[c.condition]) })).filter(d => d.date.getMonth() === this._month); // Group by year const grouped = d3.group(this._monthlyData, d => d.date.getFullYear()); for (let [k, v] of grouped) { grouped.set(k, { year: k, max: d3.max(v.map(d => d.max)), min: d3.min(v.map(d => d.min)), avg: v.reduce((a, b) => a + b.avg, 0) / v.length, data: v }); } this._groupedData = grouped; this._years = [...grouped.keys()]; this._days = [...new Set(this._monthlyData.map(d => d.date.getDate()))]; this._gridDims.width = (this._iconSize + this._cellPadding * 2 + 1) * this._years.length; this._gridDims.height = (this._iconSize + this._cellPadding * 2 + 1) * d3.max(this._days); } _getConditionMap() { const map = new Map(); map.set("Rain, Overcast", "rain"); map.set("Rain, Partially cloudy", "rain"); map.set("Rain", "rain"); map.set("Partially cloudy", "cloudy"); map.set("Overcast", "overcast"); map.set("Clear", "clear"); return map; } _initScales() { const padding = 0.035; this._x = d3.scaleBand().domain(this._years).range([0, this._gridDims.width]).padding([padding]); this._y = d3.scaleBand().domain(this._days).range([0, this._gridDims.height]).padding([padding]); let ext = d3.extent(this._monthlyData.flatMap(d => [d.min, d.max])).reverse(); this._tempY = d3.scaleLinear().domain(ext).range([0, this._elemDims.tempChart]).nice(); if (this._options.tempScale === "month") ext = d3.extent(this._monthlyData.map(d => d.avg)); else ext = d3.extent(this._data.map(d => d.avg)); const sample = this._sample(ext, this._scheme.length + 1).reverse(); this._tempSegs = this._scheme.map((d, i) => ({ color: d, s: sample[i + 1], e: sample[i] })); const segs = this._tempSegs; this._c = t => { for (let i = 0; i < segs.length; i++) { if (t >= segs[i].s && t <= segs[i].e) return segs[i].color; } return "#eee"; } } _render() { const { w, h } = this._updateViewbox(); this._renderStatistics(w); this._og = this._container.append("g") .attr("font-family", this._font.fontFamily) .attr("transform", `translate(0,${this._elemDims.statChart})`); this._addFilter(); this._renderDateLabels(); this._renderYearColumns(); this._renderLegend(); this._renderTempChart(); } // Weather grid renderer // _addFilter() { return this._og .append("defs") .append("filter") .attr("id", "shadow") .call(f => { f .append("feDropShadow") .attr("dx", 0.5).attr("dy", 0.5) .attr("flood-color", "#bbb") .attr("stdDeviation", 0.5); f .append("feColorMatrix") .attr("values", "-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"); }); } _renderDateLabels() { return this._og .selectAll("date") .data(this._days) .join("g") .attr("class", "date") .attr("transform", d => `translate(${this._elemDims.legend},${this._y(d) + this._elemDims.tempChart + this._elemDims.partMargin + this._gridMargin.top})`) .call(g => { g .append("rect") .attr("width", this._elemDims.dayLabel) .attr("height", this._y.bandwidth()) .attr("fill", "#eee"); g .append("text") .attr("x", this._elemDims.dayLabel / 2) .attr("y", this._y.bandwidth() / 2) .attr("dy", "0.3em") .attr("text-anchor", "middle") .attr("fill", "#666") .text(d => d); }); } _renderYearColumns() { const that = this, colorIsTemp = this._options.cellColor === "temperature", colorIsHybrid = this._options.cellColor === "hybrid", b = this._x.bandwidth(), hb = b / 2, yb = this._y.bandwidth(); const df = 250 / this._years.length; const cols = this._og.append("g") .attr("transform", `translate(${this._gridMargin.left},${this._elemDims.tempChart + this._elemDims.partMargin})`) .selectAll("year") .data(this._groupedData) .join("g") .attr("class", "year") .attr("transform", d => `translate(${this._x(d[0])},0)`) .call(drawTempLabel) .call(drawYearLabel) .call(drawCell); this._attachEvents( cols.selectAll(".cell"), d => [ d.date.toLocaleDateString(), d.cond.capitalize(), this._formatTemp("High", d.max), this._formatTemp("Avg", d.avg), this._formatTemp("Low", d.min) ] ); function drawTempLabel(g) { g .append("g") .attr("fill", d => that._c(d[1].avg)) .call(ag => { ag .append("text") .attr("x", hb) .attr("y", 10) .attr("dy", "0.3em") .attr("text-anchor", "middle") .attr("font-weight", "bold") .text(d => d[1].avg.toFixed(0)); ag .append("rect") .attr("y", that._elemDims.avgLabel - 10) .attr("width", b) .attr("height", 8) }); } function drawYearLabel(g) { g .append("rect") .attr("y", that._elemDims.avgLabel) .attr("width", b) .attr("height", that._elemDims.yearLabel) .attr("fill", "#eee"); const ty = that._elemDims.yearLabel / 2 + that._elemDims.avgLabel; g .append("text") .attr("class", "yearLabel") .attr("x", hb) .attr("y", ty) .attr("text-anchor", "middle") .attr("dy", "0.3em") .attr("fill", "#666") .attr("transform", `rotate(-90,${hb},${ty})`) .text(d => d[0]); } function drawCell(g) { g .selectAll("cell") .data(d => d[1].data) .join("g") .attr("class", "cell") .attr("transform", d => `translate(0, ${that._y(d.date.getDate()) + that._gridMargin.top})`) .call(cell => { cell .append("rect") .attr("x", 0).attr("y", 0) .attr("width", b).attr("height", yb) .attr("stroke", "#eee") .attr("stroke-width", 0.1) .attr("fill", d => { return colorIsTemp ? that._c(d.avg) : that._condColors[d.cond].color; }); if (colorIsHybrid) { cell .append("rect") .attr("x", 0).attr("y", yb * .75) .attr("width", b).attr("height", yb * .25) .attr("stroke", "#eee") .attr("stroke-width", 0.1) .attr("fill", d => that._c(d.avg)); } cell .append("image") .attr("width", that._iconSize) .attr("height", that._iconSize) .attr("x", that._cellPadding).attr("y", that._cellPadding) .attr("href", d => that._condColors[d.cond].icon) .style("filter", "url(#shadow)"); }); } } // Temperature Chart renderer // _renderTempChart() { const that = this; const gg = this._og.append("g") .attr("transform", `translate(${this._gridMargin.left},0)`); gg .append("g") .call(g => { g .append("rect") .attr("width", this._gridDims.width) .attr("height", this._elemDims.tempChart) .attr("opacity", 1).attr("fill", "white"); drawLine(g, this._elemColors.tempHigh, "max"); drawLine(g, this._elemColors.tempLow, "min"); drawLine(g, this._elemColors.tempAvg, "avg"); }) .call(g => { const n = this._tempY.domain()[0], m = this._tempY.domain()[1], ticks = [n, Math.round((n + m) / 2), m]; g .append("g") .attr("fill", "#ddd") .attr("stroke-width", 0.5) .attr("transform", `translate(${this._gridDims.width - this._x.bandwidth() / 2},0)`) .call(d3.axisRight(this._tempY).tickValues(ticks)) .call(g => { g.select(".domain").remove(); g.selectAll(".tick text").attr("fill", "#666"); g.selectAll(".tick line").attr("stroke-color", "#666"); }) }); this._drawConnector(); this._drawTempIndicator(gg); function drawLine(g, color, prop) { g .append("path") .datum([...that._groupedData.values()]) .attr("stroke", color) .attr("fill", "none") .attr("d", d => line(prop)(d)); } function line(prop) { return d3.line() .defined(d => !isNaN(d[prop])) .x(d => that._x(d.year) + that._x.bandwidth() / 2) .y(d => that._tempY(d[prop])); } } _drawConnector() { const cx = this._gridMargin.left + this._x.bandwidth() / 2 - 10, cy = this._tempY(this._groupedData.values().next().value.avg); this._og .append("circle") .attr("cx", cx).attr("cy", cy).attr("r", 2.5) .attr("fill", this._elemColors.tempAvg); this._og .append("text") .attr("font-size", "8pt") .attr("text-anchor", "end") .attr("x", cx - 5).attr("y", cy) .attr("dy", "-0.5em") .attr("fill", this._elemColors.tempAvg) .text("Average"); const ed = this._elemDims; this._og .append("path") .attr("d", `M ${cx} ${cy} H ${cx - 50} V ${ed.tempChart + ed.partMargin + 10} H ${cx - 10}`) .attr("fill", "none") .attr("stroke", this._elemColors.tempAvg) .attr("stroke-width", 1); } _drawTempIndicator(g) { const that = this, years = this._og.selectAll(".yearLabel"); 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._elemDims.tempChart); const high = line.append("text") .attr("fill", this._elemColors.tempHigh) .attr("dy", "-1em") .attr("transform", `translate(5,${this._elemDims.tempChart})`); const low = line.append("text") .attr("fill", this._elemColors.tempLow) .attr("transform", `translate(5,${this._elemDims.tempChart})`); g .on("pointerenter", () => line.attr("opacity", 1)) .on("pointermove", (e, d) => moveTempLine(e, d)) .on("pointerleave", () => { line.attr("opacity", 0); years.attr("fill", "#666").attr("font-weight", "normal"); }); const weathers = [...that._groupedData.values()], b = this._x.bandwidth(), hb = b / 2, xr = this._x.range(); function moveTempLine(e, d) { const converted = that._convertCoordinate(e, g), pos = converted.x; if (pos >= hb && pos <= xr[1] - hb) { const left = xr[0], right = xr[1]; const index = d3.bisect(d3.range(left, right, b), pos - hb); const weather = weathers[index - 1]; high.text(that._formatTemp("High", weather.max)); low.text(that._formatTemp("Low", weather.min)); const hbox = high.node().getBBox(), lbox = low.node().getBBox(); const w = hbox.width > lbox.width ? hbox.width : lbox.width; const tx = pos + w > right ? -w : 5; high.attr("transform", `translate(${tx},${that._elemDims.tempChart})`); low.attr("transform", `translate(${tx},${that._elemDims.tempChart})`); line.attr("transform", `translate(${pos},0)`); years .attr("fill", (d, i) => i === index - 1 ? "black" : "#666") .attr("font-weight", (d, i) => i === index - 1 ? "bold" : "normal"); } } return line; } // Legend renderer // _renderLegend() { const w = 20; return this._og .append("g") .selectAll("g") .data(this._tempSegs) .join("g") .attr("font-size", "10pt") .attr("transform", (d, i) => `translate(0,${i * (w + 5)})`) .call(g => { g .append("rect") .attr("width", w).attr("height", w) .attr("fill", d => d.color); g .append("line") .attr("x1", 0).attr("x2", (d, i) => i === 0 ? 70 : 45) .attr("y1", w).attr("y2", w) .attr("stroke", "#666") .attr("stroke-width", 0.5) .attr("stroke-dasharray", "1"); g .append("text") .attr("x", w + 10) .attr("dy", "18") .attr("fill", "#666") .text((d, i) => { if (i === 0) { return `> ${d.s}°F`; } else { return `${d.s}`; } } ); }); } // Statistics renderer // _renderStatistics(width) { const margin = 10, w = (width - margin * 2) / 2; const g = this._container .append("g") .attr("fill", "#666") .attr("font-family", this._font.fontFamily) .attr("transform", `translate(${margin},0)`); this._renderTempStatistic(g, w); this._renderCondStatistic(g, w + margin, w); } _renderTempStatistic(g, width) { const counts = d3.rollup(this._monthlyData.map(d => this._c(d.avg)), v => v.length, d => d); let v = 0; const data = [...this._scheme] .filter(d => counts.get(d) !== undefined) .reverse() .map((d, i) => { const days = counts.get(d), pct = days / this._monthlyData.length; return { color: d, days: days, pct: pct, s: v, e: v += days } }); this._renderStatistic(g, data, `${this._months[this._month]} average temperature`, 0, width); } _renderCondStatistic(g, left, width) { const counts = d3.rollup(this._monthlyData.map(d => d.cond), v => v.length, d => d); let v = 0; const data = Object.keys(this._condColors) .filter(k => counts.get(k) !== undefined) .map(k => { const days = counts.get(k), pct = days / this._monthlyData.length, cond = this._condColors[k]; return { color: cond.color, icon: cond.icon, days: days, pct: pct, s: v, e: v += days } }); const iconSize = 14; this._renderStatistic( g, data, "Weather condition", left, width, (g, x) => { g .append("image") .attr("x", d => x(d.s) + (x(d.e) - x(d.s) - iconSize) / 2 + left) .attr("y", 50) .attr("width", iconSize).attr("height", iconSize) .attr("opacity", 0.65) .attr("href", d => d.icon); } ); } _renderStatistic(g, data, caption, left, width, addition) { const x = d3.scaleLinear().domain([data[0].s, data[data.length - 1].e]).range([0, width]); g .append("text") .attr("x", left) .attr("dy", "1em") .attr("font-size", "10pt") .text(caption); g .append("text") .attr("x", left + width) .attr("dy", "1.5em") .attr("text-anchor", "end") .attr("font-size", "8pt") .text("%"); g .append("line") .attr("x1", left).attr("x2", left + width) .attr("y1", 20).attr("y2", 20) .attr("stroke", "#666") .attr("stroke-width", 0.25) .attr("stroke-dasharray", "1"); const stats = g .append("g") .attr("transform", "translate(0, 20)") .selectAll("g") .data(data) .join("g") .attr("text-anchor", "middle") .attr("font-size", "9pt") .call(g => { g .append("text") .attr("x", d => x(d.s) + (x(d.e) - x(d.s)) / 2 + left) .attr("dy", "1em") .text((d, i) => { const p = d.pct * 100; return p > 1 ? p.toFixed(0) : ""; }); g .append("rect") .attr("x", d => x(d.s) + left) .attr("y", 15) .attr("width", d => x(d.e) - x(d.s)) .attr("height", 30) .attr("fill", d => d.color); if (addition) addition(g, x); }); this._attachEvents( stats, d => [ `${d.days} days`, `${(d.pct * 100).toFixed(1)}%` ] ); } _calcTooltipPosition(converted, box) { const mapped = { x: converted.x - this._elemDims.legend, y: converted.y - this._elemDims.statChart - this._elemDims.tempChart }; const left = mapped.x + box.width > this._gridDims.width ? converted.x - box.width : converted.x, top = mapped.y + box.height > this._gridDims.height ? converted.y - box.height : converted.y; return { left, top }; } // Utilities // _sample(extent, n) { const min = Math.floor(extent[0]), max = Math.ceil(extent[1]), step = (max - min) / (n - 1); const s = []; for (let i = min; i < max; i += step) { s.push(Math.ceil(i)); } if (s[s.length - 1] != max) s.push(max); return s; } _formatTemp(caption, v) { return `${caption}: ${v}${this._options.tempUnit}`; } } return WeatherGrid; }31:[{"id":"bce032b385d42267ebff87665ac9456efe05672798798c796bd819d83a5017c786775ca62f3a1ffe481c318f07480baa849995532a901b39f701ea4e42d64c34","href":"https://static.observableusercontent.com/files/bce032b385d42267ebff87665ac9456efe05672798798c796bd819d83a5017c786775ca62f3a1ffe481c318f07480baa849995532a901b39f701ea4e42d64c34","name":"snow.svg","type":"image/svg+xml","lastModified":1663577784523.406,"size":1155},{"id":"2ec22ea1f9015a1ff1444b2964e06ab275b06ab13438421c658d3d90d173e34c8bd1e5e2cd6d06953fec68a07c8535c26eb7ea007de4c0ca9cd3e7521e752154","href":"https://static.observableusercontent.com/files/2ec22ea1f9015a1ff1444b2964e06ab275b06ab13438421c658d3d90d173e34c8bd1e5e2cd6d06953fec68a07c8535c26eb7ea007de4c0ca9cd3e7521e752154","name":"rain.svg","type":"image/svg+xml","lastModified":1663577784523.406,"size":2176},{"id":"e9f2f514dff538b3c2c610fcc7212ae126cc614a9e42791891f67ce3fd03b3168ceca0a44692ec808d85a0f03f7b039fb2dcb114f4ab5444892cfd5a76d55aa6","href":"https://static.observableusercontent.com/files/e9f2f514dff538b3c2c610fcc7212ae126cc614a9e42791891f67ce3fd03b3168ceca0a44692ec808d85a0f03f7b039fb2dcb114f4ab5444892cfd5a76d55aa6","name":"sandiego.min@1.csv","type":"text/csv","lastModified":1663577784523.406,"size":302906},{"id":"c10446499ae8678d29206ba852f44b56bda241a97212abb8e8755e2db83737e0fd342a703a99644d052e09a9bd4efb85c2868abda83ec394db708588203cadc0","href":"https://static.observableusercontent.com/files/c10446499ae8678d29206ba852f44b56bda241a97212abb8e8755e2db83737e0fd342a703a99644d052e09a9bd4efb85c2868abda83ec394db708588203cadc0","name":"losangeles.min@1.csv","type":"text/csv","lastModified":1663577784523.406,"size":270032},{"id":"80b344e3088c7e4fa93289094161b2c257174d60065726acd5416e809e1d2d1ff9da74f37420039efcdac549223184800b0018b5dc04014c74bb0d2a0196ad69","href":"https://static.observableusercontent.com/files/80b344e3088c7e4fa93289094161b2c257174d60065726acd5416e809e1d2d1ff9da74f37420039efcdac549223184800b0018b5dc04014c74bb0d2a0196ad69","name":"sanfrancisco.min@1.csv","type":"text/csv","lastModified":1663577784523.406,"size":305748},{"id":"0bc69f37381ab3882d110c56a9e5816dc59452cae7b4a545b692512f42ea68894eb731e197218149562f84b5f392f8cb324d4fb89e4cbfb72c8afed990045ab1","href":"https://static.observableusercontent.com/files/0bc69f37381ab3882d110c56a9e5816dc59452cae7b4a545b692512f42ea68894eb731e197218149562f84b5f392f8cb324d4fb89e4cbfb72c8afed990045ab1","name":"seattle.min@1.csv","type":"text/csv","lastModified":1663577784523.406,"size":314852},{"id":"27532ba2a0dda75ff42ef8f292f6c16942be43451de9f189a44742e651cdef00f52eecc28541f1f84a60bc50d88b6046b85808f76b241a5e765de0bcfc2aff2c","href":"https://static.observableusercontent.com/files/27532ba2a0dda75ff42ef8f292f6c16942be43451de9f189a44742e651cdef00f52eecc28541f1f84a60bc50d88b6046b85808f76b241a5e765de0bcfc2aff2c","name":"portland.min@1.csv","type":"text/csv","lastModified":1663577784523.406,"size":312154},{"id":"7c41512f80e4da3e46bfcadbf780b1a17dec705d595e8b37373d0a4899cb7259269b31a94b33a92d3fca310b853b1efbdd6f1c7aae32b3b63817477e0665cde3","href":"https://static.observableusercontent.com/files/7c41512f80e4da3e46bfcadbf780b1a17dec705d595e8b37373d0a4899cb7259269b31a94b33a92d3fca310b853b1efbdd6f1c7aae32b3b63817477e0665cde3","name":"cloudy.svg","type":"image/svg+xml","lastModified":1663577784523.406,"size":1821},{"id":"003be897f666d10456de853215048e5cdc4249b1ad17e930ad94c04f15837c7dbf64b7cb354dae7b5b361997d6fd751b382316145879fec8580a8a72c6568611","href":"https://static.observableusercontent.com/files/003be897f666d10456de853215048e5cdc4249b1ad17e930ad94c04f15837c7dbf64b7cb354dae7b5b361997d6fd751b382316145879fec8580a8a72c6568611","name":"clear.svg","type":"image/svg+xml","lastModified":1663577784523.406,"size":1589},{"id":"85d039b51be39fbe0074690e555b615b6dbec5e5dafea336b1473be79ea9c5db28114f34deeaee342fca9fe70311b40a11298caa82b109aca44c704db90e18f2","href":"https://static.observableusercontent.com/files/85d039b51be39fbe0074690e555b615b6dbec5e5dafea336b1473be79ea9c5db28114f34deeaee342fca9fe70311b40a11298caa82b109aca44c704db90e18f2","name":"overcast.svg","type":"image/svg+xml","lastModified":1663577784523.406,"size":1492}] 2c:{"id":"5e9a55cdbff0498f","slug":"2-double-kill","title":"2.double kill","thumbnail":"2bf006b74079497474eec5bc3328a22509061663545f6317baf9dbf2defa99f1","access_level":"public","create_time":"$D2022-09-19T08:56:24.523Z","update_time":"$D2023-01-12T15:44:32.527Z","view_time":null,"first_public_time":"$D2022-09-21T09:37:21.917Z","has_unpublished_edits":null,"fork":{"id":"36e634ab35d25aa6","slug":"weather-grid","title":"What story do two decades of weather data tell you?","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"stars":1,"starred":false,"owner":{"type":"team","id":"ab1d68b6b99d1243","login":"2007040109","name":"2007040109","avatar_url":"https://avatars-next.observableusercontent.com/002f6a2c9f2876ebd5055bd623e1ff0ac083feed5a2884c67f8c70ab069b798a","tier":"starter_2024"},"version":563,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"192080e33fc22031","login":"2007040109","name":"2007040109","avatar_url":"https://avatars-next.observableusercontent.com/002f6a2c9f2876ebd5055bd623e1ff0ac083feed5a2884c67f8c70ab069b798a","tier":null}],"members":[{"type":"individual","id":"192080e33fc22031","login":"2007040109","name":"2007040109","avatar_url":"https://avatars-next.observableusercontent.com/002f6a2c9f2876ebd5055bd623e1ff0ac083feed5a2884c67f8c70ab069b798a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"2.double kill","cells":[{"id":520,"value":"# 2.double kill\n本文进行天气预报数据展示，选择了Seattle、Portland、San Francisco、Los Angeles、San Diego五个地区从2000年到2020年每天的天气情况，包括了天气状况、气温、湿度等具体情况。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":535,"value":"通过选择地区可以选择天气轮（左上角）的展示城市，从而改变其他图片内容。Cell Color指的是天气表（下方）内图标的style，可以通过选择不同的style改变天气表的图表样式","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":537,"value":"下面一共有三个图，第一张图为天气轮（左上角），展示的是某一个地区2019年，从1月到12月的天气情况。将圆形分成365份，每一份代表每一天，将鼠标放在对应天气上，中间会显示当天的最高温、最低温、平均温度、日期、湿度、降雨量，图形表示天气状况。图片中间条形图表示每一天的最高温、最低温，折线图表示平均温，可以清楚的看出每天的温度变化情况。当选择条经过某一月份时，将鼠标移开图片，中间的圆圈代表天气状况的天数，圆圈越大天数越多，具体颜色对应的天气状况可以看左边天气状况关系表。最外围圆圈代表每一天的降雨量，圆圈越大降雨量越多。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":542,"value":"第二张图片为关系状况关系表（右上角），当鼠标在左图中选择月份（即经过月份）后该图会展现对应月份天气状况的数量与日期的关系图，上面为天气状况的数量，连接对应的日期。下方的折线图对应的是每天的最高温和最低温变化趋势。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":545,"value":"第三张图为天气表，根据鼠标在第一张图选择的月份，展现了2000年到2020年该月的每天的天气状况，可以一目了然的看到每年当日天气状况，从而从中发现规律。天气状况底色颜色深浅根据温度进行变化，具体可见左方示例。上面的折线图展现了当年每月最高温、最低温、平均温的温度变化，可以找到每年当月的温度变化情况。左上方的条形图代表20年来当月各范围温度的天数，越长代表天数越多，数字代表天数占比。右上方条形图代表20年来当月天气状况与数量的关系，越长代表数量越多。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"viewof options = {\n const seperator = '';\n return form(html``)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"以Seattle为例，不断改变月份我们发现，从2000年到2020年温度一直处于波动状态，没有较大的变化，常年降雨量偏高，集中于12月到4月，绝大多数月份以阴天和下雨为主，但很少有极端恶劣天气。可以估计，这与Seattle处于沿海地带有关，气候潮湿，但温度适宜，不会出现很冷或很热的天气。适宜人类居住，可以推测那里的居住人群可能风湿类疾病偏多。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"以此类推，我们可以通过上述三幅图片，分析地区气候状况，反向映射了其地域和人口适宜居住状况。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":254,"value":"import {controlPanel, Ctrls} from \"@analyzer2004/control-panel\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"import {weather, diameter} from \"@analyzer2004/west-coast-weather-from-seattle-to-san-diego\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"import {WeatherChart} from \"@analyzer2004/sunny-day-rainy-day-in-seattle\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"weathers = ({\n seattle: {label: \"Seattle\", dataset: await FileAttachment(\"seattle.min@1.csv\").csv()},\n portland: {label: \"Portland\", dataset: await FileAttachment(\"portland.min@1.csv\").csv()},\n sanfrancisco: {label: \"San Francisco\", dataset: await FileAttachment(\"sanfrancisco.min@1.csv\").csv()},\n losangeles: {label: \"Los Angeles\", dataset: await FileAttachment(\"losangeles.min@1.csv\").csv()},\n sandiego: {label: \"San Diego\", dataset: await FileAttachment(\"sandiego.min@1.csv\").csv()}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"months = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"html`

Icons made by bqlqn from www.flaticon.com

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"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":38,"value":"import {form} from \"@analyzer2004/3d-clustered-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"