2b:null 2c:["$","title",null,{"children":"spiral heatmap | historical precipitation in South Korea | Youjin Shin | 신유진 | Observable"}] 31:Ta6d,{ const svg = d3.create("svg").attr("width", width).attr("height", height); const container = svg .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); // Tooltip const tooltip = d3.select("body").append("div").attr("class", "tooltip"); const max = d3.max(data, (d) => d["precipitation(mm)"]); console.log("max", max); const arc = d3 .arc() .innerRadius((d) => radiusAxisScale(d.newYear)) // 안쪽 반지름 .outerRadius( (d) => radiusAxisScale(d.newYear) + radiusAxisScale.bandwidth() ) // 바깥쪽 반지름 .startAngle((d) => angleScaleArc(d.dayOfYear)) // 시작 각도 (라디안) (vertical start)s .endAngle((d) => angleScaleArc(d.dayOfYear + 1)); // 종료 각도 (라디안) container .selectAll("arcs") .data(data) .enter() .append("path") .attr("d", arc) // .attr("fill", (d) => colorScale(d["precipitation(mm)"] / max)) .attr("fill", (d) => getColors(d["precipitation(mm)"])) .attr("stroke", "black") .attr("stroke-width", 0); if (axisShown) { // axisLine container .selectAll("lines") .data(axisData) .enter() .append("line") .attr( "x1", (d) => radiusRange[0] * 1 * Math.cos(angleScaleAxis(d.dayOfYear)) ) .attr( "y1", (d) => radiusRange[0] * 1 * Math.sin(angleScaleAxis(d.dayOfYear + 0)) ) .attr( "x2", (d) => radiusRange[1] * 1.0 * Math.cos(angleScaleAxis(d.dayOfYear + 0)) ) .attr( "y2", (d) => radiusRange[1] * 1.0 * Math.sin(angleScaleAxis(d.dayOfYear + 0)) ) .attr("stroke", "#222") .attr("stroke-width", 1) // .attr("stroke-dasharray", "3, 2"); .attr("stroke-dasharray", (d, i) => { return i === 0 ? "2,0" : "2, 2"; }); // axisText const timeFormat = d3.timeFormat("%b"); container .selectAll("text") .data(axisData) .enter() .append("text") .attr( "x", (d) => radiusRange[1] * 1.05 * Math.cos(angleScaleAxis(d.dayOfYear + 15)) ) .attr( "y", (d) => radiusRange[1] * 1.05 * Math.sin(angleScaleAxis(d.dayOfYear + 15)) ) .text((d) => timeFormat(d.newDate)); container .selectAll("text2") .data([2000, 2010, 2020]) .enter() .append("text") .attr("class", "years") .attr("x", 3) .attr("y", (d) => -radiusAxisScale(d)) .text((d) => d); } container .append("text") .attr("x", 0) .attr("y", 5) .text(selected) .attr("class", "city"); return svg.node(); }32:[{"id":"8b14720b2e34f1565660900b3707ea94857b162665d2673dcacc825e61864b64b6b4b0ea8cb8208b34c6ccabd2e48cf7f4ffde9d8c7ba93c483305bc66c99db7","href":"https://static.observableusercontent.com/files/8b14720b2e34f1565660900b3707ea94857b162665d2673dcacc825e61864b64b6b4b0ea8cb8208b34c6ccabd2e48cf7f4ffde9d8c7ba93c483305bc66c99db7","name":"precipitation.csv","type":"text/csv","lastModified":1721222822919.929,"size":135817},{"id":"28c873683e28aa8293f873100429a2c6d900953bb7abdd7cd5553ce0a87a9c1a6ea634f1b2c4c66de810491826d9519ed5b77ce56bd9f4d50175518991d778bc","href":"https://static.observableusercontent.com/files/28c873683e28aa8293f873100429a2c6d900953bb7abdd7cd5553ce0a87a9c1a6ea634f1b2c4c66de810491826d9519ed5b77ce56bd9f4d50175518991d778bc","name":"precipitation_seoul.csv","type":"text/csv","lastModified":1721318354569.611,"size":124858},{"id":"02a42eff5f2ad8aa4e3a81a840cbf78bb94ffa4c92a0a50ef93ec66a9ff2581dfd18dd7a255626d57fe8ed4ee24c0cdb14e984492ff72d9f28723c6488e6e12f","href":"https://static.observableusercontent.com/files/02a42eff5f2ad8aa4e3a81a840cbf78bb94ffa4c92a0a50ef93ec66a9ff2581dfd18dd7a255626d57fe8ed4ee24c0cdb14e984492ff72d9f28723c6488e6e12f","name":"gwangju_07182025.csv","type":"text/csv","lastModified":1752888736334.015,"size":674},{"id":"ba52d8a73d43441b6a1decc5e29eab3156abb34a36cf163d9c82447fc4354bbf32aa3bb249f5c3220d6e171ef19007751093a35748ddf164a3ff4cfc53e3d52a","href":"https://static.observableusercontent.com/files/ba52d8a73d43441b6a1decc5e29eab3156abb34a36cf163d9c82447fc4354bbf32aa3bb249f5c3220d6e171ef19007751093a35748ddf164a3ff4cfc53e3d52a","name":"seoul_07182025@1.csv","type":"text/csv","lastModified":1752889569511.577,"size":130006},{"id":"a3043647fb69faa1be275381f6b8bbe32477c351b4e92ca562e38ddec8363432356e2d915136a6550745caaade41e3608e46151abcd7e2c5660cf9952b078f8c","href":"https://static.observableusercontent.com/files/a3043647fb69faa1be275381f6b8bbe32477c351b4e92ca562e38ddec8363432356e2d915136a6550745caaade41e3608e46151abcd7e2c5660cf9952b078f8c","name":"gwangju_07182025@1.csv","type":"text/csv","lastModified":1752889886059.267,"size":130982}] 2f:{"id":"47030b399f7e749e","slug":null,"title":"spiral heatmap | historical precipitation in South Korea","thumbnail":"563357eb955cfd12475ee53323dbb7246ffd417499aeb658c5748a4d5cbfc641","access_level":"public","create_time":"$D2024-07-17T13:17:39.969Z","update_time":"$D2025-07-19T02:06:08.051Z","view_time":null,"first_public_time":"$D2024-07-18T14:10:38.592Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"f3b2000322dff840","login":"helloeujin","name":"Youjin Shin | 신유진","avatar_url":"https://avatars-next.observableusercontent.com/705c83249ff8c6aa587de554b85f673b5b9dde99c46183913891479828880a4f","tier":"starter_2024","bio":"Data Visualization Specialist | Previously \n@WashingtonPost @WallStreetJournal @MITSenseableCity"},"version":937,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c44d12ac33fab6d","login":"helloeujin","name":"Youjin Shin | 신유진","avatar_url":"https://avatars-next.observableusercontent.com/93f7e33096cca2c57d029879e9b2fe9b089c411bed07e0faefa822dffe0502bd","tier":null,"bio":"Data Visualization Specialist | Previously \n@WashingtonPost @WallStreetJournal @MITSenseableCity"}],"members":[{"type":"individual","id":"4c44d12ac33fab6d","login":"helloeujin","name":"Youjin Shin | 신유진","avatar_url":"https://avatars-next.observableusercontent.com/93f7e33096cca2c57d029879e9b2fe9b089c411bed07e0faefa822dffe0502bd","tier":null,"role":"editor"},{"type":"team","id":"f3b2000322dff840","login":"helloeujin","name":"Youjin Shin | 신유진","avatar_url":"https://avatars-next.observableusercontent.com/705c83249ff8c6aa587de554b85f673b5b9dde99c46183913891479828880a4f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"bb624a9bda474033","slug":"d3-js-basic-tutorial","title":"D3.js basic tutorial","owner":{"id":"f3b2000322dff840","login":"helloeujin","name":"Youjin Shin | 신유진"}},"type":"notebook","body":{"titling":"auto","title":"spiral heatmap | historical precipitation in South Korea","cells":[{"id":0,"value":"# spiral heatmap | historical precipitation in South Korea","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"- svg angle start at right direction, while arc angle starts at north direction\n- Data from Jan. 1, 2000 to mid July 18, 2025\n- Source: 기상청([National Climate Data Center](https://data.kma.go.kr/stcs/grnd/grndRnList.do?pgmNo=69))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":816,"value":"## Daily precipitation (mm)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":820,"value":"viewof axisShown = Inputs.toggle({ label: \"Show Axis\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"viewof selected = Inputs.select([\"Seoul\", \"Gwangju\"], {\n value: \"Seoul\",\n label: \"Select Data\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"

