2a:T11bf,{ const div = html`

`; const selectYear = html` `; const selectWorld = html` `; const clippedWidth = renderData.width - renderData.margin * 2; const clippedHeight = renderData.height - renderData.margin * 2; const rectWidth = clippedWidth / 13; const rectHeight = clippedHeight / 8; const gap = 2; const svg = d3 .create('svg') .attr('width', renderData.width) .attr('height', renderData.height); const stage = svg .append('g') .attr('transform', `translate(${renderData.margin},${renderData.margin})`); let year = '2019'; let world = 'world'; const mEnter = enter => enter .append('text') .classed('tick', true) .attr('transform', (d, i) => `translate(${i * rectWidth},0)`) .text(d => d.slice(0, 3).toUpperCase()); stage .selectAll('.tick') .data(months) .join(mEnter); const render = () => { const data = getData(world, year); const thresholds = getThreshold(data); const trendScale = d3 .scaleLinear() .domain([thresholds.max, thresholds.min]) .range([0, 1]); // red represents higher trend // console.log(year, world, data); // console.log(thresholds); function onMouseEnter(d, i, e) { // arrow func is not possible // console.log(d3.event, d, i, e); const mouseX = d3.event.offsetX; const mouseY = d3.event.offsetY; const hover = stage .append('g') .classed('hover', true) .attr( 'transform', `translate(${d.date.getMonth() * rectWidth},${d.depth * rectHeight + 40})` ) .attr('opacity', 0); d3.select(e[i]).attr('stroke', 'black'); hover .append('rect') .attr('fill', 'white') .attr('stroke', 'black') .attr('width', 140) .attr('height', 30) .attr('rx', 5) .attr('opacity', .5); hover .append('text') .attr('transform', 'translate(10,7)') .attr('alignment-baseline', 'hanging') .classed('hover', true) .text(`${d3.timeFormat('%Y.%m.%d')(d.date)}: ${d.value}`); hover .transition() .duration(200) .attr('opacity', 1) .attr( 'transform', `translate(${d.date.getMonth() * rectWidth},${d.depth * rectHeight + 35})` ); } function onMouseLeave(d, i, e) { d3.select(e[i]).attr('stroke', 'transparent'); stage.selectAll('.hover').remove(); } const nEnter = enter => enter .append('rect') .classed('node', true) .attr('width', rectWidth - gap) .attr('height', rectHeight - gap) .attr('opacity', 0) .attr('fill', d => d3.interpolateRdYlBu(trendScale(d.value))) .attr('transform', d => `translate(${d.date.getMonth() * rectWidth},0)`) .call(enter => enter .transition() .duration(200) .attr('opacity', 1) .attr( 'transform', d => `translate(${d.date.getMonth() * rectWidth},${d.depth * rectHeight})` ) ) .on('mouseenter', onMouseEnter) .on('mouseleave', onMouseLeave); const nUpdate = update => update .transition() .duration(200) .attr('opacity', 1) .attr( 'transform', d => `translate(${d.date.getMonth() * rectWidth},${d.depth * rectHeight})` ) .attr('fill', d => d3.interpolateRdYlBu(trendScale(d.value))); const nExit = exit => exit.remove(); stage .selectAll('.node') .data(data, d => d.id) .join(nEnter, nUpdate, nExit); }; d3.select(selectYear).on('change', function() { year = d3.select(this).property('value'); console.log(year); render(); }); d3.select(selectWorld).on('change', function() { world = d3.select(this).property('value'); console.log(world); render(); }); div.appendChild(selectWorld); div.appendChild(selectYear); div.appendChild(svg.node()); render(); return div; }2b:[{"id":"425fd9f7d0de933ebaaba1529028ad5dbf9d268094dea8540cd37bf6b1b0e8fe1006d47f7ffa355fc6740d82582c2834b3f434beba4c17d9551cafadf945207f","href":"https://static.observableusercontent.com/files/425fd9f7d0de933ebaaba1529028ad5dbf9d268094dea8540cd37bf6b1b0e8fe1006d47f7ffa355fc6740d82582c2834b3f434beba4c17d9551cafadf945207f","name":"overwatch-world@2.csv","type":"text/csv","lastModified":1574388319961.273,"size":3629},{"id":"7539b41e3586903168ed6bdd98b096ead8860b460d3e90acf8eafa4d99cc0020eb9c69642d40d031d8adcd4247ccbdffeb92196249ae89fc472c0e3294a8e508","href":"https://static.observableusercontent.com/files/7539b41e3586903168ed6bdd98b096ead8860b460d3e90acf8eafa4d99cc0020eb9c69642d40d031d8adcd4247ccbdffeb92196249ae89fc472c0e3294a8e508","name":"overwatch-kr@1.csv","type":"text/csv","lastModified":1574388319961.273,"size":3625}] 29:{"title":"Year/month Trend Heatmap of Overwatch","cells":[{"id":0,"value":"md`\n# Year/month Trend Heatmap of Overwatch\n## data from *Google Trends*\n- [World](https://trends.google.co.kr/trends/explore?date=today%205-y&q=%EC%98%A4%EB%B2%84%EC%9B%8C%EC%B9%98)\n- [South Korea](https://trends.google.co.kr/trends/explore?date=today%205-y&geo=KR&q=%EC%98%A4%EB%B2%84%EC%9B%8C%EC%B9%98)\n> Red represents more trendy period, Blue represents less trendy period.\n\n## afterthought\n- if the data is changed outside of render scope(component), it'll cause a hard reload for all other components. *general update pattern* wouldn't work in this case. use an event emitter such as *RxJs* or render \\`\\` in the same scope.\n- data nesting is bad for smooth update. It does update, but transition might get weird.\n- or don't try to implement transition for complex dataset.\n- heatmap is in fact 3d, as it has 3 different axis\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"months = [\n 'january',\n 'february',\n 'march',\n 'april',\n 'may',\n 'june',\n 'july',\n 'august',\n 'september',\n 'october',\n 'november',\n 'december'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"getThreshold = data => {\n const _data = data.map(d => d.value);\n\n return {\n max: Math.max(..._data),\n min: Math.min(..._data)\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"renderData = ({\n width: 1000,\n height: 400,\n margin: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"dateValueParser = csvText => {\n const parsed = d3.csvParseRows(csvText, d => {\n const date = new Date(d[0]);\n const value = parseInt(d[1], 10);\n if (date === 'date') return null;\n if (isNaN(value)) return null;\n return { date, value };\n });\n return parsed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"getData = (scopeCountry, scopeYear) => {\n let _data = dataWorld;\n if (scopeCountry === 'korea') _data = dataKorea;\n const mapYM = {};\n return _data\n .map(d => {\n const year = d.date.getFullYear();\n const month = d.date.getMonth();\n mapYM[year] = mapYM[year] || {};\n mapYM[year][month] = (mapYM[year][month] || 0) + 1;\n d.depth = mapYM[year][month];\n d.id = `${month}/${d.depth}`;\n return d;\n })\n .filter(d => d.date.getFullYear().toString() === scopeYear);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"dataKorea = dateValueParser(await FileAttachment(\"overwatch-kr@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"dataWorld = dateValueParser(\n await FileAttachment(\"overwatch-world@2.csv\").text()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"compareYear = (strYearSource, strYearTarget) =>\n parseInt(strYearSource, 10) === parseInt(strYearTarget, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"md`## unused code`","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"// rx = require('rxjs@latest/bundles/rxjs.umd.js')\n// viewof formYear = {\n// // unused\n// const form = html``;\n// form.i.onchange = () => {\n// // form.value = form.i.value;\n// // const customEvent = new CustomEvent('custom-event', {\n// // detail: form.i.value\n// // });\n// // emitter.dispatchEvent(customEvent);\n// };\n// form.i.onchange();\n// return form;\n// }","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2b","stdlib":"1","titling":"auto"}