2e:null 2f:["$","title",null,{"children":"Memory Blossoms Radial line chart | Kie Ichikawa | Observable"}] 34:T4bb,chart = { const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); svg .append("path") .datum(blossoms.filter(radial.defined())) .attr("fill", "none") .attr("stroke", "#ccc") .attr("stroke-width", "0.5") .attr("d", radial); let areaGradient = svg .append("defs") .append("radialGradient") .attr("id", "areaGradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "100%"); areaGradient .append("stop") .attr("offset", "0%") .attr("stop-color", "#edd1cb") .attr("stop-opacity", 1); areaGradient .append("stop") .attr("offset", "60%") .attr("stop-color", "#c3819c") .attr("stop-opacity", 1); areaGradient .append("stop") .attr("offset", "100%") .attr("stop-color", "#2d1e3e") .attr("stop-opacity", 1); svg .append("path") .datum(blossoms) .attr("fill", "none") .attr("stroke", "url(#areaGradient)") .attr("stroke-width", "0.5") .attr("d", radial); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }35:[{"id":"03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","href":"https://static.observableusercontent.com/files/03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","name":"peak-bloom.csv","type":"text/csv","lastModified":1624790074981.711,"size":58445}] 32:{"id":"3a1a3b1570b5cb14","slug":"memory-blossoms-radial-line-chart","title":"Memory Blossoms Radial line chart","thumbnail":"fb72e45ca7172a89a73b9049c81d84e3c7130977c0045f513a3a5d6c6a649c43","access_level":"public","create_time":"$D2021-06-27T10:28:34.754Z","update_time":"$D2021-08-17T05:35:26.641Z","view_time":null,"first_public_time":"$D2021-08-06T01:35:52.149Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":"starter_2024"},"version":486,"publish_version":486,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d4542cfe1860f7f","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":null}],"members":[{"type":"individual","id":"5d4542cfe1860f7f","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c5095168efae6140","slug":"memory-blossoms","title":"Memory Blossoms","owner":{"id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa"}},"type":"notebook","body":{"title":"Memory Blossoms Radial line chart","cells":[{"id":448,"value":"# Memory Blossoms *Radial line chart*\n## *Cherry blossom peak-bloom date in Kyoto, Japan, from 800 to 2021*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"

Memory Blossoms, a data visualized object, is a collection of memories of the living and the deceased over a lifetime, and represents the celebration of Spring in Japanese culture. It is an exploration of the interrelationships between time, location, and forms.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"

Here is [my blog post](https://medium.com/@kieich?p=a481498f7a58) that explains the design process of the project. Visit [this notebook](https://observablehq.com/@kieich/memory-blossoms-create-your-own) and create your own *Memory Blossoms*!

\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"

\n- Data: [Phenological data series of cherry tree ﬂowering](http://atmenv.envi.osakafu-u.ac.jp/aono/kyophenotemp4/) in Kyoto, Japan, from 800 AD to 2021, collected by Yasuyuki Aono, Keiko Kazui, and Shizuka Saito\n- Reference: [Day 17 - Radial Bar Chart](https://observablehq.com/@thetylerwolf/day-17-radial-bar-chart)\n

\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"xAxis = (g) =>\n g.attr(\"text-anchor\", \"middle\").call((g) =>\n g\n .selectAll(\"g\")\n .data([\n \"800\",\n \"900\",\n \"1000\",\n \"1100\",\n \"1200\",\n \"1300\",\n \"1400\",\n \"1500\",\n \"1600\",\n \"1700\",\n \"1800\",\n \"1900\",\n \"2000\"\n ])\n\n .join(\"g\")\n .attr(\n \"transform\",\n (d, i, arr) => `\n rotate(${((i - 3) * 360) / arr.length})\n translate(${innerRadius + 20},0)\n `\n )\n .call((g) =>\n g\n .append(\"text\")\n .attr(\"transform\", (d, i, arr) =>\n (((i - 3) * 360) / arr.length) % 360 > 180\n ? \"rotate(90)translate(0,16)\"\n : \"rotate(-90)translate(0,-9)\"\n )\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", 10)\n .attr(\"fill\", \"#2d1e3e\")\n .text((d) => d)\n )\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"yAxis = (g) =>\n g\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .call((g) =>\n g\n .selectAll(\"g\")\n .data(scaleRadius.ticks())\n .join(\"g\")\n .attr(\"fill\", \"none\")\n .call((g) =>\n g\n .append(\"circle\")\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-opacity\", 0.1)\n .attr(\"r\", scaleRadius)\n )\n .call((g) =>\n g\n .append(\"text\")\n .attr(\"y\", (d) => -scaleRadius(d))\n .attr(\"dy\", \"0.35em\")\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 5)\n .data(yTicks)\n .join(\"g\")\n .text((d) => d)\n .clone(true)\n .attr(\"fill\", \"#2d1e3e\")\n .attr(\"stroke\", \"none\")\n )\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"yTicks = [\"Apr01\", \"Apr08\", \"Apr15\", \"Apr22\", \"Apr29\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"scaleRadius.ticks(5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"innerRadius = height / 2.35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"scaleAngle.range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"scaleAngle.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"scaleAngle = d3\n .scaleLinear()\n .domain(d3.extent(blossoms, (d) => d.year))\n .range([0, 2 * Math.PI])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"scaleRadius.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"scaleRadius = d3\n .scaleTime()\n .domain([d3.min(blossoms, (d) => d.date), d3.max(blossoms, (d) => d.date)])\n .range([0, 200])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"radial = d3\n .lineRadial()\n .angle((d) => scaleAngle(d.year))\n .radius((d) => scaleRadius(d.date))\n .curve(d3.curveCatmullRomOpen)\n // .defined((d) => d.date > 0)\n .defined((d) => !isNaN(d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"parseDate = {\n const parseDate = d3.utcParse(\"%m%d\");\n return parseDate;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"blossoms = Object.assign(\n d3\n .csvParse(await FileAttachment(\"peak-bloom.csv\").text())\n .map(({ year, date, ratio }) => ({\n year: d3.timeFormat(\"%Y\")(new Date(year)),\n date: parseDate(\"0\" + date) ? parseDate(\"0\" + date) : undefined\n })),\n { title: \"Cherry Blossom Peak-bloom Date\", y: \" date\" },\n { x: \"Year →\", y: \"↑ Number of peak-bloom date\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"