33:T426,chart1 = { const arcs = pie(data1); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); svg.append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", d => color1(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.name)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.value.toLocaleString() + '%')); return svg.node(); }34:T426,chart2 = { const arcs = pie(data2); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); svg.append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", d => color2(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.name)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.value.toLocaleString() + '%')); return svg.node(); }35:[{"id":"14605004e6faba900a0864364e98685b34c0029e72ea5285c32ffa7102b59ea168946b2c5a90c36a8034fc883753bdb707a66b08993f92599ffa8068510a466d","href":"https://static.observableusercontent.com/files/14605004e6faba900a0864364e98685b34c0029e72ea5285c32ffa7102b59ea168946b2c5a90c36a8034fc883753bdb707a66b08993f92599ffa8068510a466d","name":"KakaoTalk_Photo_2020-08-14-19-49-48-1.jpeg","type":"image/jpeg","lastModified":1597402247193.749,"size":549841},{"id":"3a500a12bcfcdb5b5cb921e468abe801fdaf320b457c3a8ad0feb630052da8290fe141857964ba7cff69cbe771fd3a3088ddf759f2889389df5e7425ec791950","href":"https://static.observableusercontent.com/files/3a500a12bcfcdb5b5cb921e468abe801fdaf320b457c3a8ad0feb630052da8290fe141857964ba7cff69cbe771fd3a3088ddf759f2889389df5e7425ec791950","name":"groupedParticipateByReleaseDateAndMember@5.csv","type":"text/csv","lastModified":1598091848171.916,"size":869},{"id":"e4dd14f459e7c0c3993c532a56508150b35820542d36fcb5f19d438bcf9eced321696080dc1ec7712f1c6c6f118120cc899ca2ce3101a280fc27864a350f2916","href":"https://static.observableusercontent.com/files/e4dd14f459e7c0c3993c532a56508150b35820542d36fcb5f19d438bcf9eced321696080dc1ec7712f1c6c6f118120cc899ca2ce3101a280fc27864a350f2916","name":"groupedParticipateByReleaseDate@4.csv","type":"text/csv","lastModified":1596727514238.285,"size":120},{"id":"a767e8186c2a315b4067d9f8831043022066ccf79984ada4a1f2fcb561cbc6e7c37456fc2079cf34b0a3d6f7b2f53c1e63ae91c9d0cb2ecc68447e55db0ce9b6","href":"https://static.observableusercontent.com/files/a767e8186c2a315b4067d9f8831043022066ccf79984ada4a1f2fcb561cbc6e7c37456fc2079cf34b0a3d6f7b2f53c1e63ae91c9d0cb2ecc68447e55db0ce9b6","name":"participateCompositionRatio@1.csv","type":"text/csv","lastModified":1596724267688.049,"size":82},{"id":"0bae34a0c15b976b1342dc6d2968b6d23b6239152becb2a5370a1b60aab7d5b0008c3740c496711afab2b83c2e29a6d0b8efdf7b2708a35b075012b32f8097fe","href":"https://static.observableusercontent.com/files/0bae34a0c15b976b1342dc6d2968b6d23b6239152becb2a5370a1b60aab7d5b0008c3740c496711afab2b83c2e29a6d0b8efdf7b2708a35b075012b32f8097fe","name":"participateWriterRatio@1.csv","type":"text/csv","lastModified":1596724254123.386,"size":80}] 32:{"title":"02-1. BTS 멤버들은 앨범에 작곡, 작사로 얼마나 참여했을까","cells":[{"id":20,"value":"md`# 02-1. BTS 멤버들은 앨범에 작곡, 작사로 얼마나 참여했을까`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"html`

\n${await FileAttachment(\"KakaoTalk_Photo_2020-08-14-19-49-48-1.jpeg\").image()}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`BTS 멤버들은 곡 작업에 얼마나 참여했을까요? \n\n멤버 대부분이 직접 작곡 작사에 참여하기로 유명한 BTS 멤버들의 참여도를 한번 살펴보겠습니다. 본 글은 vibe 뮤직과 genie 뮤직을 참고하여 공식 발매된 앨범의 데이터를 기반으로 작성했으며, 일본 발매 곡은 데이터가 미비할 수 있다는 점 미리 양해 부탁드립니다.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`\nBTS 멤버가 참여하여 만들어진 곡을 선정하기 위해 곡 특성에 따라 분류했습니다. \n(곡 분류의 자세한 내용은 여기 [*링크*](https://observablehq.com/d/99222b6cfcf106f2) 에서 확인할 수 있습니다) \n\n멤버 참여로 만들어진 곡은 중복 곡을 제외한 오직 신규 곡 기준으로 봐야 합니다. 예를 들어, 중복된 곡 타이틀이나 기존 곡을 어레인지한 곡을 중복된 곡이라 분류하여 제외합니다. 또한 어레인지된 곡 또한 멤버의 참여로 만들어진 곡이지만, 직접 작곡/작사 하는 것에 의미를 크게 두었기 때문에 제외하겠습니다.\n\n제외되는 곡 기준은 아래와 같습니다. \n+ 일본 버전 곡\n+ 리믹스 곡\n+ 기존 곡의 피쳐링을 추가한 곡 (Feat.)\n+ 기존 곡의 풀 버전 곡 (Full Length Edition)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`그렇다면 신규 곡 중에서 BTS 멤버의 작곡 및 작사 참여율은 어떻게 될까요? 아래 차트를 통해 확인해보겠습니다.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`**BTS 작곡 참여도**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`**BTS 작사 참여도**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`전체 286곡 중에서 필터된 곡이 124곡이며, 이를 제외한 162곡(100%) 중 \"멤버 작곡 참여곡\"이 110곡(51%), \"멤버 작사 참여곡\"이 112곡(52%) 이었습니다. 즉, BTS 멤버들은 작곡 및 작사에 약 70% 이상 참여해왔다는 것을 알 수 있습니다. (본인이 직접 만드는 믹스테이프 데이터를 포함하게 된다면 이 참여도는 훨씬 더 증가하게 됩니다.) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`그렇다면 BTS 멤버들이 과연 이 많은 곡에 꾸준하게 참여해 왔을까요? \n\"네, 물론입니다.\" \n먼저 BTS 멤버가 한 명이라도 작곡 또는 작사에 참여한 곡에 대해서, 년도 별 참여한 곡 추이를 아래 그래프에서 확인해 보겠습니다.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`**년도 별 BTS의 작곡/작사 참여 횟수 (곡 기준)**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"chart3 = {\n const svg3 = d3.select(DOM.svg(width, height3))\n .style(\"-webkit-tap-highlight-color\", \"transparent\")\n .style(\"overflow\", \"visible\")\n .style('max-width', '100%')\n .style('height', 'auto');\n\n svg3.append(\"g\")\n .call(xAxis3);\n\n svg3.append(\"g\")\n .call(yAxis3);\n \n svg3.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 = svg3.append(\"g\");\n\n svg3.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 svg3.on(\"touchend mouseleave\", () => tooltip.call(callout3, null));\n\n return svg3.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"md` \n이번에는 멤버 별 참여 횟수를 살펴보겠습니다. 아래는 BTS 각 멤버의 매년 곡 작곡/작사 참여 횟수 추이 차트입니다.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`**년도 별 BTS 멤버 각각의 작곡/작사 참여 횟수**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"viewof selectedMember4 = DOM.select(data4.members)","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"chart4 = {\n const svg4 = d3.select(DOM.svg(width4, height4))\n .style('max-width', '100%')\n .style('height', 'auto');\n \n // Draw the x and y axes.\n svg4.append('g').call(xAxis4('년도'))\n svg4.append('g').call(yAxis4('참여횟수'))\n \n // Draw the grid lines.\n svg4.append('g').call(xGrid4)\n svg4.append('g').call(yGrid4)\n \n // Draw the lines.\n svg4.append('g')\n .selectAll('path')\n .data(data4.series)\n .join('path')\n .attr('d', (d) => line4(d.values))\n .style('stroke', (d, i) => color4[i % 10])\n .style('opacity', (d) => (selectedMember4 === 'All' || selectedMember4 === d.member) ? 1 : 0)\n \n return svg4.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"md`그래프 위에 있는 선택 리스트를 바꾸면서 각 멤버의 참여 횟수를 자세히 확인할 수 있습니다. \n\n사실 위 차트를 통해 BTS 참여 횟수만 보면 참여도가 얼마나 꾸준한지, 그리고 얼마나 많은지 감이 잘 와닿지 않습니다. 다음 장에서 곡 참여도를 다른 그룹과 비교하여 더욱 자세히 살펴보겠습니다.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`\nNext\n\n##### 본 글은 Naver Vibe Music 에서 공식 발매된 앨범의 데이터를 기반으로 작성했습니다.\n##### 차트는 아래 링크를 참고하여 구현했습니다.\n##### - https://observablehq.com/@d3/line-chart\n##### - https://observablehq.com/@d3/pie-chart\n##### - https://observablehq.com/@jeantimex/multiple-line-charts-with-different-domain`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"color4 = d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"color1 = d3.scaleOrdinal()\n .domain(data1.map(d => d.name))\n .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data1.length).reverse())","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"color2 = d3.scaleOrdinal()\n .domain(data2.map(d => d.name))\n .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data2.length).reverse())","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"data1 = d3.csvParse(await FileAttachment(\"participateCompositionRatio@1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"data2 = d3.csvParse(await FileAttachment(\"participateWriterRatio@1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"height = Math.min(width, 300)","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"arc = d3.arc()\n .innerRadius(0)\n .outerRadius(Math.min(width, height) / 2 - 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"arcLabel = {\n const radius = Math.min(width, height) / 2 * 0.8;\n return d3.arc().innerRadius(radius).outerRadius(radius);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"pie = d3.pie()\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"width3 = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"height3 = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"margin3 = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"data3 = Object.assign((d3.csvParse(await FileAttachment(\"groupedParticipateByReleaseDate@4.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":276,"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":282,"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":283,"value":"line3 = d3.line()\n .x(d => x3(d.date))\n .y(d => y3(d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"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":287,"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":289,"value":"function formatDate3(date) {\n return date.toLocaleString(\"ko\", {\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"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":293,"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"},{"id":319,"value":"width4 = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"height4 = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"margin4 = ({top: 40, right: 20, bottom: 60, left: 80})","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"data4 = {\n const csv = d3.csvParse(await FileAttachment(\"groupedParticipateByReleaseDateAndMember@5.csv\").text(), d3.autoType)\n const memberMap = new Map()\n const datesSet = new Set()\n const series = [];\n csv.forEach(({date, member, value}) => {\n datesSet.add(date)\n if (!memberMap.has(member)) {\n memberMap.set(member, series.length)\n series.push({member, values: []})\n }\n series[memberMap.get(member)].values.push({date, value})\n })\n \n return {\n series,\n dates: Array.from(datesSet),\n members: ['All', ...Array.from(memberMap.keys()).sort()],\n memberMap,\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"xScale4 = d3.scaleUtc()\n .domain(d3.extent(data4.dates)).nice()\n .range([margin4.left, width4 - margin4.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"yScale4 = {\n const scale = d3.scaleLinear().range([height4 - margin4.bottom, margin4.top])\n \n if (selectedMember4 === 'All') {\n scale.domain([0, d3.max(data4.series, (s) => d3.max(s.values, (d) => d.value))]).nice()\n } else {\n const slice = data4.series[data4.memberMap.get(selectedMember4)]\n scale.domain([0, d3.max(slice.values, (d) => d.value)]).nice()\n }\n \n return scale\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"xAxis4 = (label) => (g) => g\n .attr('transform', `translate(0,${height4 - margin4.bottom})`)\n .call(d3.axisBottom(xScale4))\n .append('text')\n .attr('class', 'axis-label')\n .text(label)\n .attr('x', margin4.left + (width4 - margin4.left - margin4.right) / 2)\n .attr('y', 50) // Relative to the x axis.","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"yAxis4 = (label) => (g) => g\n .attr('transform', `translate(${margin4.left},0)`)\n .call(d3.axisLeft(yScale4))\n // Add label\n .append('text')\n .attr('class', 'axis-label')\n .text(label)\n .attr('transform', 'rotate(-90)')\n .attr('x', -(margin4.top + (height4 - margin4.top - margin4.bottom) / 2))\n .attr('y', -60) // Relative to the y axis.","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"xGrid4 = (g) => g\n .attr('class', 'grid-lines')\n .selectAll('line')\n .data(xScale4.ticks())\n .join('line')\n .attr('x1', d => xScale4(d))\n .attr('x2', d => xScale4(d))\n .attr('y1', margin4.top)\n .attr('y2', height4 - margin4.bottom)","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"yGrid4 = (g) => g\n .attr('class', 'grid-lines')\n .selectAll('line')\n .data(yScale4.ticks())\n .join('line')\n .attr('x1', margin4.left)\n .attr('x2', width4 - margin4.right)\n .attr('y1', d => yScale4(d))\n .attr('y2', d => yScale4(d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"line4 = d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => xScale4(d.date))\n .y(d => yScale4(d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"title4 = (label) => (g) => g\n .append('text')\n .attr('class', 'title')\n .text(label)\n .attr('x', width4 / 2)\n .attr('y', 20)","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}