2e:null 2f:["$","title",null,{"children":"Memory Blossoms Line chart | Kie Ichikawa | Observable"}] 34:[{"id":"03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","href":"https://static.observableusercontent.com/files/03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","name":"peak-bloom.csv","type":"text/csv","lastModified":1624599130046.73,"size":58445}] 32:{"id":"867ec588028c51b2","slug":"memory-blossoms-line-chart","title":"Memory Blossoms Line chart","thumbnail":"fdeea4f79764e58301c272cdb05e65913e130b3f0e22c224b69b68a9fdb64d9a","access_level":"public","create_time":"$D2021-06-25T05:31:08.069Z","update_time":"$D2021-08-17T05:36:04.187Z","view_time":null,"first_public_time":"$D2021-08-06T01:35:29.754Z","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":369,"publish_version":369,"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 Line chart","cells":[{"id":305,"value":"# Memory Blossoms *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":316,"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":364,"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":320,"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: [Line with Missing Data](https://observablehq.com/@d3/line-with-missing-data), [Gradient Encoding](https://observablehq.com/@d3/gradient-encoding)\n

\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"chart = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"fill\", \"none\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\");\n\n const gradient = DOM.uid();\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n svg\n .append(\"linearGradient\")\n .attr(\"id\", gradient.id)\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\n .attr(\"x1\", 0)\n .attr(\"y1\", height - margin.bottom)\n .attr(\"x2\", 0)\n .attr(\"y2\", margin.top)\n .selectAll(\"stop\")\n .data(d3.ticks(0, 1, 10))\n .join(\"stop\")\n .attr(\"offset\", (d) => d)\n .attr(\"stop-color\", color);\n\n svg\n .append(\"path\")\n .datum(blossoms.filter(line.defined()))\n // .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#ccc\")\n .attr(\"d\", line);\n\n svg\n .append(\"path\")\n .datum(blossoms)\n // .attr(\"fill\", \"none\")\n .attr(\"stroke\", gradient)\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", line);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"// legend({\n// color: d3.scaleSequential([0, 100], [\"#edd1cb\", \"#6e4071\", \"#2d1e3e\"]),\n// title: blossoms.title\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"color = d3\n .scaleOrdinal()\n .domain([d3.min(blossoms, (d) => d.date), d3.max(blossoms, (d) => d.date)])\n .range(petalColors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"petalColors = [\n \"#edd1cb\",\n \"#e6bdbc\",\n \"#dda9af\",\n \"#d194a4\",\n \"#c3819c\",\n \"#b37093\",\n \"#9f5f8a\",\n \"#8a5081\",\n \"#744375\",\n \"#5b3665\",\n \"#432a53\",\n \"#2d1e3e\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"line(blossoms)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"line = d3\n .line()\n .defined((d) => !isNaN(d.date))\n .x((d) => x(d.year))\n .y((d) => y(d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )\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":62,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(width / 120))\n .call((g) => g.select(\".domain\").remove())\n\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":57,"value":"d3.extent(blossoms, (d) => d.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"x = d3\n .scaleLinear()\n .domain(d3.extent(blossoms, (d) => d.year))\n // .nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"d3.min(blossoms, (d) => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"d3.max(blossoms, (d) => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"d3.timeFormat(\"%m%d\")(d3.median(blossoms, (d) => d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"d3.timeFormat(\"%m%d\")(d3.mean(blossoms, (d) => d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"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":30,"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 { title: \"Cherry Blossom Peak-bloom Date\", y: \" date\" },\n { x: \"Year →\", y: \"↑ Peak-bloom date\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"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":46,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"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"