33:T4dd,container = (id, title = "그동안 BTS가 발매한 모든 앨범들") => html`

${title}

`34:Tb3f,viz = ( id, headers, pageSize = 10, click = d => null ) => { const holder = container(id); let offset = 0; headers = headers.map(d => typeof d === 'string' || d instanceof String ? { field: d } : d ); const columnFunctions = headers.map(h => { return d => d[h.field]; }); let descending = headers.filter(h => h.descending); descending = descending.length > 0 ? descending[0] : headers[0]; const nodes = d3.select(holder); let tableHeader = nodes .select(".table-header") .selectAll("th") .data(headers) .enter() .append("th") .text(d => d.label || d.field) .attr("class", d => descending.field == d.field ? "sort-descending" : null ); const init = () => { const cf = crossfilter(); const dim = cf.dimension(d => columnFunctions[0]); const sid = `#${id}`; const dataTable = dc.dataTable(sid); dataTable .width(width) .dimension(dim) .section(d => "Dummy") // Must pass in. Ignored since .showGroups(false) .size(Infinity) .columns(columnFunctions) .showSections(false) .sortBy(d => d[descending.field]) // Initially sort by max_conf column .order(d3.descending); function sort(d) { d.descending = d.descending ? false : true; dataTable .order(d.descending ? d3.descending : d3.ascending) .sortBy(r => r[d.field]); dataTable.redraw(); nodes.selectAll("th").classed("sort-descending", false); nodes.selectAll("th").classed("sort-ascending", false); d3.select(this).classed( d.descending ? "sort-descending" : "sort-ascending", true ); } tableHeader.on("click", sort); let count = 0; const updateMetadata = () => { const from = offset, to = offset + pageSize; count = cf.groupAll().value(); nodes.select('#begin').text(from); nodes.select('#end').text(to); nodes.select('#size').text(count); }; const update = () => { dataTable.beginSlice(offset); dataTable.endSlice(offset + pageSize); dataTable.redraw(); updateMetadata(); }; const next = () => { offset += pageSize; if (offset >= count - pageSize) offset = count - pageSize; update(); updateMetadata(); }; const prev = () => { offset -= pageSize; if (offset < 0) offset = 0; update(); updateMetadata(); }; dataTable.on('pretransition', table => { table.selectAll('td.dc-table-column').on('click', d => { click(d); }); }); d3.select(`#${id}-next`).on('click', next); d3.select(`#${id}-prev`).on('click', prev); return { render: () => dataTable.render(), update: update, data: cf, next: next, prev: prev }; }; return { container: holder, init: init }; }35:Tb85,sample = [ { album_title: '2 COOL 4 SKOOL', release_date: '2013-06-12' }, { album_title: 'O!RUL8,2?', release_date: '2013-09-11' }, { album_title: 'Skool Luv Affair', release_date: '2014-02-12' }, { album_title: 'SKOOL LUV AFFAIR SPECIAL ADDITION', release_date: '2014-05-14' }, { album_title: 'DARK&WILD', release_date: '2014-08-20' }, { album_title: 'Boy In Luv (Japanese Ver.)', release_date: '2014-10-07' }, { album_title: 'Danger (Mo-Blue-Mix)', release_date: '2014-11-21' }, { album_title: 'WAKE UP', release_date: '2015-02-26' }, { album_title: '화양연화 pt.1', release_date: '2015-04-29' }, { album_title: '화양연화 pt.2', release_date: '2015-11-30' }, { album_title: 'I NEED U (Japanese Ver.)', release_date: '2016-02-15' }, { album_title: '화양연화 Young Forever', release_date: '2016-05-02' }, { album_title: 'RUN (Japanese Ver.)', release_date: '2016-05-19' }, { album_title: 'WINGS', release_date: '2016-10-10' }, { album_title: 'YOUTH', release_date: '2016-11-09' }, { album_title: 'YOU NEVER WALK ALONE', release_date: '2017-02-13' }, { album_title: 'Come Back Home', release_date: '2017-07-04' }, { album_title: 'Blood Sweat & Tears', release_date: '2017-05-10' }, { album_title: "LOVE YOURSELF 承 'Her'", release_date: '2017-09-18' }, { album_title: 'MIC Drop (Steve Aoki Remix) (Feat. Desiigner)', release_date: '2017-11-24' }, { album_title: 'MIC Drop/DNA/Crystal Snow', release_date: '2017-12-06' }, { album_title: 'FACE YOURSELF', release_date: '2018-04-02' }, { album_title: "LOVE YOURSELF 轉 'Tear'", release_date: '2018-05-18' }, { album_title: 'FAKE LOVE (Rocking Vibe Mix)', release_date: '2018-06-04' }, { album_title: "LOVE YOURSELF 結 ‘Answer'", release_date: '2018-08-24' }, { album_title: 'FAKE LOVE / Airplane pt.2', release_date: '2018-11-05' }, { album_title: 'MAP OF THE SOUL : PERSONA', release_date: '2019-04-12' }, { album_title: 'Dream Glow (BTS WORLD OST Part 1)', release_date: '2019-06-07' }, { album_title: 'A Brand New Day (BTS WORLD OST Part 2)', release_date: '2019-06-14' }, { album_title: 'All Night (BTS WORLD OST Part 3)', release_date: '2019-06-21' }, { album_title: 'BTS WORLD OST', release_date: '2019-06-28' }, { album_title: 'Lights / Boy With Luv', release_date: '2019-07-03' }, { album_title: 'Make It Right (Feat. Lauv)', release_date: '2019-10-18' }, { album_title: 'Make It Right (Feat. Lauv) (EDM Remix)', release_date: '2019-11-01' }, { album_title: 'Make It Right (Feat. Lauv) (Acoustic Remix)', release_date: '2019-11-08' }, { album_title: 'MAP OF THE SOUL : 7', release_date: '2020-02-21' }, { album_title: 'MAP OF THE SOUL : 7 ~THE JOURNEY~', release_date: '2020-07-15' }, { album_title: 'Dynamite', release_date: '2020-08-21' } ]36:[{"id":"3e6496c0fbd8c473230948481d9dff04e19c769aca042162880bfc7d1a9032242eb34d373ef9937af1f8172f62be8c21ed91c8ec970ee0ee4ff02cfa9992ffd9","href":"https://static.observableusercontent.com/files/3e6496c0fbd8c473230948481d9dff04e19c769aca042162880bfc7d1a9032242eb34d373ef9937af1f8172f62be8c21ed91c8ec970ee0ee4ff02cfa9992ffd9","name":"groupedTrack@3.csv","type":"text/csv","lastModified":1598078360351.088,"size":87},{"id":"6dcaa9fdb74262b65a3457142b4cac77579f1b1c8f15bb80bc5655f7bf348dd28917dad068987d9a44cbcef4f5432c044573e1e95c7abff8695b955bc878df14","href":"https://static.observableusercontent.com/files/6dcaa9fdb74262b65a3457142b4cac77579f1b1c8f15bb80bc5655f7bf348dd28917dad068987d9a44cbcef4f5432c044573e1e95c7abff8695b955bc878df14","name":"groupedTracksByReleaseDate@6.csv","type":"text/csv","lastModified":1598775427839.475,"size":123},{"id":"4cdd0b876c0477149760a5bbbc0b2f75a7b4e8375617820d0e2861745421b8f281aaeb1e381600e738753f0d4d8b53b891295519466eb47d8882fda7fa5f7287","href":"https://static.observableusercontent.com/files/4cdd0b876c0477149760a5bbbc0b2f75a7b4e8375617820d0e2861745421b8f281aaeb1e381600e738753f0d4d8b53b891295519466eb47d8882fda7fa5f7287","name":"groupedTracksByReleaseDate@4.csv","type":"text/csv","lastModified":1596532070965.38,"size":75}] 32:{"title":"01. 숫자로 보는 BTS의 곡","cells":[{"id":0,"value":"md`# 01. 숫자로 보는 BTS의 곡`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`BTS는 얼마나 곡을 발매했을까요? `","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"md`그동안 BTS가 발매한 앨범과 곡을 집계해 보았을 때, BTS는 현재(2020.8.21 Naver Vibe Music 기준) 총 38장의 앨범과 226개의 곡을 만들었습니다.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"dv = v.container","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`\n2013년 6월 13일에 데뷔한 방탄소년단은 현재(2020.8.21 기준)까지 만 7년이 넘는 기간 동안 38장의 앨범 그리고 226개의 곡을 만들었습니다. 이렇게 보면 밥 먹고 잠만 자면서 일한걸까 싶을 정도 입니다만, 보통 가수 앨범엔 동일한 곡을 어레인지해서 다시 발매하는 경우가 많습니다. BTS도 그럴지 한번 살펴볼까요? \n\nBTS가 곡을 어떻게 만들고 구성했는지 보기 위해, 앨범마다 동일한 곡 제목은 제외하고 몇가지 특성을 기준으로 곡을 분류하겠습니다. 분류 기준은 다음과 같습니다.\n+ 신규 곡\n+ 다른 버전(외국어 Ver) 곡\n+ 리믹스 곡\n+ 기존 곡의 피쳐링을 추가한 곡 (Feat.)\n+ 기존 곡의 풀 버전 곡 (Full Length Edition)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"md`**곡 특성에 따라 분류해 본 BTS 전체 곡 구성**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"chart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height2]);\n \n svg.append(\"g\")\n .attr(\"fill\", \"#9467bd\")\n .selectAll(\"rect\")\n .data(data2)\n .join(\"rect\")\n .attr(\"x\", x2(0))\n .attr(\"y\", (d, i) => y2(i))\n .attr(\"width\", d => x2(d.value) - x2(0))\n .attr(\"height\", y2.bandwidth());\n \n svg.append(\"g\")\n .attr(\"fill\", \"white\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 12)\n .selectAll(\"text\")\n .data(data2)\n .join(\"text\")\n .attr(\"x\", d => x2(d.value))\n .attr(\"y\", (d, i) => y2(i) + y2.bandwidth() / 2)\n .attr(\"dy\", \"0.35em\")\n .attr(\"dx\", -4)\n .text(d => d.value)\n .call(text => text.filter(d => x2(d.value) - x2(0) < 20) // short bars\n .attr(\"dx\", +4)\n .attr(\"fill\", \"black\")\n .attr(\"text-anchor\", \"start\"));\n\n svg.append(\"g\")\n .call(xAxis2);\n\n svg.append(\"g\")\n .call(yAxis2);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`\nA라는 곡을 발매한 뒤 A를 리믹스 한 A+곡을 발매하는 경우, 사실 A+라는 곡도 A를 새롭게 어레인지하여 새로운 곡을 만들었다 할 수 있지만, 신규 곡과는 특성이 다르기 때문에 \"리믹스\" 곡으로 분류했습니다. 추가로 \"일본버전 + 리믹스\"된 곡인 경우, 곡 제목에 먼저 작성된 표기(일본버전)를 우선순위로 하여 해당 \"다른 버전\"으로 분류하였습니다.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`\n이번에는 신곡(신규 곡 - 이하 동일) 데이터를 통해 BTS 활동에 대해 알아보겠습니다. \n실제 해외 가수 중에서는 신곡을 만들지 않고 기존 곡을 'Remix piano ver', 'Remix acoustic ver' 등 여러 버전으로 앨범만 발매하는 경우가 있습니다. 그러나 BTS는 매년 꾸준히 컴백하는 등 왕성한 활동을 하고 있는데요. 활동 만큼이나 신곡을 얼마나 꾸준히 만들고 있는지 숫자를 통해 한번 알아보겠습니다.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`**년별 신규 곡 추이 (앨범 내 신규 곡의 년별 합산)**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"chart3 = {\n const svg = d3.select(DOM.svg(width, height3))\n .style(\"-webkit-tap-highlight-color\", \"transparent\")\n .style(\"overflow\", \"visible\");\n\n svg.append(\"g\")\n .call(xAxis3);\n\n svg.append(\"g\")\n .call(yAxis3);\n \n svg.append(\"path\")\n .datum(data3)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line3);\n\n const tooltip = svg.append(\"g\");\n\n svg.on(\"touchmove mousemove\", function() {\n const {date, value} = bisect3(d3.mouse(this)[0]);\n\n tooltip\n .attr(\"transform\", `translate(${x3(date)},${y3(value)})`)\n .call(callout3, `${value}\n${formatDate3(date)}`);\n });\n\n svg.on(\"touchend mouseleave\", () => tooltip.call(callout3, null));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`\nNext\n\n##### 본 글은 Naver Vibe Music 에서 공식 발매된 앨범의 데이터를 기반으로 작성했습니다.\n##### 차트는 아래 링크를 참고하여 구현했습니다.\n##### - https://observablehq.com/@d3/line-chart\n##### - https://observablehq.com/@d3/horizontal-bar-chart\n##### - https://observablehq.com/@redsift/dc-js-sortable-table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`\n~~~js\nimport {viz as table} from \"@redsift/dc-js-sortable-table\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"dc = require(\"dc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"crossfilter = require(\"crossfilter2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"v = viz(\n \"dc-table-graph\",\n [\n { label: \"앨범 타이틀\", field: \"album_title\" },\n { label: \"앨범 발매일\", field: \"release_date\", descending: true }\n ],\n 10,\n d => console.log(d)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"{\n dv;\n const chart = v.init();\n \n chart.data.add(sample);\n chart.update();\n \n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"margin2 = ({top: 30, right: 0, bottom: 10, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"height2 = Math.ceil((data2.length + 0.1) * barHeight2) + margin2.top + margin2.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"barHeight2 = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"data2 = Object.assign(d3.csvParse(await FileAttachment(\"groupedTrack@3.csv\").text(), ({name, value}) => ({name: name, value: +value})).sort((a, b) => d3.descending(a.value, b.value)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"x2 = d3.scaleLinear()\n .domain([0, d3.max(data2, d => d.value)]).nice()\n .range([margin2.left, width - margin2.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"y2 = d3.scaleBand()\n .domain(d3.range(data2.length))\n .rangeRound([margin2.top, height2 - margin2.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"xAxis2 = g => g\n .attr(\"transform\", `translate(0,${margin2.top})`)\n .call(d3.axisTop(x2).ticks(width / 80, data2.format))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"yAxis2 = g => g\n .attr(\"transform\", `translate(${margin2.left},0)`)\n .call(d3.axisLeft(y2).tickFormat(i => data2[i].name).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"height3 = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"margin3 = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"FileAttachment(\"groupedTracksByReleaseDate@4.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"data3 = Object.assign((d3.csvParse(await FileAttachment(\"groupedTracksByReleaseDate@6.csv\").text(), d3.autoType)).map(({date, value}) => ({date, value})).sort((a, b) => d3.descending(a.date, b.date)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"x3 = d3.scaleUtc()\n .domain(d3.extent(data3, d => d.date))\n .range([margin3.left, width - margin3.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"y3 = d3.scaleLinear()\n .domain([0, d3.max(data3, d => d.value)]).nice()\n .range([height3 - margin3.bottom, margin3.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"line3 = d3.line()\n .x(d => x3(d.date))\n .y(d => y3(d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"xAxis3 = g => g\n .attr(\"transform\", `translate(0,${height3 - margin3.bottom})`)\n .call(d3.axisBottom(x3).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"yAxis3 = g => g\n .attr(\"transform\", `translate(${margin3.left},0)`)\n .call(d3.axisLeft(y3))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data3.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"function formatDate3(date) {\n return date.toLocaleString(\"ko\", {\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"bisect3 = {\n const bisect = d3.bisector(d => d.date).left;\n return mx => {\n const date = x3.invert(mx);\n const index = bisect(data3, date, 1);\n const a = data3[index - 1];\n const b = data3[index];\n return b && (date - a.date > b.date - date) ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"callout3 = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}