2e:null 2f:["$","title",null,{"children":"Memory Blossoms Scatterplot | Kie Ichikawa | Observable"}] 34:[{"id":"03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","href":"https://static.observableusercontent.com/files/03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","name":"peak-bloom.csv","type":"text/csv","lastModified":1624680302887.318,"size":58445}] 32:{"id":"567d08e3dc50b03b","slug":"memory-blossoms-scatterplot","title":"Memory Blossoms Scatterplot","thumbnail":"6fedd29c9d79b622e1bc5556947d6db2f7c80afa2b3c46e710d9f560ff14e5a1","access_level":"public","create_time":"$D2021-06-26T03:34:32.003Z","update_time":"$D2021-09-29T04:57:39.092Z","view_time":null,"first_public_time":"$D2021-08-06T01:37:29.329Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":"starter_2024"},"version":516,"publish_version":516,"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":0,"collection":{"id":"c5095168efae6140","slug":"memory-blossoms","title":"Memory Blossoms","owner":{"id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa"}},"type":"notebook","body":{"title":"Memory Blossoms Scatterplot","cells":[{"id":467,"value":"# Memory Blossoms *Scatterplot*\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":480,"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":508,"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":484,"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- Caveat: Please do not use Firefox Developer Edition to see the chart. It works on Chrome and Safari.\n- Reference: [Introduction to SVG and D3.js](https://observablehq.com/@sxywu/introduction-to-svg-and-d3-js), [Scatterplot with Shapes](https://observablehq.com/@d3/scatterplot-with-shapes), [Japan’s cherry blossoms are emerging increasingly early](https://www.economist.com/graphic-detail/2017/04/07/japans-cherry-blossoms-are-emerging-increasingly-early)\n

\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .selectAll(\"g\")\n .data(filteredBlossoms, (d) => d.year)\n .join((enter) => {\n const g = enter\n .append(\"g\")\n .attr(\n \"transform\",\n (d) =>\n `translate(${x(d.year)},${y(d.date)})scale(${petalScale(d.date)})`\n );\n\n g.selectAll(\"path\")\n .data((d) =>\n _.times(d.numPetals, (i) =>\n Object.assign({}, d, { rotate: i * (360 / d.numPetals) })\n )\n )\n .join(\"path\")\n .attr(\"transform\", (d) => `rotate(${d.rotate})scale(0.5)`)\n .attr(\"fill\", function (d) {\n return color(d.date);\n })\n .attr(\"fill-opacity\", 0.3)\n .attr(\"d\", (d) => d.path)\n .attr(\"stroke-width\", 10)\n .attr(\"stroke\", function (d) {\n return color(d.date);\n });\n });\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n svg.append(\"g\").call(grid);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"petalScale = d3\n .scaleLinear()\n .domain([\n d3.min(filteredBlossoms, (d) => d.date),\n d3.max(filteredBlossoms, (d) => d.date)\n ])\n .range([0.2, 0.15])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"sizeScale = d3\n .scaleLinear()\n .domain([\n d3.min(filteredBlossoms, (d) => d.date),\n d3.max(filteredBlossoms, (d) => d.date)\n ])\n .range([5, 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"color = d3\n .scaleTime()\n .domain([\n d3.min(filteredBlossoms, (d) => d.date),\n d3.max(filteredBlossoms, (d) => d.date)\n ])\n .range(petalColors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"petalColors = [\"#edd1cb\", \"#3f284f\", \"#2d1e3e\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80))\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g\n .append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"#2d1e3e\")\n .attr(\"text-anchor\", \"end\")\n .text(blossoms.x)\n )\n .call((g) => g.selectAll(\".tick line\").attr(\"stroke\", \"#2d1e3e\"))\n .call((g) => g.selectAll(\".tick text\").attr(\"fill\", \"#2d1e3e\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g\n .append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"#2d1e3e\")\n .attr(\"text-anchor\", \"start\")\n .text(blossoms.y)\n )\n .call((g) => g.selectAll(\".tick line\").attr(\"stroke\", \"#2d1e3e\"))\n .call((g) => g.selectAll(\".tick text\").attr(\"fill\", \"#2d1e3e\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"grid = (g) =>\n g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call((g) =>\n g\n .append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", (d) => 0.5 + x(d))\n .attr(\"x2\", (d) => 0.5 + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom)\n )\n .call((g) =>\n g\n .append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", (d) => 0.5 + y(d))\n .attr(\"y2\", (d) => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"x = d3\n .scaleLinear()\n .domain(d3.extent(blossoms, (d) => d.year))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"y = d3\n .scaleTime()\n .domain([d3.min(blossoms, (d) => d.date), d3.max(blossoms, (d) => d.date)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"petalPath = `M0 0 C50 50 50 100 0 100 C-50 100 -50 50 0 0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"filteredBlossoms = {\n return _.map(blossoms, (d, i) => {\n return {\n year: d.year,\n date: d.date,\n path: petalPath,\n numPetals: 5\n };\n }).filter((d) => !isNaN(d.date));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"blossoms = Object.assign(\n d3\n .csvParse(await FileAttachment(\"peak-bloom.csv\").text())\n .map(({ year, date }) => ({\n year: d3.timeFormat(\"%Y\")(new Date(year)),\n date: d3.utcParse(\"%m%d\")(\"0\" + date)\n ? d3.utcParse(\"%m%d\")(\"0\" + date)\n : undefined\n })),\n { x: \"Year →\", y: \"↑ Peak-bloom date\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"margin = ({ top: 25, right: 20, bottom: 35, left: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"