\n\n Light rain: 0.1 mm ~ 10 mm
\n Moderate rain: 10 mm ~ 50 mm
\n Heavy rain: 50 mm ~ 100 mm
\n Very heavy rain: Over 100 mm
\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"## Scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":436,"value":"Color library\n- Color scheme: https://d3js.org/d3-scale-chromatic/sequential\n- Chroma.js: https://gka.github.io/chroma.js/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":628,"value":"Categorization\n- Light rain: 0.1 mm ~ 10 mm\n- Moderate rain: 10 mm ~ 50 mm\n- Heavy rain: 50 mm ~ 100 mm\n- Very heavy rain: Over 100 mm","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":576,"value":"colors = d3.schemeGnBu[9]\n// colors = d3.schemeYlGnBu[8]\n// colors = d3.schemeBlues[6]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"// colorScale = chroma.scale([\"#ffffff\", \"#1b82c4\"]).gamma(0.6)\n// colorScale = chroma.scale([\"#f9fcff\", \"#1b82c4\", \"#051862\"]).gamma(1)\n// colorScale = chroma.scale([\"#fafafa\", \"#0080c5\", \"#051862\"]).gamma(1)\n// colorScale = d3.scaleSequential(d3.interpolateBlues)\n// colorScale = d3.scaleSequential(d3.interpolateYlGn)\n// colorScale = d3.scaleSequential(d3.interpolateGnBu)\n// colorScale = d3.scaleSequential(d3.interpolateYlGnBu)\n\ncolorScale = d3.scaleQuantize().range(colors) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"getColors = (amount) => {\n if (amount <= 0.1) {\n // return colors[0];\n // return \"#fff\";\n return \"#fafafa\";\n } else if (amount > 0.1 && amount <= 10) {\n // return colors[0];\n return \"#e5f5d1\";\n // return colors[1];\n } else if (amount > 10 && amount <= 50) {\n return colors[3];\n } else if (amount > 50 && amount <= 100) {\n // return colors[5];\n // return \"#2f9ece\";\n return chroma(\"#2f9ece\").saturate(1.1).hex();\n } else if (amount > 100) {\n // return colors[8];\n // return \"#062b57\";\n return chroma(\"#062b57\").darken().saturate(2).hex();\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"radiusAxisScale = d3.scaleBand().domain(years).range(radiusRange).padding(0.2) // 0.1, 0.2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"angleScaleAxis = d3\n .scaleLinear()\n .domain([1, 365])\n .range([-Math.PI / 2, 2 * Math.PI - Math.PI / 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"angleScaleArc = d3\n .scaleLinear()\n .domain([1, 365])\n .range([0, Math.PI * 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"// radiusRange = [(shortLen * 0.22) / 2, (shortLen * 0.88) / 2] //min, max radius axis range\nradiusRange = [(shortLen * 0.22) / 2, (shortLen * 0.9) / 2] //min, max radius axis range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"shortLen = (width > height ? height : width) < 620\n ? 620\n : width > height\n ? height\n : width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"margin = ({ top: 40, right: 30, bottom: 40, left: 30 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"height = 880 // 880","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"axisData = data.filter((d) => d.newYear == 2000 && d.newDate.getDate() == 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"years = [...new Set(data.map((d) => d.newYear))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"data = selected == \"Seoul\" ? rawData_Seoul : rawData_Gwangju","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"rawData_Gwangju = d3\n .csvParse(await FileAttachment(\"gwangju_07182025@1.csv\").text(), d3.autoType)\n .map((d) => {\n // const date = timeParse(d.date);\n const date = d.date;\n const startOfYear = new Date(date.getFullYear(), 0, 1);\n const dayOfYear =\n Math.floor((date - startOfYear) / (1000 * 60 * 60 * 24)) + 1;\n\n d.newYear = date.getFullYear();\n d.newDate = date;\n d.dayOfYear = dayOfYear;\n\n return d;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"rawData_Seoul = d3\n .csvParse(await FileAttachment(\"seoul_07182025@1.csv\").text(), d3.autoType)\n .map((d) => {\n // const date = timeParse(d.date);\n const date = d.date;\n const startOfYear = new Date(date.getFullYear(), 0, 1);\n const dayOfYear =\n Math.floor((date - startOfYear) / (1000 * 60 * 60 * 24)) + 1;\n\n d.newYear = date.getFullYear();\n d.newDate = date;\n d.dayOfYear = dayOfYear;\n\n return d;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"d3\n .csvParse(await FileAttachment(\"gwangju_07182025@1.csv\").text(), d3.autoType)\n .map((d) => {\n const date = timeParse(d.date);\n return typeof d.date;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// timeParse = d3.timeParse(\"%Y/%m/%d\")\ntimeParse = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"// chroma = require(\"chroma-js\")\nchroma = require(\"chroma-js@2.1.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"## Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"`\n\n`","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"