2e:null 2f:["$","title",null,{"children":"Memory Blossoms Create your own | Kie Ichikawa | Observable"}] 34:T655,function colorSchemePicker(config = {}) { let { value, title, description, height, w, schemes } = config; const form = html``; const dropdown = html`

${styles()} ${title ? title : ""}

`; value = value ? schemes.find((d) => d.name === value) : schemes[0]; form.value = value.colors ? value.colors : value.k ? d3[`scheme${value.name}`][value.k] : d3[`scheme${value.name}`]; let valueCont = html`

`; let valueViewer = getColorViewer(value, form); valueCont.append(valueViewer); dropdown.append(valueCont); const dropdownContainer = html`

${schemes.map((scheme) => { let colorViewer = getColorViewer(scheme, form); colorViewer.onclick = () => { valueCont.removeChild(valueCont.firstChild); valueViewer = getColorViewer(scheme, form); valueCont.append(valueViewer); form.value = valueViewer.value; form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; return html`

${colorViewer}

`; })}

`; dropdown.append(dropdownContainer); form.append(dropdown); if (description) form.append( html`

${description}

` ); return form; }35:[{"id":"03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","href":"https://static.observableusercontent.com/files/03a0f5388b4d9d2feb757e1775f56309c66a8fdb0d086c1d8c756d667d25041fc70bb8e8ea4f15370cb578e251d514140a963d63ae03427b4ea7c6e1ddac630d","name":"peak-bloom.csv","type":"text/csv","lastModified":1626317978260.47,"size":58445}] 32:{"id":"cde038bf23799688","slug":"memory-blossoms-create-your-own","title":"Memory Blossoms Create your own","thumbnail":"c7bb1a99d5f4ac51460cedbdee9388800d9a76b65ac8f54253851b100cbcd34e","access_level":"public","create_time":"$D2021-07-15T02:03:36.897Z","update_time":"$D2021-08-17T05:34:48.616Z","view_time":null,"first_public_time":"$D2021-08-06T01:37:09.013Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa","avatar_url":"https://avatars-next.observableusercontent.com/7a081ef44cbd0f1906aa8b96b7b032100b6fa577d2ddd6efe248dcebd94ec4df","tier":"starter_2024"},"version":1355,"publish_version":1355,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"c5095168efae6140","slug":"memory-blossoms","title":"Memory Blossoms","owner":{"id":"b1b2f6ae7943b5ab","login":"kieich","name":"Kie Ichikawa"}},"type":"notebook","body":{"title":"Memory Blossoms Create your own","cells":[{"id":1186,"value":"# Memory Blossoms *Create your own*\n## *Cherry blossom peak-bloom date in Kyoto, Japan, from 1900 to 2021*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"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.\n

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

Here is [my blog post](https://medium.com/@kieich?p=a481498f7a58) that explains the design process of the project.

\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"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: [Radial Area Chart](https://observablehq.com/@d3/radial-area-chart)\n- Disclaimer: Some data are missing (e.g. flowering date in 1945). Missing values are filled with median date. Also, for aesthetics purposes, up to 6 data points are replaced with dummy data.\n- Ask for help! If anyone has any suggestions on how to create petals without changing some data points with dummy data, please let me know :) Any advice would be appreciaated.\n

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

Color palettes

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

Winter

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"displayPalettes(colorWinter)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"

Spring

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"displayPalettes(colorSpring)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"

Summer

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"displayPalettes(colorSummer)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"

Autumn

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"displayPalettes(colorAutumn)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"

Select your color palette

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"viewof color = colorSchemePicker({\n // title: \"Custom scheme\",\n height: 500,\n // description: \"This is a collection of custom schemes\",\n w: 700,\n value: \"Winter\",\n schemes: [\n {\n name: \"Winter\",\n colors: colorWinter\n },\n {\n name: \"Spring\",\n colors: colorSpring\n },\n {\n name: \"Summer\",\n colors: colorSummer\n },\n {\n name: \"Autumn\",\n colors: colorAutumn\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"

Create your own Memory Blossoms

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"viewof viewYears = columns({\n start: slider({\n min: 1900,\n max: 2021,\n step: 1,\n value: 1900,\n theme: \"default-round\",\n background: {\n type: \"double\",\n colors: [\"white\", color[0]]\n }\n }),\n end: slider({\n min: 1910,\n max: 2021,\n step: 1,\n value: 2021,\n theme: \"default-round\",\n background: {\n type: \"double\",\n colors: [color[0], \"white\"]\n }\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"chart = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [-width / 2.75, -height / 2, width, height])\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\");\n\n svg\n .append(\"path\")\n .style(\"fill\", \"url(#areaGradient)\")\n .attr(\"d\", line.radius((d) => y(d.date))(filteredBlossoms));\n\n svg.append(\"g\").call(stamen);\n\n let areaGradient = svg\n .append(\"defs\")\n .append(\"radialGradient\")\n .attr(\"id\", \"areaGradient\")\n .attr(\"x1\", \"0%\")\n .attr(\"y1\", \"0%\")\n .attr(\"x2\", \"100%\")\n .attr(\"y2\", \"100%\");\n\n areaGradient\n .append(\"stop\")\n .attr(\"offset\", \"0%\")\n .attr(\"stop-color\", colorPicker(diff))\n .attr(\"stop-opacity\", 1);\n areaGradient\n .append(\"stop\")\n .attr(\"offset\", \"90%\")\n .attr(\"stop-color\", color[1])\n .attr(\"stop-opacity\", 0.3);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"point = Math.ceil(diff / 6) | 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"diff = years[1] - years[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"years = {\n now;\n const years = [];\n [...document.querySelectorAll(\"input[type=range]\")]\n .map((d) => parseFloat(d.value))\n .forEach((v, i) => years.push(v));\n\n return years;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"stamen = (g) =>\n g\n .call((g) =>\n g\n .append(\"path\")\n .style(\"fill\", \"white\")\n .attr(\"opacity\", 0.1)\n .attr(\"d\", line.radius((d) => yMin2(d.min3Date))(filteredBlossoms))\n )\n\n .call((g) =>\n g\n .append(\"path\")\n .style(\"fill\", \"white\")\n .attr(\"opacity\", 0.1)\n .attr(\"d\", line.radius((d) => yMin2(d.min2Date))(filteredBlossoms))\n )\n\n .call((g) =>\n g\n .append(\"path\")\n .style(\"fill\", colorPicker(diff))\n .attr(\"opacity\", 0.4)\n .attr(\"d\", line.radius((d) => yMin(d.min1Date))(filteredBlossoms))\n )\n\n .call((g) =>\n g\n .append(\"path\")\n .style(\"fill\", color[0])\n .attr(\"opacity\", 0.3)\n .attr(\"d\", line.radius((d) => yMin(d.min0Date))(filteredBlossoms))\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"yMin2 = d3\n .scaleTime()\n .domain([\n d3.min(filteredBlossoms, (d) => d.min2Date),\n d3.max(filteredBlossoms, (d) => d.min3Date)\n ])\n .range([innerRadius / 5, outerRadius / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"yMin = d3\n .scaleTime()\n .domain([\n d3.min(filteredBlossoms, (d) => d.min0Date),\n d3.max(filteredBlossoms, (d) => d.min1Date)\n ])\n .range([innerRadius / 15, outerRadius / 5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"colorPicker = (diff) => {\n let c;\n if (90 < diff) {\n c = color[9];\n } else if (80 < diff && diff <= 90) {\n c = color[8];\n } else if (70 < diff && diff <= 80) {\n c = color[7];\n } else if (60 < diff && diff <= 70) {\n c = color[6];\n } else if (50 < diff && diff <= 60) {\n c = color[5];\n } else if (40 < diff && diff <= 50) {\n c = color[4];\n } else if (30 < diff && diff <= 40) {\n c = color[3];\n } else if (diff <= 30) {\n c = color[2];\n }\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"innerRadius = {\n let iR;\n if (60 < diff) {\n iR = width / 8;\n } else if (35 < diff && diff <= 60) {\n iR = width / 8.5;\n } else if (diff <= 35) {\n iR = width / 9.5;\n }\n return iR;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"outerRadius = {\n let oR;\n if (50 < diff) {\n oR = width / 4 - margin;\n } else if (35 < diff && diff <= 50) {\n oR = width / 4.5 - margin;\n } else if (diff <= 35) {\n oR = width / 5 - margin;\n }\n return oR;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"startYear = parseInt(years[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"line = d3\n .lineRadial()\n .curve(d3.curveCatmullRomClosed)\n .angle((d) => x(d.year))\n// .defined((d) => !isNaN(d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"x = d3\n .scaleLinear()\n .domain([years[0], years[1]])\n .range([0, 2 * Math.PI])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"y = d3\n .scaleTime()\n .domain([\n d3.min(filteredBlossoms, (d) => d.date),\n d3.max(filteredBlossoms, (d) => d.date)\n ])\n .range([innerRadius, outerRadius])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"defDatePetal = (d, i) => {\n let datePetal;\n\n if (i % (i / point) == 0) {\n datePetal = new Date(\"1900-03-15\");\n } else {\n datePetal = d.date;\n }\n return datePetal;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"filteredBlossoms = {\n return _.map(blossoms, (d, i) => {\n return {\n year: d.year,\n date: defDatePetal(d, i),\n min3Date: d3.timeDay.offset(d.date, -97),\n min2Date: d3.timeDay.offset(d.date, -100),\n min1Date: d3.timeDay.offset(d.date, -127),\n min0Date: d3.timeDay.offset(d.date, -140)\n };\n })\n .filter((d) => d.year >= years[0])\n .filter((d) => d.year <= years[1]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"colorWinter = [\n \"#edd1cb\",\n \"#e6bdbc\",\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":859,"value":"colorSpring = [\n \"#f7c9aa\",\n \"#f6a47c\",\n \"#f47d57\",\n \"#ed503e\",\n \"#d92847\",\n \"#b91657\",\n \"#921c5b\",\n \"#691f55\",\n \"#451c47\",\n \"#221331\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"colorSummer = [\n \"#ffe800\",\n \"#ffd100\",\n \"#ffba00\",\n \"#ffa200\",\n \"#ff8b00\",\n \"#ff7400\",\n \"#ff5d00\",\n \"#ff4500\",\n \"#ff2e00\",\n \"#ff1700\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"colorAutumn = [\n \"#f3c000\",\n \"#e78c00\",\n \"#da6300\",\n \"#cb4100\",\n \"#bc2900\",\n \"#ac1847\",\n \"#9a0cc0\",\n \"#8505fd\",\n \"#6c01e7\",\n \"#4d0089\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"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: parseDate(\"0\" + date) ? parseDate(\"0\" + date) : parseDate(\"0414\")\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"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":43,"value":"margin = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"height = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1276,"value":"import {\n getColorViewer,\n styles\n} from \"@zechasault/color-schemes-and-interpolators-picker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"import { slider } from \"@bartok32/diy-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"import { columns } from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"import { displayPalettes } from \"@makio135/give-me-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"slide_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"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"