2e:null 2f:["$","title",null,{"children":"Memory Blossoms Histogram | Kie Ichikawa | Observable"}] 34:[{"id":"03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","href":"https://static.observableusercontent.com/files/03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","name":"peak-bloom.csv","type":"text/csv","lastModified":1624767346095.485,"size":58445}] 32:{"id":"92f47888ad4107e0","slug":"memory-blossoms-histogram","title":"Memory Blossoms Histogram","thumbnail":"eb7f50e42ba22caac7b076f48ee478cfcabd971feefabc848623b1510b6b7e1e","access_level":"public","create_time":"$D2021-06-27T04:11:02.553Z","update_time":"$D2021-08-17T05:37:18.850Z","view_time":null,"first_public_time":"$D2021-08-06T01:34:07.599Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":"starter_2024"},"version":294,"publish_version":294,"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 Histogram","cells":[{"id":144,"value":"# Memory Blossoms *Histogram*\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":211,"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":288,"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":226,"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: [Histogram](https://observablehq.com/@d3/histogram), [Time thresholds for d3.bin](https://observablehq.com/@d3/d3-bin-time-thresholds)\n

\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .attr(\"fill\", color)\n .attr(\"opacity\", 0.7)\n .selectAll(\"rect\")\n .data(bins)\n .join(\"rect\")\n .attr(\"x\", (d) => x(d.x0) + 1)\n .attr(\"width\", (d) => Math.max(0, x(d.x1) - x(d.x0) - 1))\n .attr(\"y\", (d) => y(d.length))\n .attr(\"height\", (d) => y(0) - y(d.length));\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":29,"value":"x = d3\n .scaleLinear()\n .domain([bins[0].x0, bins[bins.length - 1].x1])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(bins, d => d.length)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"dateFormat = d3.timeFormat(\"%B-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"dateFormat(-2201800000000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"dateFormat(-2201700000000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .tickFormat(d3.timeFormat(\"%B-%d\"))\n .ticks(width / 80)\n .tickSizeOuter(0)\n )\n .call((g) =>\n g\n .append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#2d1e3e\")\n // .attr(\"font-weight\", \"bold\")\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":19,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 4)\n .attr(\"fill\", \"#2d1e3e\")\n .attr(\"text-anchor\", \"start\")\n // .attr(\"font-weight\", \"bold\")\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":9,"value":"color = \"#edd1cb\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"numBins = Math.sqrt(filteredBlossoms.length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"filteredBlossoms.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"bins = d3\n .bin()\n .value((d) => d.date)\n .thresholds(numBins)(filteredBlossoms)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"[\n d3.min(filteredBlossoms, (d) => d.date),\n d3.median(filteredBlossoms, (d) => d.date),\n d3.max(filteredBlossoms, (d) => d.date)\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"display(bins)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"filteredBlossoms = {\n return _.map(blossoms, (d) => {\n return {\n year: d.year,\n date: d.date\n };\n }).filter((d) => !isNaN(d.date));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"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":13,"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":11,"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: \"Date →\", y: \"↑ Number of peak-bloom date\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"function display(bins) {\n const format = d3.timeFormat(\"%B-%d\");\n return md`| Peak-bloom date | # |\n|-----|-----|\n${bins\n .slice(0, 35)\n .map((d) => `| ${format(d.x1)} | ${d.length} |`)\n .join(\"\\n\")}\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"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"