31:T4cc,container = (id, title = "All albums released by BTS") => html`

${title}

`32: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 }; }33: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' } ]34:[{"id":"6dcaa9fdb74262b65a3457142b4cac77579f1b1c8f15bb80bc5655f7bf348dd28917dad068987d9a44cbcef4f5432c044573e1e95c7abff8695b955bc878df14","href":"https://static.observableusercontent.com/files/6dcaa9fdb74262b65a3457142b4cac77579f1b1c8f15bb80bc5655f7bf348dd28917dad068987d9a44cbcef4f5432c044573e1e95c7abff8695b955bc878df14","name":"groupedTracksByReleaseDate@6.csv","type":"text/csv","lastModified":1606630224732.981,"size":123},{"id":"76e4b345b95475eec00b6c9fee3a0f693182e6d170785c6fde05cc54ec7acf59232e2e495a1f65c1bd0ae124e3829a892685c3d0d3e8c827785f443a1b3c733e","href":"https://static.observableusercontent.com/files/76e4b345b95475eec00b6c9fee3a0f693182e6d170785c6fde05cc54ec7acf59232e2e495a1f65c1bd0ae124e3829a892685c3d0d3e8c827785f443a1b3c733e","name":"groupedTrack-3.csv","type":"text/csv","lastModified":1606650370121.085,"size":97},{"id":"4cdd0b876c0477149760a5bbbc0b2f75a7b4e8375617820d0e2861745421b8f281aaeb1e381600e738753f0d4d8b53b891295519466eb47d8882fda7fa5f7287","href":"https://static.observableusercontent.com/files/4cdd0b876c0477149760a5bbbc0b2f75a7b4e8375617820d0e2861745421b8f281aaeb1e381600e738753f0d4d8b53b891295519466eb47d8882fda7fa5f7287","name":"groupedTracksByReleaseDate@4.csv","type":"text/csv","lastModified":1606630224732.981,"size":75}] 2f:{"title":"01. Song of the BTS in Numbers","cells":[{"id":0,"value":"md`# 01. Song of the BTS in Numbers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`How many songs did BTS release? `","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"md`Looking at the albums and songs released by BTS so far, BTS has created a total of 38 albums and 226 songs currently (2020.8.21 Naver Vibe Music).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"dv = v.container","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`\nBTS, which debuted on June 13 2013, has produced 38 albums and 226 songs for 7 years until now (2020.8.21). Looking at it like this, it seems like They worked only while eating and sleeping, but there are many cases where the same song is arranged in a singer's album and released again. If so, shall we take a look at whether BTS will do that? \n\nTo see how BTS created and organized their songs, I'll categorize the songs based on some categories except for the same song title for each album. The category type are as follows: \n\n+ New song\n+ Foreign language song\n+ Remix song\n+ Featuring song\n+ Full Length Edition song\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"md`**All BTS songs organized by categories**`","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`If you release the song \"A\" and then release the \"A+\" song that remixed \"A\", you can actually say that the song \"A+\" was newly arranged to create a new song, but it is classified as a \"remix\" song because it has different category from the new song. In the case of \"Japanese version + remixed\" song, the first notation written in the song title \"Japanese version\" was high priority and classified as the corresponding \"Foreign language song\"\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`\nThis time, I will look into the BTS activities through the data of the new song. \nIn fact, some singers do not create new songs, but only release albums in multiple versions such as 'Remix piano ver' or 'Remix acoustic ver' and so on. However, BTS is really active, such as making a steady comeback every year. Let’s find out through the numbers how consistently they have been making new songs as much as BTS activities.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`**New song trend by year (total of new songs in the album by year)**`","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##### This article is based on the data of the album provided by Naver Vibe Music.\n##### The visualization chart was implemented by referring to the link below.\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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"v = viz(\n \"dc-table-graph\",\n [\n { label: \"Album title\", field: \"album_title\" },\n { label: \"Release date\", field: \"release_date\", descending: true }\n ],\n 10,\n d => console.log(d)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$33","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: 100})","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":"$W34","stdlib":"1","titling":"auto"}