2e:null 2f:["$","title",null,{"children":"Memory Blossoms Area chart | Kie Ichikawa | Observable"}] 34:[{"id":"03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","href":"https://static.observableusercontent.com/files/03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","name":"peak-bloom.csv","type":"text/csv","lastModified":1624926339455.934,"size":58445}] 32:{"id":"f26d93f646c4fe90","slug":"memory-blossoms-area-chart","title":"Memory Blossoms Area chart","thumbnail":"84ba0473e7effbcede41a8756975dc31ca6f30d61042f1f76d63cf0580772f6e","access_level":"public","create_time":"$D2021-06-29T00:24:13.374Z","update_time":"$D2021-08-17T05:36:43.030Z","view_time":null,"first_public_time":"$D2021-08-06T01:34:54.767Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":"starter_2024"},"version":145,"publish_version":145,"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 Area chart","cells":[{"id":108,"value":"# Memory Blossoms *Area 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":117,"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":140,"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":121,"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: [Area with Missing Data](https://observablehq.com/@d3/area-with-missing-data) \n

\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n const gradient = DOM.uid();\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(area.defined()))\n .attr(\"fill\", \"#eee\")\n .attr(\"opacity\", 0.5)\n .attr(\"d\", area);\n\n svg\n .append(\"path\")\n .datum(blossoms)\n .attr(\"fill\", gradient)\n .attr(\"opacity\", 0.8)\n .attr(\"d\", area);\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"d3.min(blossoms, (d) => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"color.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"color.range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"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":82,"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":true,"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(\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":36,"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":38,"value":"area(blossoms)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"area = d3\n .area()\n .defined((d) => !isNaN(d.date))\n .x((d) => x(d.year))\n // .y0(y(0))\n .y0(y(d3.min(blossoms, (d) => d.date)))\n .y1((d) => y(d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"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":46,"value":"y(blossoms[14].date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"y(d3.min(blossoms, (d) => d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"y(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"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":23,"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":19,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"yearFormat = {\n const yearFormat = d3.timeFormat(\"%Y\");\n return yearFormat;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"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":8,"value":"blossoms = Object.assign(\n d3\n .csvParse(await FileAttachment(\"peak-bloom.csv\").text())\n .map(({ year, date }) => ({\n year: yearFormat(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: \"↑ Peak-bloom date\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"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"