34:["$","title",null,{"children":"Kyoto sakura blooming dates visualization | HukkyShibaseki | Observable"}] 3c:T90a,const flower = { draw(context, size) { const r = Math.sqrt(size / Math.PI) * 1.3, pr = r * 0.55; for (let i = 0; i < 5; i++) { const a = (i * 2 * Math.PI) / 5 - Math.PI / 2, cx = Math.cos(a) * pr, cy = Math.sin(a) * pr; context.moveTo(cx + pr, cy); context.arc(cx, cy, pr, 0, 2 * Math.PI); } } }; const colors = {domain: ["Regular", "Peak", "Highest peak"], range: ["#fde4ec", "#ff8fb8", "#e6007e"]}; const jp = topojson.feature(japan, japan.objects.countries).features.find(d => d.properties.name === "Japan"); const kyoto = [135.768, 35.011]; const kyotoLevel = data.at(-1); const map = Plot.plot({ title: "Kyoto, Japan", subtitle: "Where the blooming dates are recorded", width: 380, height: 460, projection: {type: "mercator", domain: {type: "MultiPoint", coordinates: [[128.5, 30.5], [146, 45.8]]}}, marks: [ Plot.geo(jp, {fill: "#f4efe9", stroke: "#bbb"}), Plot.dot([kyoto], {symbol: flower, r: 22, fill: "#e6007e", fillOpacity: 0.85, stroke: "white"}), Plot.dot([kyoto], {r: 2.5, fill: "#ffe066"}), Plot.text([kyoto], {text: ["Kyoto"], dx: 36, textAnchor: "start", fontWeight: "bold"}) ] }); const chart = Plot.plot({ title: "Sakura full bloom in Kyoto is arriving earlier", subtitle: "Placeholder data, 1953–2025 · magenta = earliest bloom ever, pink = earliest ~12% of years", width: 720, height: 460, marginLeft: 50, x: {label: null, tickFormat: "d"}, y: {label: "Full bloom date (↑ earlier)", reverse: true, tickFormat: d => d3.timeFormat("%b %d")(new Date(2021, 0, d)), grid: true}, color: {...colors, legend: true}, r: {range: [7, 7]}, marks: [ Plot.linearRegressionY(data, {x: "year", y: "doy", stroke: "#999", strokeDasharray: "4 3"}), Plot.dot(data, {x: "year", y: "doy", symbol: flower, r: d => d.level === "Highest peak" ? 12 : d.level === "Peak" ? 9 : 6, fill: "level", stroke: d => d.level === "Regular" ? "#e9a6bd" : "white", strokeWidth: 0.6, tip: true, channels: {Date: "date", Level: "level"}}), Plot.text(data.filter(d => d.level === "Highest peak"), {x: "year", y: "doy", text: d => `${d.year}: ${d.date}`, dy: -22, fill: "#e6007e", fontWeight: "bold"}) ] }); display(html`

${map}${chart}

`);3d:T5f0,I built the visualization, but it uses placeholder data, not real Kyoto records. The chart will look right, but the dates and trend aren't real. - **Wrong file attached:** `customer_analytics_dataset_MASTER.csv` holds customer data (age, region, spend and so on). It has nothing about sakura or Kyoto, so I didn't use it. - **Real data wasn't reachable:** I tried to download the Kyoto full-bloom series (Yasuyuki Aono's dataset, Osaka Metropolitan University), but the server refused the request. I generated a seeded synthetic series for 1953–2025 instead. The subtitle says "Placeholder data". **What it shows** - **Map of Japan:** a map of Japan with a magenta sakura flower marking Kyoto. - **Bloom chart:** each year is a five-petal flower, plotted by full-bloom date, with earlier dates higher up. A dashed line shows the trend, and hovering a flower shows its year and date. - **Colors:** - Regular years are pale blush. - **Peak** years are pink (`#ff8fb8`). I defined these as the earliest ~12% of bloom dates. - The **highest peak** is magenta (`#e6007e`). It's the single earliest bloom, and the chart labels it. I picked that peak definition because you didn't specify one. If you meant something else, such as the latest blooms, tell me and I'll change it. **To use real data** Attach the Kyoto bloom CSV, or the Aono `.xls` saved as CSV, with year and day-of-year columns. I'll replace the placeholder series with it. The peak and highest-peak colors will then be computed from the real dates.3e:T934,const W = 380 + 720 + 48, H = 460 + 110; function composeSVG() { const ns = "http://www.w3.org/2000/svg"; const root = document.createElementNS(ns, "svg"); root.setAttribute("xmlns", ns); root.setAttribute("width", W); root.setAttribute("height", H); root.setAttribute("viewBox", `0 0 ${W} ${H}`); root.setAttribute("font-family", "system-ui, sans-serif"); const legend = colors.domain.map((n, i) => `${n}`).join(""); root.innerHTML = ` Sakura full bloom in Kyoto, Japan Placeholder data, 1953–2025 · magenta = earliest bloom, pink = earliest ~12% of years${legend}`; for (const [el, x] of [[map, 8], [chart, 396]]) { const s = (el.tagName === "svg" ? el : el.querySelector("svg")).cloneNode(true); s.setAttribute("x", x); s.setAttribute("y", 100); s.setAttribute("color", "#333"); root.appendChild(s); } return root; } const saveBlob = (blob, name) => { const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = name; a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 1000); }; const svgString = () => new XMLSerializer().serializeToString(composeSVG()); const savePNG = () => new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { const c = document.createElement("canvas"); c.width = W * 2; c.height = H * 2; const g = c.getContext("2d"); g.scale(2, 2); g.drawImage(img, 0, 0); c.toBlob(b => { saveBlob(b, "kyoto-sakura.png"); resolve(); }, "image/png"); }; img.onerror = reject; img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgString()); }); const btn = (label, fn) => Object.assign(html``, {onclick: fn}); display(html`

${btn("⬇ Save PNG", savePNG)}${btn("⬇ Save SVG", () => saveBlob(new Blob([svgString()], {type: "image/svg+xml"}), "kyoto-sakura.svg"))}

`); display(composeSVG());3f:T7df,const plotSVG = el => d3.greatest(el.tagName === "svg" ? [el] : el.querySelectorAll("svg"), s => +s.getAttribute("width")); function composeSVG2() { const ns = "http://www.w3.org/2000/svg"; const root = document.createElementNS(ns, "svg"); root.setAttribute("xmlns", ns); root.setAttribute("width", W); root.setAttribute("height", H); root.setAttribute("viewBox", `0 0 ${W} ${H}`); root.setAttribute("font-family", "system-ui, sans-serif"); const legend = colors.domain.map((n, i) => `${n}`).join(""); root.innerHTML = ` Sakura full bloom in Kyoto, Japan Placeholder data, 1953–2025 · magenta = earliest bloom, pink = earliest ~12% of years${legend}`; for (const [el, x] of [[map, 8], [chart, 396]]) { const s = plotSVG(el).cloneNode(true); s.setAttribute("x", x); s.setAttribute("y", 100); s.setAttribute("color", "#333"); s.style.background = "white"; root.appendChild(s); } return root; } const svgStr2 = () => new XMLSerializer().serializeToString(composeSVG2()); const savePNG2 = () => new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { const c = document.createElement("canvas"); c.width = W * 2; c.height = H * 2; const g = c.getContext("2d"); g.scale(2, 2); g.drawImage(img, 0, 0); c.toBlob(b => { saveBlob(b, "kyoto-sakura.png"); resolve(); }, "image/png"); }; img.onerror = reject; img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgStr2()); }); display(html`

${btn("⬇ Save PNG", savePNG2)}${btn("⬇ Save SVG", () => saveBlob(new Blob([svgStr2()], {type: "image/svg+xml"}), "kyoto-sakura.svg"))}

`); display(composeSVG2());40:[{"id":"8c1cb10870531a4ccdee2b3340db15a8920ab4a9108ae5522553d03b429095559bd25e7ceef5a66ffa4120edc761cb3e6133ab0ca41f1631f567efda8bcfef08","href":"https://static.observableusercontent.com/files/8c1cb10870531a4ccdee2b3340db15a8920ab4a9108ae5522553d03b429095559bd25e7ceef5a66ffa4120edc761cb3e6133ab0ca41f1631f567efda8bcfef08","name":"customer_analytics_dataset_MASTER.csv","type":"text/csv","lastModified":1793648145468,"size":25065}] 38:{"id":"97c7fca88a24394e","slug":"kyoto-sakura-blooming-dates-visualization","title":"Kyoto sakura blooming dates visualization","thumbnail":"88bd861d0790d3da2668d89e91bc8763c42a3154c3bf535a731fd02a2a017101","access_level":"public","create_time":"$D2026-11-02T23:46:12.225Z","update_time":"$D2026-11-02T23:46:12.225Z","view_time":null,"first_public_time":"$D2026-11-02T23:46:19.201Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7d2f51ab81bd7d9f","login":"hukkyshibaseki","name":"HukkyShibaseki ","avatar_url":"https://avatars-next.observableusercontent.com/7d87e3ee3b453a3cf51237622436a2ada8c7c38611d2622928f9f6c7b9e1b1f2","tier":"pro_2026","bio":"","followed_by_you":false,"follows_you":false},"version":47,"publish_version":47,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba664cbad17a4ec6","login":"hukkyshibaseki","name":"HukkyShibaseki ","avatar_url":"https://avatars-next.observableusercontent.com/711472baf806b88749e1f6db0ef20473cc1235d09dad35e6a53346aa1f5ebe2b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"7d2f51ab81bd7d9f","login":"hukkyshibaseki","name":"HukkyShibaseki ","avatar_url":"https://avatars-next.observableusercontent.com/7d87e3ee3b453a3cf51237622436a2ada8c7c38611d2622928f9f6c7b9e1b1f2","tier":"pro_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Kyoto sakura blooming dates visualization","cells":[{"id":1,"value":"can you create a visualization that represent japan and using their Kyoto sakura blooming dates data. add the sakura flowers and use pink for the peak and magenta for the highest peak flowers","pinned":false,"hidden":false,"mode":"md","author":"user","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":[{"name":"customer_analytics_dataset_MASTER.csv","size":25065,"type":"file","mimeType":"text/csv"}],"output":"$undefined","database":"$undefined"},{"id":2,"value":"const f = FileAttachment(\"customer_analytics_dataset_MASTER.csv\");\nconst raw = await f.text();\ndisplay(raw.slice(0, 600));","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Peek at attached file","tool":{"id":"toolu_01CPVirbGJxuCwkAj5ryWgub","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"The attached file doesn't have anything to do with sakura, so I need to find real data instead. I'm going to try fetching Yasuyuki Aono's Kyoto full-flowering dates from the Osaka Prefecture University page, going through a proxy.\n\n","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"The attached file is customer analytics data, not sakura data. I'll try to load the Kyoto full-flowering dates from Yasuyuki Aono's published dataset.","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const r = await fetch(\"http://atmenv.envi.osakafu-u.ac.jp/aono/kyophenotemp4/\", {proxy: true});\ndisplay(r.ok);\nconst t = r.ok ? await r.text() : \"\";\ndisplay(t.slice(0, 1500));","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Try fetching Aono Kyoto data","tool":{"id":"toolu_01SZZVqcW6kLscAttba5uFBB","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"I'm looking for the same dataset on other sources, like GitHub mirrors or a CDN link, since the TidyTuesday repo doesn't seem to have it. Kaggle is another option I want to check.\n\nI'm going to try the https version of the Aono link, since the other mirror options are uncertain.\n\n","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"const urls = [\"https://atmenv.envi.osakafu-u.ac.jp/aono/kyophenotemp4/\",\"http://atmenv.envi.osakafu-u.ac.jp/omu-content/uploads/sites/1215/2015/10/KyotoFullFlowerJp_1.xls\",\"https://cdn.jsdelivr.net/gh/rfordatascience/tidytuesday/data/2025/2025-04-01/readme.md\"];\nfor (const u of urls) { try { const r = await fetch(u, {proxy:true}); const t = await r.text(); display(u + \" \" + r.ok + \" \" + t.slice(0,200)); } catch(e) { display(u + \" ERR \" + e.message); } }","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Try alternative sources","tool":{"id":"toolu_015fLffN4oAFPhGJTEavJznk","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"I'm weighing whether to try a few GitHub mirrors or other sources for the data, but guessing URLs seems unlikely to work. Recalling known figures from memory isn't reliable enough, so I'm leaning toward building the visualization with a clearly labeled approximate dataset.\n\nI'm settling on the approach: since I can't reliably recall the exact historical bloom dates, I'll build the visualization around clearly labeled illustrative data that can be swapped for real records later, with pink marking the earliest-blooming years and magenta marking the single earliest.\n\nNext I'm laying out the page: a map of Japan on the left with a flower marking Kyoto, and on the right a strip chart where each year gets a flower placed by its bloom day. I'm considering whether to put both in one plot or use two side by side, and I'm leaning toward two plots with custom five-petal flower symbols.\n\n","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"The Kyoto dataset couldn't be fetched because the server blocks it, so I'm building the visualization with a labeled placeholder series that can be swapped for the real CSV later.\n\n","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import japan from \"npm:world-atlas/countries-50m.json\" with {type: \"json\"};","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Load map data","tool":{"id":"toolu_01MP4Lys4eXcYc7wCNJGCWSr","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// PLACEHOLDER data (synthetic, seeded) — replace with real Kyoto full-flowering day-of-year per year:\n// const bloom = (await FileAttachment(\"kyoto.csv\").csv({typed:true})).map(d => ({year: d.year, doy: d.doy}));\nconst rnd = d3.randomNormal.source(d3.randomLcg(7))(0, 3.5);\nconst bloom = d3.range(1953, 2026).map(year => ({year, doy: Math.round(103 - (year - 1953) * 0.2 + rnd())}));\nbloom.find(d => d.year === 2021).doy = 85; // keep an extreme early year\nconst sorted = d3.sort(bloom, d => d.doy);\nconst cutoff = sorted[Math.floor(bloom.length * 0.12)].doy;\nconst record = sorted[0].doy;\nconst level = d => d.doy === record ? \"Highest peak\" : d.doy <= cutoff ? \"Peak\" : \"Regular\";\nconst data = bloom.map(d => ({...d, level: level(d), date: d3.timeFormat(\"%b %d\")(new Date(2021, 0, d.doy))}));\ndisplay(Inputs.table(data.filter(d => d.level !== \"Regular\")));","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Build placeholder bloom data and classify","tool":{"id":"toolu_017our4qPApVrDgHJRHtfoHE","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"The random generator came out at 2013 as the record, which is fine since it's just a placeholder. Next I'm moving on to the plots.\n\n","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$3c","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Map of Japan plus sakura flower chart","tool":{"id":"toolu_01C1WV4uhBDtqZo8CqhNqGHV","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"I'm checking whether the y-axis is reversed so earlier values sit at the top, and it is, since I set reverse with an increasing domain. The label's up arrow matches that. The flower's 30px petals look big on the map, but that's acceptable, so I'm calling this done and will say so plainly.\n\n","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"can you make the image and the graph to savable ?","pinned":false,"hidden":false,"mode":"md","author":"user","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":[],"output":"$undefined","database":"$undefined"},{"id":17,"value":"I'm weighing how to add SVG and PNG download buttons for the visualization, since the chart's title and legend are HTML rather than SVG, so a plain SVG export won't capture them. I'm considering whether to merge the map and chart into one SVG, then settling on simpler separate buttons, and I'm looking at either serializing each figure with foreignObject or drawing the titles onto a canvas for the PNG.\n\nI'm going to wrap each figure in an SVG with foreignObject for the export, but canvas tainting makes that risky in Chrome, so I'll export just the SVG elements and draw the titles as canvas text. My plan is one composed SVG that places both charts side by side under a title and a manual legend, with a font and a black root color set, then download it as SVG and as a 2x PNG.\n\n","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$3e","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Add PNG/SVG download buttons with preview","tool":{"id":"toolu_019JsTMY2VUyYZCbqM2EFDuP","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"I found the cause: for the chart, querySelector(\"svg\") grabbed the legend swatch instead of the plot. I'll change it to pick the plot svg by a direct child selector or by its plot class and 720 width, or else take the widest svg among the element's querySelectorAll(\"svg\") results.\n\n","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"The chart export picked up the legend swatch instead of the plot, so I'm fixing that.","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$3f","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Fix export and show preview with buttons","tool":{"id":"toolu_01AQjGvg3nj9QmLKCTaCSx2W","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"The visualization now has two download buttons: **⬇ Save PNG** and **⬇ Save SVG**. I haven't clicked them, so the downloads themselves are untested.\n\n- **What's saved:** both buttons save the map of Japan and the bloom chart together as one image. The image also has a title, a subtitle and the color legend: Regular, Peak, Highest peak.\n- **PNG:** it's saved at 2× resolution, so it stays sharp when printed or used in slides.\n- **SVG:** it's vector, so you can edit or scale it in Illustrator, Figma or Inkscape.\n- **Preview:** the exact image that gets saved is shown under the buttons.\n\nI fixed an earlier bug where the chart export grabbed the legend swatch instead of the plot. The preview now shows the correct plot.\n\nThe image still uses the **placeholder bloom data**, and its subtitle says so. Once you send the real Kyoto CSV, I'll swap it in and the saved images will update.","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"2"}} 33:null